Форматы графических файлов

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

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 конечный объём файла с фотографией получается наибольшим.

Область применения

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

SVG

SVG (Scalable Vector Graphics, масштабируемая векторная графика) — это векторный формат, в отличие от предыдущих растровых форматов. Растровое изображение состоит из набора разноцветных пикселей, которые для человеческого глаза сливаются в единую картинку. Векторное же строится из набора объектов, вроде линий, кривых, прямоугольников, окружностей и др. При увеличении масштаба векторное изображение увеличивается пропорционально, сохраняя своё высокое качество.

Особенности

  • Надписи остаются обычным текстом, их можно выделять, копировать, они читаются поисковыми системами при обходе сайта.
  • Рисунки можно масштабировать произвольно, сохраняя при этом высокое качество.
  • Формат не поддерживается браузером Internet Explorer до версии 9.0.

Область применения

Масштабируемые изображения, рисунки, логотипы, иллюстрации, графики и диаграммы.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.11.2015
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid