Современные форматы изображений, используемые в веб‑разработке

Выбор правильного формата изображения — важный аспект оптимизации производительности веб‑страниц. От него зависят скорость загрузки и качество контента, а значит и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.

JPEG

JPEG (Joint Photographic Experts Group) — стандартный формат для фотографий, использует сжатие с потерями, что уменьшает размер файла, но может снижать качество.

• Не поддерживает прозрачность.
• Идеален для изображений с большим количеством цветов (фотографии, градиенты).
• Артефакты сжатия при низком качестве, большой размер при высоком качестве.
• Поддерживается всеми браузерами, в т.ч. и устаревшими.

PNG

PNG (Portable Network Graphics) — формат со сжатием без потерь, подходит для изображений с прозрачностью.

• Поддержка альфа‑канала (прозрачность).
• Лучший выбор для логотипов, иконок и графики с четкими границами.
• Больший размер файла по сравнению с JPEG на изображениях с большим количеством цветов.
• Поддерживается всеми браузерами, в т.ч. и устаревшими.

GIF

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

• Поддерживает анимацию и прозрачность, но прозрачность без полутонов — каждый пиксель может быть или полностью прозрачным, или полностью окрашенным.
• Низкое качество для сложных изображений (лимит в 256 цветов).
• Устаревший формат, заменяется APNG и WebP.
• Поддерживается всеми браузерами, в т.ч. и устаревшими.

WebP

Современный формат от Google, сочетает высокое сжатие и качество.

• Поддерживает сжатие как с потерями, так и без, прозрачность и анимацию.
• На 25–35% меньше размера, чем JPEG/PNG, при том же качестве.
• Поддерживается большинством современных браузеров.

AVIF

AVIF (AV1 Image File Format) — формат на основе AV1, обеспечивает сверхвысокую степень сжатия.

• Лучшее качество при меньшем размере, чем WebP и JPEG.
• Поддерживает HDR, глубину цвета 12 бит, прозрачность и анимацию.
• Поддерживается большинством современных браузеров.

APNG

APNG (Animated Portable Network Graphics) — расширение PNG для анимации с поддержкой 24-битных цветов и прозрачности.

• Альтернатива GIF с лучшим качеством.
• Поддерживается большинством современных браузеров.

SVG

SVG (Scalable Vector Graphics) — векторный формат на основе XML.

• Масштабируется без потери качества.
• Идеален для иконок, логотипов, графиков.
• Поддерживает анимацию и интерактивность через CSS/JavaScript.
• Поддерживается большинством современных браузеров.

JPEG XL

JPEG XL — формат очень похожий на AVIF и технически его превосходящий, но имеющий на сегодняшний день практически «никакую» поддержку браузерами.

• Поддерживает сжатие как с потерями, так и без потерь.
• Поддерживает анимацию и прозрачность.
• Поддерживается сейчас только в браузере Safari.

Рекомендации по использованию

В зависимости от типа изображений:

• Для фотографий и сложных многоцветных изображений отлично подходят WebP или AVIF (с fallback`ом в JPEG для старых браузеров).
• Для «рисованной» графики с небольшим количеством цветов (схемы, иконки, логотипы и т.п.) или если нужна прозрачность — выбирайте PNG или WebP.
• Для анимации подходят форматы WebP (для простых анимаций) или APNG (для сложных анимаций). GIF уже устарел и подходит либо для поддержки устаревших браузеров или для анимированных схем с небольшим количеством цветов.
• Векторные элементы (или для изображений, которые можно сделать векторными) — SVG.

В целом же, оптимизация изображений и выбор подходящих форматов — это баланс между качеством, размером и совместимостью. Современные форматы, такие как WebP и AVIF, заметно улучшают производительность веб‑сайтов. При использовании современных форматов изображений важно учитывать поддержку браузерами: и либо при генерации разметки учитывать заголовок accept http‑запроса для определения поддержки браузером новых форматов изображений, либо в html‑разметке использовать тег <picture> для адаптивной загрузки изображения из списка доступных форматов в зависимости от наличия поддержки на стороне клиента.