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

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

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> для адаптивной загрузки изображения из списка доступных форматов в зависимости от наличия поддержки на стороне клиента.

Тематические статьи

JPEG и PNG — в чём разница форматов?

JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG.

Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).

Статья обновлена в 2025 году
Адаптивные изображения

Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения.

Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет-соединение. Рассмотрим самые распространённые.

Статья опубликована в 2019 году
Ускоряем работу сайта: оптимизация HTML

Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, а без этого скорость загрузки и отрисовки будет ниже.

Статья опубликована в 2014 году
Браузерное или клиентское кеширование

Кэширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.

Статья опубликована в 2014 году
Ajax-навигация Turboliks & Wiselinks

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

Статья опубликована в 2014 году
Ленивая загрузка или загрузка по требованию на клиентской части

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

Статья опубликована в 2014 году
Увеличиваем скорость работы сайта при помощи оптимизации JavaScript

Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS‑кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.

Статья опубликована в 2014 году
Сжатие изображений с потерями и без потерь

Сжатие изображений — это один из способов ускорения загрузки сайта. Сделать изображения более «легкими» можно как уменьшив их физический размер в пикселях, так и путём оптимизации параметров сохранения.

На «широких» каналах размер изображений на сайте на скорость загрузки сайта влияет не очень сильно, но для пользователей, просматривающих сайт через мобильный интернет (EDGE или 3G), большие изображения могут быть проблемой. На посещаемых сайтах также могут быть сложности с загрузкой канала сервера — неоптимизированные изображения могут существенно сказываться на объёме трафика (это проблема, если он платный) или просто «забивать» канал.

Статья опубликована в 2019 году
Алгоритмы поисковых систем: семантическая микроразметка

Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют мета‑данные для содержания. Наиболее популярными на сегодняшний день являются форматы Schema.org, Open Graph и микроформаты.

Статья опубликована в 2014 году