Форматы изображений: когда использовать JPEG, PNG, WebP и AVIF

Вы сделали отличное фото. Цвета яркие, композиция на месте. Пора загрузить его на сайт. Но в каком формате? JPEG? PNG? А может, WebP или AVIF? Неправильный выбор обойдется вам потерей скорости, качества изображения или и того, и другого. Ваши посетители замечают это сразу. Страница, которая грузится на три секунды дольше, теряет почти половину пользователей. И часто проблема не в сервере и не в коде. Проблема в формате картинки.

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

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

Сегодня в вебе по-настоящему важны четыре формата. У каждого свой характер и свои сильные стороны.

JPEG появился в 1992 году. Этот формат сильно сжимает фотографии и делает файлы маленькими. Но при каждом сохранении теряются детали. Это называется «сжатие с потерями». JPEG не поддерживает прозрачность. Анимации тоже не умеет.

PNG вышел в 1996 году как замена формату GIF. PNG сжимает без потери качества. Это «сжатие без потерь». Он поддерживает прозрачность через альфа-канал. Но файлы обычно заметно больше, чем у JPEG. Часто в 3-5 раз.

WebP создал Google в 2010 году. Он умеет и то, и другое: сжимать с потерями и без. WebP поддерживает прозрачность и даже анимации. Файлы обычно на 25-35 процентов меньше, чем аналогичные JPEG или PNG.

AVIF появился позже всех. Он основан на видеокодеке AV1 и был выпущен в 2019 году. AVIF дает лучшее сжатие из всех четырех форматов. При одинаковом качестве файлы AVIF часто на 50 процентов меньше, чем JPEG. Он поддерживает прозрачность, анимации, HDR и расширенную цветовую гамму.

Когда вы сравниваете форматы, все сводится к трем вопросам: какой размер файла? Как выглядит картинка? Какие функции мне нужны?

Когда стоит использовать JPEG?

JPEG это классика. И классика не просто так до сих пор в деле.

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

Качество можно настраивать. При 80-85 процентах большинство фото выглядят отлично. Файл при этом в разы меньше оригинала. Опускаться ниже 60 процентов не стоит. Начинают появляться артефакты, те самые «квадратики» на краях и ровных участках.

JPEG плохо справляется с текстом, логотипами и графикой с четкими краями. Там появляются некрасивые артефакты сжатия. И если вам нужна прозрачность, JPEG тоже не поможет.

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

У iPhone по умолчанию фото сохраняются в HEIC. Поэтому для обмена часто приходится конвертировать HEIC в JPG. Так ваши фото смогут открыть все.

Несмотря на возраст, JPEG остается актуальным. Его поддерживает каждый браузер. Каждая программа может его открыть. Каждая CMS с ним работает. Эта универсальная совместимость, пожалуй, главный аргумент. А если вы хотите понять, проигрывает ли JPEG новым форматам, наше сравнение WebP vs JPG показывает все различия.

Когда PNG будет правильным выбором?

PNG создан для ситуаций, когда важны качество и точность.

Логотипы, иконки, скриншоты, инфографика, диаграммы. Везде, где нужны четкие края и точные цвета, PNG справляется лучше всех. Формат сжимает без потери качества. Вы можете открывать и сохранять PNG-файл сто раз. Он будет выглядеть одинаково.

Главное преимущество PNG это альфа-канал. С его помощью можно сделать части изображения прозрачными. Причем не только полностью прозрачными или полностью непрозрачными. Можно и полупрозрачными. Это идеально для логотипов на разных фонах или для эффектов наложения.

PNG бывает двух видов. PNG-8 использует палитру из максимум 256 цветов. Этого хватает для простой графики, и файл остается маленьким. PNG-24 поддерживает более 16 миллионов цветов и подходит для сложных изображений.

Минус? Размер файла. Фото, сохраненное как PNG, часто в три-пять раз больше, чем то же изображение в JPEG. Для интернет-магазина с сотнями товарных фотографий это огромная разница во времени загрузки.

Используйте PNG прицельно. Для графики с прозрачностью и четкими краями он идеален. Для фотографий есть варианты получше. А если вы выбираете между PNG и современными форматами, наше сравнение WebP vs PNG покажет, когда какой формат подходит лучше.

Зачем переходить на WebP?

WebP это практичный компромисс. Он объединяет достоинства JPEG и PNG в одном формате.

Google разработал WebP с четкой целью: сделать веб быстрее. И это работает. WebP-файлы со сжатием с потерями в среднем на 30 процентов меньше, чем JPEG при сопоставимом качестве. WebP без потерь примерно на 26 процентов меньше PNG.

А еще WebP поддерживает прозрачность. Причем даже при сжатии с потерями. Раньше ни один формат так не умел. Вы получаете картинку с прозрачным фоном, которая при этом остается легкой. Отлично для товарных фото в интернет-магазине.

WebP умеет и анимации. Им можно заменить анимированные GIF-файлы и при этом сильно сэкономить на размере. GIF весом 2 МБ в WebP часто занимает всего 300-400 КБ.

Поддержка в браузерах уже отличная. Chrome, Firefox, Safari, Edge и Opera поддерживают WebP. По актуальным данным, более 97 процентов браузеров в мире могут показывать WebP. Аргумент «мой браузер не умеет» больше не работает.

Если вы хотите ускорить свой сайт, переход с JPEG и PNG на WebP, самый простой путь. Не нужно менять все сразу. Начните с самых больших изображений. Там эффект заметнее всего. Готовы попробовать? Вы можете конвертировать PNG в WebP за несколько секунд.

Небольшой нюанс: некоторые старые программы для обработки изображений не открывают WebP. Photoshop поддерживает его только с версии 23.2. GIMP умеет уже давно. Если работаете в команде, проверьте, что все инструменты справляются с WebP.

Стоит ли использовать AVIF прямо сейчас?

AVIF технически лучший формат изображений. Вопрос только в том: готов ли мир к нему?

По части сжатия AVIF обходит все остальные форматы с большим отрывом. При одинаковом визуальном качестве файл AVIF примерно на 50 процентов меньше JPEG и на 20 процентов меньше WebP. Это не мелкие различия. Это серьезный скачок. Наше подробное сравнение AVIF vs WebP показывает, где каждый формат выигрывает.

AVIF поддерживает HDR-контент и расширенный цветовой охват (Wide Color Gamut). Для фотографов и дизайнеров, которым важна точная цветопередача, это весомый аргумент. Прозрачность и анимации тоже поддерживаются.

Браузерная поддержка растет. Chrome, Firefox, Safari и Edge уже работают с AVIF. Сейчас около 93-95 процентов браузеров могут отображать AVIF. Это хорошо, но не идеально. Вам все еще нужен запасной вариант для старых браузеров.

Но есть и минусы. Кодирование AVIF-файлов занимает заметно больше времени, чем у JPEG или WebP. Если вы конвертируете тысячи картинок разом, это чувствуется. Декодирование в браузере тоже чуть медленнее. На очень больших изображениях может быть короткое мерцание.

Наш совет: да, AVIF стоит использовать уже сейчас. Но используйте его с умом. Ставьте AVIF как основной формат, а WebP или JPEG как запасной. Так вы получите лучшее сжатие и не потеряете посетителей со старыми браузерами.

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

Выбор формата зависит от вашего контента. Вот простая схема для принятия решений.

У вас фото или изображение с множеством цветов и градиентов? Берите AVIF как первый выбор, WebP как запасной, JPEG как последний вариант. Эта комбинация дает лучший баланс качества и размера файла.

Нужна прозрачность? Тогда подходят только PNG, WebP или AVIF. JPEG отпадает. Если файл должен быть максимально маленьким, берите WebP или AVIF с прозрачностью. PNG только если нужно качество без потерь.

У вас логотип, иконка или графика с малым количеством цветов? SVG был бы лучшим выбором. Если нужен пиксельный формат, берите PNG-8 для простой графики или WebP без потерь.

Это анимация? Забудьте GIF. Берите WebP или AVIF. Файлы в разы меньше. Качество лучше.

Это для интернет-магазина? Товарные фотографии получают огромную выгоду от современных форматов. Представьте магазин с 500 товарными изображениями. Переход с JPEG на WebP сэкономит около 30 процентов трафика. На AVIF, все 50 процентов. Сайт грузится быстрее, клиенты остаются дольше, позиции в Google растут.

Для соцсетей? Проверьте, что принимает платформа. Большинство работают с JPEG и PNG. Некоторые уже принимают WebP. Мало кто поддерживает AVIF. Если сомневаетесь, JPEG для фото, PNG для графики.

Для печати? JPEG или TIFF в полном разрешении. Типографии редко работают с WebP или AVIF.

Вот краткая шпаргалка:

Задача	Лучший формат	Почему
Фото для веба	AVIF > WebP > JPEG	Самые маленькие файлы, лучшее качество
Логотипы, иконки	PNG или SVG	Четкие края, прозрачность
Скриншоты	PNG	Без потерь, текст остается четким
Фото для email	JPEG	Работает везде
Анимации	WebP > GIF	Меньший размер, лучшее качество
Печать	JPEG или TIFF	Стандарт индустрии

Все еще не уверены? Наше детальное сравнение JPG vs PNG vs WebP разбирает все компромиссы между этими тремя форматами.

Что происходит при конвертации между форматами?

Если вы собираетесь конвертировать формат изображения, полезно знать, что при этом происходит «под капотом».

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

Из PNG в WebP или AVIF без потерь. Здесь вы не теряете ничего. Получаете файл меньшего размера, который выглядит идентично. Это идеальный случай.

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

Из WebP или AVIF обратно в JPEG или PNG. Технически это работает без проблем. Но файл станет больше, а не меньше. И потерянные детали не вернутся. Конвертация в более старый формат не улучшает качество.

Важный совет: всегда сохраняйте оригиналы. Всегда конвертируйте из оригинала в нужный формат. Не из одного сжатого формата в другой. Так вы сохраните максимальное качество.

Как отдавать разные форматы разным браузерам?

Теория понятна: AVIF для современных браузеров, WebP как запасной, JPEG как последний вариант. Но как это реализовать технически?

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

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

Браузер проверяет источники сверху вниз. Если умеет AVIF, берет его. Если только WebP, берет WebP. Если не умеет ни то, ни другое, берет JPEG из тега img. Все просто.

Согласование контента на сервере тоже вариант. Браузер при каждом запросе отправляет заголовок Accept. В нем указано, какие форматы он понимает. Ваш сервер может автоматически отдавать лучший формат. Apache и Nginx легко настраиваются для этого. CDN вроде Cloudflare или Fastly делают это автоматически.

Фреймворки и инструменты сборки помогают с автоматизацией. Next.js, например, имеет встроенную оптимизацию изображений. Вы загружаете JPEG, а фреймворк автоматически отдает WebP или AVIF. Похожие функции есть в Nuxt, Gatsby и других современных фреймворках.

Затраченные усилия окупаются. Каждый сэкономленный килобайт делает ваш сайт быстрее. А быстрые сайты лучше ранжируются в Google.

Какие ошибки с форматами тормозят ваш сайт?

Многие сайты теряют производительность из-за простых ошибок в работе с изображениями. Вот самые частые.

Ошибка 1: PNG для фотографий. Это ошибка номер один в вебе. Фото в PNG может весить 2 МБ. То же фото в WebP при качестве 80 процентов занимает 200 КБ. В десять раз меньше при отсутствии видимой разницы. Замените фото-PNG на WebP или AVIF и смотрите, как показатели скорости растут.

Ошибка 2: JPEG для логотипов и текста. JPEG создает некрасивые артефакты на четких краях. Логотип выглядит размытым. Текст на изображениях становится трудно читать. Используйте PNG или SVG для всего, что имеет четкие линии.

Ошибка 3: Не использовать современные форматы. Если ваш сайт отдает только JPEG и PNG, вы теряете 30-50 процентов потенциала экономии. Переход на WebP может сократить общий вес изображений на 25-35 процентов. AVIF экономит еще больше. Это бесплатный прирост производительности. Наш гайд по выбору лучшего формата для сайтов разбирает все варианты оптимизации.

Ошибка 4: Загружать огромные оригиналы. Фото шириной 4000 пикселей, показанное в размере 800 пикселей, тратит 80 процентов своих пикселей впустую. Измените размер изображений до нужного перед конвертацией. WebP шириной 1600 пикселей при качестве 80 процентов загружается за долю секунды.

Ошибка 5: Не настраивать качество сжатия. Стандартные настройки экспорта часто завышены. JPEG с качеством 100 процентов почти не отличается от 80 процентов на глаз, но файл в 3-4 раза больше. Найдите точку баланса, обычно 75-85 процентов для форматов с потерями. После выбора правильного формата вы также можете сжать изображения дополнительно с помощью CompressIMG.

Ошибка 6: Не учитывать ретина-дисплеи. Современные экраны показывают удвоенную плотность пикселей. Изображение, отображаемое на 600 пикселях, требует источник на 1200 пикселей для четкости. Делайте изображения в 2x от размера показа, затем сжимайте. Получите четкую картинку без гигантских файлов. Если исходное изображение слишком маленькое, вы можете увеличить его с помощью ИИ через UpscaleIMG.

Ошибка 7: Не удалять метаданные. Фото со смартфонов часто содержат объемные EXIF-данные: GPS-координаты, настройки камеры, временные метки. Это легко 50-100 КБ на каждое изображение. Для показа в вебе эти данные не нужны. Удаляйте их при экспорте.

Проверьте свой сайт через Google PageSpeed Insights или Lighthouse. Там сразу видно, какие изображения можно оптимизировать.

Готовы конвертировать свои изображения?

Теперь вы знаете разницу между JPEG, PNG, WebP и AVIF. Вы знаете, когда какой формат подходит и каких ошибок стоит избегать.

Следующий шаг? Примените знания на практике. Посмотрите на изображения на своем сайте. Проверьте форматы и размеры файлов. А потом оптимизируйте.

С помощью ConvertIMG вы можете быстро конвертировать изображения между всеми популярными форматами. Загрузите файлы, выберите нужный формат, настройте качество и скачайте результат. Прямо в браузере, без установки, без регистрации. Попробуйте и сделайте свой сайт быстрее.