Форматы веб-изображений: JPEG, PNG, WebP, AVIF, SVG. Полное руководство

Почему выбор формата изображения имеет значение

Изображения составляют 50–70% от общего веса среднестатистической веб-страницы. Неправильный выбор формата может без необходимости утяжелить сайт, ухудшить пользовательский опыт и снизить позиции в поисковых системах.

С 2021 года Google включил Core Web Vitals в алгоритм ранжирования. Среди этих метрик Largest Contentful Paint (LCP) измеряет время до отрисовки наибольшего видимого элемента на странице. чаще всего это изображение. Использование неподходящего формата может увеличить LCP с 1,5 до более 4 секунд, что является дисквалифицирующим показателем.

Но производительность. не единственный критерий. В зависимости от сценария использования вам может потребоваться:

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

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

JPEG: ветеран фотографии

Формат JPEG (Joint Photographic Experts Group) был стандартизирован в 1992 году. Несмотря на свой возраст, он остаётся одним из наиболее широко используемых форматов в вебе, особенно для фотографий.

Как работает сжатие JPEG

JPEG использует сжатие с потерями. Алгоритм анализирует изображение, определяет области схожего цвета и отбрасывает детали, незаметные для человеческого глаза. Степень потерь управляется параметром качества (обычно 0–100).

При качестве 80 фотография в формате JPEG зачастую визуально неотличима от оригинала, но весит в 5–10 раз меньше. Ниже качества 50 появляются блочные артефакты, особенно заметные на резких краях.

Идеальные сценарии использования JPEG

• Фотографии: портреты, пейзажи, фото товаров
• Изображения со сложными градиентами: закаты, облачное небо
• Изображения, где прозрачность не нужна
• Максимальная совместимость: поддерживается 100% браузеров, систем и устройств

Ограничения JPEG

• Нет прозрачности: фон всегда непрозрачный
• Нет анимации
• Поколенческие потери: каждое повторное сохранение усиливает артефакты
• Плохо подходит для текста и графики: резкие края становятся размытыми

PNG: сжатие без потерь и прозрачность

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

PNG-8 vs PNG-24 vs PNG-32

• PNG-8: палитра до 256 цветов, очень маленькие файлы, идеально для простых иконок
• PNG-24: 16 миллионов цветов, без альфа-канала
• PNG-32: 16 миллионов цветов с полной альфа-прозрачностью

Альфа-прозрачность: главное преимущество PNG

Альфа-прозрачность позволяет каждому пикселю иметь уровень непрозрачности от 0 (полностью прозрачный) до 255 (полностью непрозрачный). Это делает PNG незаменимым для:

• Логотипов на цветном или фотографическом фоне
• Иконок со скруглёнными углами или тенями
• Наложенных графических элементов
• Скриншотов с прозрачными областями

WebP: современный формат от Google

Разработанный Google и выпущенный в 2010 году, WebP был создан для замены JPEG и PNG в вебе. Он обеспечивает лучшее сжатие как в режиме с потерями, так и без них, а также поддерживает прозрачность и анимацию.

Преимущества WebP перед JPEG и PNG

• На 25–35% меньше JPEG при эквивалентном визуальном качестве
• На 26% меньше PNG в режиме без потерь
• Альфа-прозрачность с минимальными накладными расходами
• Поддержка анимации. намного эффективнее GIF
• Оба режима сжатия. с потерями и без. в одном формате

Поддержка браузерами в 2026 году

WebP теперь поддерживается более чем 97% современных браузеров, включая Chrome, Firefox, Safari (начиная с iOS 14 / macOS Big Sur), Edge и Opera. В 2026 году запасной вариант в виде JPEG больше не нужен для большинства аудиторий.

AVIF: формат следующего поколения

AVIF (AV1 Image File Format); новейший формат веб-изображений. Основанный на видеокодеке AV1, разработанном Alliance for Open Media, он обеспечивает ещё более высокую эффективность сжатия, чем WebP.

Эффективность сжатия

• На 45–55% меньше JPEG при эквивалентном визуальном качестве
• На 20–30% меньше WebP в большинстве случаев
• Встроенная поддержка HDR и широкого цветового охвата (Display P3, Rec. 2020)
• Отличная передача градиентов и мелких деталей без блочных артефактов JPEG

Поддержка браузерами в 2026 году

AVIF поддерживается Chrome (v85+), Firefox (v93+), Safari (v16.4+), Edge (v121+) и Samsung Internet, охватывая примерно 93% активных браузеров. Запасной вариант в виде WebP или JPEG по-прежнему рекомендуется для оставшихся 5–7%.

GIF: наследие анимации

Формат GIF (Graphics Interchange Format) датируется 1987 годом. Его палитра ограничена 256 цветами на кадр, а межкадровое сжатие отсутствует. это означает, что каждый кадр хранится почти независимо. 3-секундная анимация при 24 кадрах в секунду содержит 72 полных кадра.

Несмотря на техническую устарелость, GIF продолжает использоваться, поскольку является единственным универсально поддерживаемым анимированным форматом в почтовых клиентах (в частности, Outlook не воспроизводит видео HTML5). В вебе анимированные GIF следует заменять анимированным WebP или HTML-элементом <video> с MP4/WebM. обычно в 5–10 раз меньшим при том же визуальном содержимом.

SVG: векторная графика для веба

SVG (Scalable Vector Graphics) принципиально отличается от других форматов. В то время как JPEG, PNG, WebP и AVIF являются растровыми форматами (сетками пикселей), SVG описывает геометрические фигуры в XML. Результат: SVG-изображение идеально чёткое при любом размере. от 16×16-пиксельного фавикона до экрана 4K.

Преимущества SVG

• Бесконечная масштабируемость: идеальная чёткость при любом разрешении без увеличения размера файла
• Чрезвычайно малый вес для простой графики (логотипы, иконки): часто всего несколько сотен байт
• Стилизация с помощью CSS: изменение цвета иконок без изменения файла
• Анимация с помощью CSS или SMIL
• Доступность: текст внутри SVG читается поисковыми системами и программами чтения с экрана

Ограничения SVG

• Не подходит для фотографий: сложные растровые изображения создают огромные SVG-файлы
• Риск XSS при использовании SVG из ненадёжного источника (может содержать теги script). никогда не встраивайте загружённый пользователями SVG без предварительной санитизации

Полная таблица сравнения

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

Какой формат выбрать? Дерево решений

Ваше изображение векторное (логотип, иконка, диаграмма)?

→ Используйте SVG. Без вариантов.

Ваше изображение. фотография или сложное изображение со множеством цветов?

• Если цель. максимальная производительность: AVIF (с запасным WebP через <picture>)
• Если вам нужна простота и широкая совместимость: WebP
• Если требуется универсальная совместимость: JPEG

Требует ли ваше изображение прозрачности?

• Предпочтите WebP или AVIF для лучшей производительности
• Используйте PNG, если требуется максимальная совместимость
• Никогда не используйте JPEG. он не поддерживает прозрачность

Является ли ваше изображение скриншотом или содержит текст?

→ Используйте PNG или WebP без потерь. Сжатие с потерями размывает резкие края, делая текст трудночитаемым.

Получаете фотографии HEIC с iPhone?

→ Конвертируйте в JPEG или WebP перед публикацией в вебе. Ни один браузер нативно не отображает HEIC.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание изображения" width="800" height="600">
</picture>

Инструменты для конвертации между форматами

Онлайн-инструменты

• imgpact: быстрая конвертация и оптимизация изображений прямо в браузере, без установки. Поддерживает JPEG, PNG, WebP, AVIF и SVG.
• Squoosh (Google): опенсорсный онлайн-инструмент для визуального сравнения форматов и настроек сжатия бок о бок.
• Cloudinary: облачное решение для автоматизированного управления изображениями и конвертации форматов на лету в продакшн-среде.

Инструменты командной строки

• ImageMagick: опенсорсный эталон для пакетной конвертации и обработки изображений.
• cwebp / dwebp: официальные инструменты Google для кодирования и декодирования файлов WebP.
• avifenc / avifdec: кодировщик и декодировщик AVIF для командной строки.
• Sharp (Node.js): высокопроизводительная библиотека для трансформации изображений в производственных пайплайнах.

Интеграции с CMS

• WordPress: плагины Imagify, ShortPixel или WebP Express для автоматической конвертации
• Shopify: автоматическая конвертация в WebP для всех изображений магазина
• Next.js / Nuxt: встроенный компонент Image с автоматической оптимизацией и конвертацией форматов