Графика для веб-дизайна.

В наше время значение графической информации на web-страницах сложно переоценить. Как говориться, "Лучше один раз увидеть...". Графические элементы делают страницы более наглядными и привлекательными. Однако, прежде чем приступить к добавлению изображений на наши страницы, рассмотрим графические форматы, поддерживаемые современными браузерами, а, так же, методы их получения и оптимизации с помощью Adobe^® Photoshop CS.

Формат JPEG (Joint Photographic Experts Group)

Этот формат впервые реализовал новый принцип сжатия изображений с потерями информации - JPEG. Он основан на удалении из изображения той информации, которая все равно не воспринимается (или слабо воспринимается) человеческим глазом. Лишенное избыточной информации изображение занимает гораздо меньше места, чем исходное. Степень сжатия, а следовательно, и количество удаляемой информации плавно регулируется. Низкие степени сжатия дают лучшее качество изображения, а высокие могут существенно его ухудшить.

Наиболее широко JPEG используется при создании изображений для электронного распространения на CD-ROM или в Интернете. Компактность файлов JPEG делает этот формат незаменимым в тех случаях, когда размер файлов критичен, например, при их передаче по каналам связи. JPEG поддерживает полутоновые и полноцветные изображения в моделях RGB и CMYK. Прозрачность не поддерживается.

Используйте формат JPEG только для фотографических изображений. На рисунках с четкими границами и большими заливочными областями сильно проявляются дефекты сжатия. Особенно характерно появление 'грязи' вокруг темных линий на светлом фоне и видимых квадратных областей.

Формат GIF (Graphics Interchange Format)

Формат создан крупнейшей онлайновой службой CompuServe (ныне подразделение AOL, America Online) специально для передачи растровых изображений в глобальных сетях. Ориентирован на компактность и использует алгоритм сжатия LZW, не приводящий к потере качества. Используется только по своему первоначальному предназначению - в Internet, поскольку поддерживает только индексированные изображения.

Формат GIF озволяет сохранять в одном файле несколько индексированных изображений (почти как слои в Photoshop). Броузеры способны демонстрировать все эти изображения по очереди, получая в результате несложную анимацию. В файле анимации хранятся не только кадры анимации, но и параметры ее демонстрации. GIF-анимация в силу своей простоты наиболее распространена в Internet.

Кроме того, один из цветов в палитре индексированного изображения можно объявить прозрачным. В броузере участки этого цвета будут прозрачными, сквозь них будет виден фон страницы. Эта прозрачность, однако, имеет отчетливо видимую пикселизацию на криволинейной границе прозрачности (в силу того, что поддерживается всего две степени прозрачности - прозрачная и непрозрачная):

Рис. №3.1.1. GIF, No Transparency Dither

Рис. №3.1.2. GIF, Transparency Dither - Diffusion

Изображение 3.1.2 использует смешивание прозрачных и непрозрачных пикселей (Dither) для получения более плавного перехода в прозрачность.

Индексированная модель цвета не позволяет сохранить более 256 цветов в таблице. Поэтому формат GIF используют для представления малоцветных графических элементов web-страниц (кнопки, рамки, банеры, маркеры, фоновые узоры и пр.)

Формат PNG (Portable Network Graphics).

Как явствует из названия, формат PNG предназначен для передачи изображений по сети. Это достаточно 'молодой' формат для Web-графики, конкурирующий с GIF. Все последние версии броузеров поддерживают его без специальных подключаемых модулей. Формат поддерживает полутоновые и полноцветные RGB-изображения с единственным альфа-каналом, а также индексированные и монохромные изображения без альфа-каналов. Альфа-канал служит маской прозрачности. Таким образом, формат PNG - единственный из распространенных форматов, позволяющий получать полноцветные изображения с прозрачным фоном. Стоит отметить, что PNG изображения с полноценным 8-мибитным alpha-каналом не поддерживается браузером Microsoft^® Internet Explorer, тогда как Opera и Firefox корректно их отображают (есть повод задуматься...):

Рис. №3.1.3. PNG в MSIE

Рис. №3.1.4. PNG в Opera

Рис. №3.1.5. PNG в Firefox

В формате PNG использован мощный алгоритм сжатия без потерь информации, основанный на популярном LZW-сжатии.

Формат BMP(BitMap)

Растровый формат, созданный Microsoft^®, ориентирован на применение в операционной системе Windows. Он используется для представления растровых изображений в ресурсах программ. Поддерживаются только изображения в модели RGB с глубиной цвета до 24 бит. В принципе, формат предполагает использование простейшего алгоритма сжатия - RLE (Run Length Encoding), без потерь информации, но этот вариант редко используется из-за потенциальных проблем несовместимости.

Данный формат в наше время редко используется на web-страницах. Мы затронули его в нашем курсе только как дань истории.