графические форматы для веб-страниц

Нередко вебмастера задаются вопросом: какой формат использовать для оптимизации изображений под веб? Конечно-же многие ответят, что нужно использовать Jpg, однако это далеко не всегда является правильным решением. Итак, в данной статье рассмотрим три графических формата, позволяющих сжимать изображения для веб-страниц.

JPG (Joint Photographic Experts Group)
Является наиболее распространенным графическим форматом, так как его поддерживают все существующие ныне браузеры и при его использовании можно добиться высокой степени сжатия. Особенностью данного формата является возможность регулировки качества изображения, что позволяет настроить нужную степень сжатия. Существенным минусом является то, что при сжатии в Jpeg довольно сильно страдает качество изображения, особенно это заметно на резких, контрастных цветовых переходах. Кроме того данный формат не поддерживает прозрачность.
Jpg целесообразно использовать для сжатия фотографий или рисунков, когда их качеством можно пожертвовать. Конечно можно сохранить изображение в Jpeg и в хорошем качестве, но в этом случае степень сжатия будет сравнительно небольшой.

GIF (Graphics Interchange Format)
Также является популярным форматом графических файлов. Высокая степень сжатия достигается благодаря использованию 256-цветной палитры. Использование ограниченной палитры позволяет без потери качества существенно сжать изображения, состоящие из нескольких ярко выраженных цветов, таких как чертежи, схемы, карты или логотипы. А вот для сохранения фотографий Gif совершенно не пригоден ибо при заметном ухудшении качества фотографии, размер файла сильно не изменится.

Что касается прозрачности, то в gif она достигается путем «вырезания» пикселей одного цвета, в следствие чего на границе альфа-канала могут появляться цветные артефакты в виде своеобразного ореола. мягкий альфа-канал в Gif реализовать не удастся.
Стоит отметить, что используя этот формат можно сохранять анимацию. Jpg и Png этого делать не позволяют.

PNG (Portable Network Graphics)
Этот формат, как видно из названия был разработан специально для сети Интернет. Png позволяет существенно сжать изображение, практически не вредя его качеству. Кроме того Png имеет полную поддержку прозрачности, что позволяет делать плавные переходы от цвета к альфа-каналу.
Формат отлично подойдет для сохранения фотографий, качеством которых вы дорожите. Вебмастера же могут использовать этот формат для создания графических элементов дизайна.

Теперь проведем небольшое исследование: попробуем оптимизировать несколько изображений разного типа используя эти форматы. Оценка  под картинкой условна и выставлена исходя из соотношения размер/качество.

Фотографии.
Сперва попробуем сохранить в разных форматах фотографию. В качестве примера я решил использовать дефолтные обои Win XP — «Безмятежность».

  • Исходный формат: BMP (Просмотр)
  • Размеры в пикселях: 800х600
  • Размер в Mb: 1,37Мб
Безмятежность Jpeg

Jpg с низкой степенью сжатия.
Визуально качество не изменилось.
Размер: 222Кб
Результат: отлично

Безмятежность

Jpg со средней степенью сжатия.
Качество стало хуже.
Размер: 57Кб
Результат: удовлетворительно

Безмятежность

Gif.
Качество сильно пострадало.
Размер: 176Кб
Результат: плохо

Безмятежность

Png.
Качество не изменилось.
Размер: 484Кб
Результат: хорошо

Лучшее сжатие — Jpg (57 Кб)
Лучшее качество — Png (484 Кб).
Соотношение качество/степень сжатия — Jpg (1,37Мб > 222Кб).

Чертежи и сканированный текст (Ч/б)
В качестве примера возьмем чертеж БМП.

  • Исходный формат: BMP (Просмотр)
  • Размеры в пикселях: 1743х1026
  • Размер в Kb: 220Кб
MCV80_2

Jpg с высокой степенью сжатия.
Качество сильно пострадало.
Размер: 108Кб
Результат: плохо

MCV80_2

Gif.
Качество не пострадало
Размер: 53,5Кб
Результат: хорошо

MCV80_2

Png.
Качество осталось прежним.
Размер: 35,3Кб
Результат: отлично

Лучшее сжатие — Png (35,3Кб)
Лучшее качество — Png (35,3Кб).
Соотношение качество/степень сжатия — Png (220Кб > 35,3Кб).

Цветные изображения с небольшим количеством цветов
В качестве примера возьмем изображение из сервиса «Яндекс карты».

  • Исходный формат: BMP (Просмотр)
  • Размеры в пикселях: 600х450
  • Размер в Kb: 264Кб
загруженное

Jpg с низкой степенью сжатия.
Качество не изменилось.
Размер: 225Кб
Результат: плохо

загруженное1

Jpg со средней степенью сжатия.
Качество значительно ухудшилось.
Размер: 39,5Кб
Результат: удовлетворительно

загруженное

Gif .
Качество осталось без изменений.
Размер: 53.7Кб
Результат: хорошо

загруженное

Png.
Качество не изменилось.
Размер: 46.9Кб
Результат: отлично

Лучшее сжатие — Jpg(39,5Кб)
Лучшее качество — Png (46,9Кб).
Соотношение качество/степень сжатия — Png (264Кб > 46,9Кб).

Изображения с альфа-каналом.
Из этой битвы Jpg выбывает сразу, т.к. альфа-канал им не поддерживается вовсе.
Для примера мы будем использовать изображение звезды с прозрачным фоном и резкими краями.

  • Исходный формат: Tiff (Скачать)
  • Размеры в пикселях: 400х400
  • Размер в Kb: 629Кб
hollow_star_png_by_vin8it-d4d6uza

Gif .
Качество стало немного хуже.
Размер: 4Кб
Результат: хорошо

hollow_star_png_by_vin8it-d4d6uza

Png .
Качество осталось без изменений.
Размер: 20,9Кб
Результат: отлично

Лучшее сжатие — Gif (4Кб).
Лучшее качество — Png (20,9Кб).
Соотношение качество/степень сжатия — Png (629Кб > 20,9Кб).

Теперь посмотрим, как эти форматы работают с мягким альфа-каналом.

  • Исходный формат: Tiff (Скачать)
  • Размеры в пикселях: 400х400
  • Размер в Kb: 839Кб
hollow_star_pn1

Gif .
Результат далек от оригинала.
Размер: 24,4Кб
Результат: плохо

hollow_star_pn1

Png .
Качество осталось без изменений.
Размер: 132Кб
Результат: хорошо

Лучшее сжатие — Gif (24,4Кб).
Лучшее качество — Png (132Кб).
Соотношение качество/степень сжатия — Png (839Кб > 132Кб).

Вывод:
Формат Jpg показывает неплохие результаты при сжатии фотографий и других изображений с большим количеством цветов и градиентов, однако использование его в других целях далеко не всегда оправдано.
Gif по результатам исследования показал себя хуже  конкурентов. Использование этого формата может быть оправдано при создании мелких элементов дизайна для сайта и при создании анимации.
Png в первую очередь отлично подойдет для создания прозрачных и полупрозрачных элементов дизайна, а также для сжатия изображений с небольшим количеством цветов (сервис для сжатия png).