Форматы изображений в веб-дизайне

Форматы изображений в веб-дизайне

 

Не секрет, что графика может существовать в различных форматах. Самыми популярными среди них, пожалуй, являются GIF, JPEG и PNG. На этих трёх китах и стоит web-дизайн любых сайтов. Давайте рассмотрим каждый из них по очереди и выясним особенности.

 

Формат GIF

 

Итак, GIF. (Graphics Interchange Format).Разработанный в 1987 году компанией CompuServe этот формат предназначался для передачи растровых изображений по Сети (локальной и Интернет). Но первый GIF получился комом: изображение выходило слишком «увесистым», то есть превышало объёмы, которые бы позволяли передавать его по Сети. Тогда ему на смену двумя годами позже пришёл усовершенствованный вариант, получивший название GIF87a, который имел несколько серьёзных отличий от своего предшественника. Во-первых, были существенно сокращены объёмы файла. Достичь этого удалось благодаря LZW-компрессии. Сжатие происходит за счёт строк, которые имеют повторяющиеся участки. Например, с лёгкостью можно уменьшить размер изображения, в котором большое количество пикселей одного цвета по горизонтали. Кстати, алгоритм сжатия LZW относят к форматам сжатия без потерь. И это не просто красивые слова: восстановленные из GIF данные будут в точности соответствовать упакованным. Однако это касается только 8-битных изображений с 256-цветовой палитрой. В случае перевода в GIF цветной фотографии, конечно же, будут довольно существенные потери в качестве. Всё потому, что изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов. Кроме того, GIF обладает свойством чересстрочности, что даёт возможность увидеть всё изображение целиком, имея только часть файла (правда тогда страдает разрешение). Эта опция находит широкое применение в Интернете. Свойства формата определили и область его применения. GIF чаще всего можно встретить в диаграммах, графиках, простейших (немногоцветных) изображениях и, конечно же, в анимации, например, в баннерах.

 

Формат JPEG

 

Ещё одним популярным форматом является JPEG (JointPhotographicExpertsGroup). Основное назначением этого формата является как раз хранение многоцветных фотографических изображений. В Сети JPEG нашёл применение благодаря своей удивительной способности сжимать изображения практически без потерь, то есть без уменьшения количества цветов. В данном случае метод основывается на сокращении числа пикселей, содержащих информацию. Работает это, примерно, так. JPEG находит плавные переходы цвета в участках 9х9 пикселей. Вместо действительных значений JPEG хранит скорость изменения от пикселя к пикселю. Ту информацию, которая с его точки зрения является лишней, он отбрасывает, усредняя некоторые значения. В процессе сжатия происходит конвертация изображения в цветовую систему YCbCr.

Каналы Cb и Cr, несущие информацию как раз о цвете, уменьшаются в 2 раза. После чего все цветовые каналы изображения, в том числе черно-белый канал Y, дробятся на части (8х8 пикселей), которые и проходят дискретное косинусное преобразование, то есть сжатие без потерь. На последнем этапе происходит упаковка полученных в итоге коэффициентов при помощи кодов Хаффмана. Чем выше мы устанавливаем уровень компрессии, тем больше таких данных отбрасывается, а, значит, тем ниже становится качества картинки на выходе. Метод сжатия JPEG позволяет получить файл в 10-500 раз меньше, чем ВМР. И, кстати, этот формат, как и GIF, поддерживает чересстрочность. Перечисленные выше свойства JPEG дают понять, что лучше его использовать для сжатия растровых картинок фотографического качества, а не для, скажем, логотипов или схем. Объясняется такая избирательность просто: в фотографиях гораздо больше полутоновых переходов, чем в логотипах, где из-за однотонной заливки повышается вероятность нежелательных помех. Естественно, что исходный файл, для которого требуется сжатие, должен обладать высоким разрешением, для того, чтобы в итоге получились наиболее мягкие переходы цвета.

 

Формат PNG

(Portable Network Graphics) (именно так звучит развёрнутый вариант наименования этого формата) был придуман как замена GIF, поэтому во многом они схожи друг с другом (например, возможность прозрачного фона).

Однако этот брат не совсем близнец. PNG имеет больший, по сравнению всё с тем же GIF, размер файла, да и поддержка анимации здесь отсутствует. Но кроме отличительных минусов, PNG имеет и ряд отличительных плюсов. Так, PNG открывает возможность сохранения всей цветовой информации и информации об Alpha-каналах масок и слоёв.

В отличие от GIF его «заменитель» позволяет хранить и, так называемые, полноцветные изображения, глубина цвета которых может достигать 48 бит/ пискель. Ну и плюс ко всему здесь используется более эффективный алгоритм чересстрочности, прозрачности и механизм гамма-коррекции.