Объяснение форматов изображений: JPEG, PNG, WebP, GIF, SVG, AVIF

Последнее обновление: June 27, 2026

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

Краткий ответ: какой формат использовать?

Сопоставьте формат с содержимым изображения и местом его использования:

Подробный обзор сравнения форматов можно найти в сравнении AVIF vs WebP vs JPEG.

Как сравниваются форматы?

Различия в размере файлов значительны и стабильны. Измерено на одной фотографии размером 1400×933:

Размер PNG в 853 KB выделяется: хранение фотографии без потерь обходится примерно в 8× дороже, чем JPEG, и в 19× дороже, чем AVIF. Вот почему PNG не подходит для полностраничных фотографий, даже несмотря на то, что он технически способен их хранить.

JPEG — рабочая лошадка для фотографий

JPEG (1992) — это формат с потерями для фотографий. Он отбрасывает высокочастотные детали, которые глаз едва замечает, поэтому он резко уменьшает фотографии, но размывает острый текст и тонкие линии.

• Лучше всего подходит для: фотографий, градиентов, сложных реальных сцен.
• Избегать для: текста, скриншотов пользовательского интерфейса, четкого линейного арта, всего, что требует прозрачности (у JPEG нет альфа-канала).
• Обращать внимание на: видимые блокирующие артефакты 8×8 при качестве ниже ~70.

Используйте качество 80–85 для веб-фотографий. См. как сжать JPEG.

PNG — резкие края и прозрачность

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

• Лучше всего подходит для: графики с резкими краями, текста, логотипов, скриншотов интерфейса (UI), прозрачных изображений.
• Избегайте для: полностраничных фотографий (вместо этого используйте WebP/AVIF/JPEG — см. таблицу выше).
• Обратите внимание на: огромные файлы для фотографий. Для плоской графики используйте PNG-8 (≤256 colors).

Подробнее о прозрачности см. в статье как сделать прозрачные изображения.

WebP — современный стандарт для веба

WebP (2010) поддерживает как с потерями, так и без потерь, поддерживает альфа-канал и превосходит JPEG примерно на 25–35% при одинаковом качестве. Поддержка в современных браузерах составляет ~98%.

• Лучше всего подходит для: веб-фотографий и прозрачных веб-изображений, где важен каждый байт.
• Избегать для: электронной почты и очень старых клиентов (используйте запасной вариант JPEG/PNG).
• Использовать с: запасным вариантом JPEG/PNG в элементе <picture>.

AVIF — самые маленькие фотографии

AVIF (2019) использует инструменты внутрикадрового кодека AV1 и превосходит WebP ещё на 20–30%. Поддержка составляет ~96% и растёт.

• Лучше всего подходит для: фотографий, где важны самые малые байты (геройные изображения, LCP).
• Избегать для: когда вы не можете позволить себе медленное кодирование или для самых старых браузеров (используйте запасной вариант <picture>).
• Остерегайтесь: смазывания мелкой текстуры при очень низком качестве (<q40).

SVG — масштабируемые векторы

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

• Лучше всего подходит для: логотипов, иконок, простых иллюстраций, всего, что должно масштабироваться.
• Избегайте для: фотографий (SVG не может эффективно их представить).
• Остерегайтесь: сложности — детализированный SVG может быть большим; при необходимости растрируйте.

GIF — устаревший формат анимации

GIF анимирует и поддерживает прозрачность в 1 бит, но он ограничен 256 цветами и намного больше современных анимационных форматов для того же контента.

• Лучше всего подходит для: ничего современного — замените на анимированный WebP или AVIF.
• Избегайте для: всего, что критично по цвету (ограничение 256 цветов) или чувствительно к размеру.
• Обратите внимание на: большие файлы; GIF продолжительностью 3 секунды часто больше, чем MP4 того же клипа.

Как выбрать в условиях цейтнота?

Используйте этот краткий алгоритм принятия решений:

1. Это фотография? → WebP/AVIF (с запасным вариантом JPEG).
2. Нужна ли прозрачность? → PNG или WebP (альфа-канал).
3. Это масштабируемый логотип/иконка/иллюстрация? → SVG.
4. Это резкий текст/пользовательский интерфейс (UI)? → PNG.
5. Это анимация? → Анимированный WebP/AVIF, а не GIF.
6. Для электронной почты? → JPEG или PNG (без WebP/AVIF).

Для почти любой веб-фотографии ответ теперь: "WebP или AVIF с запасным вариантом JPEG". JPEG сохраняется только из-за универсальной совместимости, а не потому, что это лучший выбор.

Как обслуживать несколько форматов?

Используйте элемент <picture>, чтобы каждый браузер получал наилучший поддерживаемый им формат:

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>

Браузер выбирает первый поддерживаемый им тип и игнорирует остальные. Всегда оставляйте реальный <img> с JPEG src в качестве финального запасного варианта (fallback). См. руководство по форматам изображений на MDN, чтобы увидеть текущую таблицу поддержки для каждого браузера.

Распространенные ошибки

• Использование PNG для фотографий. Это работает, но файл на 8–19× больше необходимого.
• Использование JPEG для текста или логотипов. Сжатие размывает острые углы. Используйте PNG или SVG.
• Предоставление одного формата без запасного варианта (fallback). AVIF/WebP требуют резервного варианта в формате JPEG для старых клиентов.
• Анимация с помощью GIF. Анимированные WebP/AVIF намного меньше и поддерживают больше цветов.
• Игнорирование SVG для логотипов. Растеризованный логотип размыт при высоком DPI; SVG остается четким в любом размере.

Часто задаваемые вопросы

Какой формат изображения мне использовать?

Используйте JPEG для фотографий, PNG для графики с резкими краями или прозрачностью, WebP как современный веб-стандарт по умолчанию (меньше обоих), AVIF для самых маленьких фотографий в современных браузерах и SVG для логотипов и иконок. Подбирайте формат к контенту.

Лучше ли WebP, чем JPEG?

Для доставки в вебе — да, WebP на 25–35% меньше при равном качестве и поддерживается во всех текущих браузерах. Сохраняйте JPEG как запасной вариант только для очень старых браузеров. См. руководство по конвертации WebP.

Когда следует использовать AVIF?

Когда вы можете его закодировать, и ваша аудитория в основном использует современные браузеры — AVIF примерно на 50% меньше, чем JPEG. Компромисс заключается в более медленном кодировании и пробелах в старых браузерах. Используйте AVIF с запасным вариантом WebP через элемент <picture>.

Поддерживает ли PNG прозрачность?

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

Какой формат самый маленький для фотографий?

AVIF (самый маленький в современных браузерах), затем WebP, затем JPEG. PNG самый большой для фотографий, потому что он без потерь (lossless). Для доставки в вебе безопасным стандартом является WebP; AVIF — когда вы можете его закодировать, а ваша аудитория использует современные браузеры.

Какой самый маленький формат изображения?

AVIF для фотографий в современных браузерах (примерно на 50% меньше, чем JPEG), затем WebP. PNG самый большой для фотографий, потому что он без потерь. Для графики с прозрачностью WebP или AVIF превосходят PNG. Подбирайте формат к контенту и поддержке браузеров вашей аудитории.

В чем разница между lossy и lossless?

Lossless (PNG, lossless WebP) сохраняет каждый пиксель точно и идеально обратим — качество не теряется. Lossy (JPEG, lossy WebP, AVIF) отбрасывает детали, которые глаз замечает меньше всего, чтобы уменьшить файл, и эта потеря постоянна. Для фотографий выигрывает Lossy; для графики, текста и мастер-файлов, которые вы будете редактировать снова, выигрывает lossless. Выбирайте в зависимости от контента.

Какой самый маленький формат для графики с прозрачностью?

WebP или AVIF, оба из которых поддерживают альфа-канал и сжимаются намного меньше, чем PNG. Для логотипов и иконок в современных браузерах WebP или AVIF значительно уменьшают размер файла по сравнению с PNG, сохраняя при этом прозрачность. Предоставляйте их с запасным вариантом PNG через элемент <picture> для старых браузеров, которые не поддерживают этот формат.

Источники изображений

• Сравнение размеров форматов и столбчатая диаграмма — сгенерированы автором на основе фотографии в стиле электронной коммерции (Pexels #16675632, фото от Mikael Blomkvist) для демонстрации реальных измеренных размеров файлов в PNG, JPEG, WebP и AVIF.