Форматы изображений для сайта.

Сегодня мы с Вами поговорим о различных форматах изображений используемых на web-страницах. На первый взгляд может показаться: "А что тут думать? Взял любое фото и разместил на сайте..." . Да действительно, взял и разместил, но - это только на первый взгляд. От того как и в каком формате подготовлено изображение (фотография, рисунок, чертеж, анимированная картинка и т.д.), многое зависит. Например: как долго будет грузится Ваша web-страница, какого качества будет этот рисунок (фото) и т.д.

Поэтому вопрос выбора формата изображения - достаточно серьёзен, от него зависит в первую очередь внешний вид Вашего сайта и как следствие складывается мнение посетителя об авторе и владельце ресурса. Итак....

Наиболее широкое распространение для веб-графики получили два формата — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт web-изображений. Есть еще формат PNG, который также используется про создании сайтов и существует в двух ипостасях — PNG-8 и PNG-24. Однако популярность PNG сильно уступает признанию форматам GIF и JPEG.

Добавление изображения происходит в два этапа: вначале готовится графический файл желаемого размера, затем он добавляется на страницу через тег <IMG>. Сам HTML предназначен только для того, чтобы отобразить требуемую картинку, при этом никак ее не меняя. О подготовке картинок для web-страниц мы с Вами разговаривали в статье: "Подготовка изображение для вашего сайта." Поэтому здесь будем рассматривать только форматы изображений.

Формат GIF

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

Особенности:

• Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры.
• Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.
• Поддерживает покадровую смену изображений, что делает формат популярным для создания баннеров и простой анимации.
• Использует свободный от потерь метод сжатия

Область применения: Логотипы, иллюстрации с четкими краями, анимированные рисунки, изображения с прозрачными участками, баннеры.

Формат JPEG

JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко применямый при создании сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются определенным цветом.

Особенности:

• Количество цветов в изображении — около 16 миллионов, что вполне достаточно для сохранения фотографического качества изображения.
• Основная характеристика формата — качество, позволяющее управлять конечным размером файла.
• Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

Область применения: Используется преимущественно для фотографий. Не очень подходит для рисунков содержащих прозрачные участки, мелкие детали или текст.

Формат PNG-8

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

Особенности:

• Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле — от 2 до 256.
• В отличие от GIF, не отображает анимацию ни в каком виде.

Область применения: Текст, логотипы, иллюстрации с четкими краями, изображения с градиентной прозрачностью.

Формат PNG-24

PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях

Особенности:

• Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений.
• Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной, так называемый градиент.
• Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пикселы в изображении неизменными, если сравнивать с другими форматами, то у PNG-24 конечный объем графического файла получается наибольшим.

Область применения: Фотографии, рисунки, содержащие прозрачные участки, рисунки с большим количеством цветов и четкими краями изображений

Придерживаясь рекомендаций этой статьи, Вы сможете без труда добиться наилучшего качества отображения графических файлов на Ваших web-страницах.

Автор: Андрей Краснокутский