>>> Перейти на мобильный размер сайта >>>

Учебное пособие

Создание сайта

       

Создание графических элементов для сайта

Проблемой номер один создания графики для сайта является размер файла и суть в том, что самая лучшая графика для веб сайта — та, которая имеет приемлемое качество изображения и небольшой размер файла.

Графические форматы

При работе вы будете иметь дело прежде всего с двумя типами изображений: JPEG и GIF. Оба они являются графическими форматами со сжатием и наиболее часто используются при разработке сайтов Internet.

Формат JPEG (Joint Photographic Experts Group, Объединенная экспертная группа по фотографии) — это масштабируемый упакованный формат, обеспечивающий высокую степень сжатия с очень небольшим снижением качества изображения. Для изображения в электронной форме не является необычным некоторая потеря четкости, особенно при преобразовании из одного формата в другой. Исходя из того что JPEG объединяет в себе хорошую степень сжатия и незначительную потерю качества, он является идеальным форматом для среды веб сайта, в которой изображения часто масштабируются, преобразовываются или изменяются иным образом. Формат JPEG наиболее подходит для фотографий или изображений с количеством цветов более 256. В сетевой графике большое значение имеет число битов, используемых для представления каждого цвета изображения, известное также как глубина цвета или битовая глубина (bit depth) файла. Изображения с восьмью битами цветовой информации на пиксел позволяют обеспечить 256 различных цветов. Большее количество бит означает большее количество поддерживаемых цветов.

Формат GIF (Graphics Interchange Format, Формат обмена графическими данными) — это упакованный формат для изображений, содержащих 256 или менее цветов. Формат GIF обычно используется для изображений, содержащих в основном ровные цвета, например, таких, как иллюстрации. Формат GIF также поддерживает прозрачность и чересстрочное отображение.

Цвета в HTML

Если вы еще не очень хорошо знакомы с HTML и вам интересно, как кодируются отображаемые браузером цвета, то сейчас самое время рассмотреть этот вопрос поподробнее.

Битовая глубина

Количество цветов

8 256
7 128
6 64
5 32
4 16
3 8

Рис. 8.1. Различные битовые глубины и соответствующее количество цветов

Наверное, вы знаете, что ваш монитор для отображения цветов на экране использует цветовую модель RGB (Red, Green, Blue, Красный, зеленый, синий). Однако в HTML для задания цвета используется шестнадцатеричное представление. Вы можете спросить себя: "Зачем, собственно, мне разбираться с этими жуткими числами?" Если вы сами создаете графику и не хотите, чтобы цвета были размыты или если вы просто хотите глубже понять детали представления цвета в HTML, то все нижеследующее, несомненно, будет вам небесполезно. Так как мы уже знаем, что предпочтительно использовать 216-цветную безопасную палитру, то мы остановимся на представлении этой палитры в шестнадцатеричном виде и в RGB.

В коде HTML веб страниц нередко можно встретить атрибут color. Например, если на странице есть черный текст, то этот код будет выглядеть следующим образом: <font color="#oooooo"> ... </font>. Шестнадцатеричные цвета представляют собой наборы из трех двузначных шестнадцате-ричных чисел. Каждое отдельное число соответствует значениям R, G и В, общее количество символов в наборе равно шести. Например, 000000 соответствует черному, который является отсутствием цвета. Другое крайнее значение — FFFFFF, т. е. максимальная интенсивность всех трех цветов соответствует белому цвету. В системе координат RGB черный цвет представляется последовательностью о, о, о, а белый — 255, 255, 255. Вы можете задать любую комбинацию из шести шестнадцатеричных цифр и придумать произвольный шестнадцатеричный цвет, однако для того, чтобы не выйти за пределы 216-цветной палитры, мы будем использовать комбинации из достаточно ограниченного множества значений.

Настройка фонового рисунка

Ниже приведено несколько советов по ускорению загрузки фоновых изображений без ущерба для их внешнего вида:

  • Так как фон — это всего лишь плиточное графическое изображение, то для уменьшения размера файла уменьшите размер плитки фона
  • Не размещайте на фоне мелких и контрастных деталей, помните, что большая часть его будет покрыта текстом
  • Не забывайте о возможности использования в качестве фона цвета, а не изображения; это уменьшит время загрузки, в некоторых случаях значительно.

 

Top.Mail.Ru
Top.Mail.Ru