JPG, PNG, WebP: какой формат картинки выбрать

Фото — JPEG, всё остальное — PNG, а если что-то шевелится — GIF. Так я выбирал форматы годами и честно не смог бы объяснить почему. Работало — и ладно. Потом появились WebP и AVIF, и привычка перестала спасать.

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

Четыре вопроса к любой картинке

Все форматы отличаются, по сути, ответами на четыре вопроса:

• Пиксели или чертёж? Растровая картинка — сетка цветных точек, как мозаика: увеличишь — увидишь квадратики. Векторная хранит не точки, а инструкцию «нарисуй круг, залей синим», поэтому остаётся чёткой хоть на билборде.
• С потерями или без? Сжатие без потерь — как архив: распаковал и получил всё до последнего пикселя. С потерями — как пересказ: суть та же, а мелочи, которые глаз почти не замечает, выброшены. Зато файл легче в разы.
• Нужна прозрачность? Например, логотип, который должен лечь на любой фон без белого прямоугольника вокруг.
• Нужна анимация?

Дальше каждый формат — просто свой набор ответов.

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

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

Слабые места тоже есть. Прозрачности нет совсем. Чёткие края JPEG не любит: вокруг текста, линий и плоских логотипов появляется «грязь» — мутные ореолы и квадратики. А ещё он портится от пересохранения: открыл, поправил, сохранил — потерял ещё чуть-чуть. Сделай так десять раз, и разница станет заметна. Поэтому исходники лучше хранить без потерь, а JPEG делать уже из них.

JPG и JPEG — одно и то же

Это один формат, внутри файлов одинаковые данные — отличается только подпись в имени. Виноваты старые DOS и Windows: там расширение не могло быть длиннее трёх букв, и .jpeg пришлось урезать до .jpg. Ограничение давно исчезло, а привычка осталась, поэтому .jpg и сегодня встречается чаще.

Переименовывать одно в другое можно спокойно, ничего не сломается. А для разработчиков: официальный тип у формата один — image/jpeg. Типа image/jpg в стандарте нет, хотя в чужом коде он нет-нет да попадается.

PNG — без потерь и с прозрачностью

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

PNG сохраняет каждый пиксель в точности и умеет плавную прозрачность — не только «фон есть / фона нет», но и полупрозрачные края, тени, стекло. Поэтому он идеален для скриншотов, логотипов, схем и графиков: текст остаётся чётким, края — чистыми.

А вот фото в PNG — плохая идея. Фотография состоит из миллионов чуть-чуть разных пикселей, и сжатие без потерь с ней справляется слабо. Тот же снимок в PNG весит в несколько раз больше, чем в JPEG, без видимой разницы. Именно так на сайтах появляются «картинки по 5 мегабайт».

GIF — ветеран, которого держат ради анимации

GIF почти сорок лет, и до сих пор не утихает спор, как его произносить — «гиф» или «джиф». Автор формата, к слову, настаивал на «джиф», но интернет его особо не послушал.

Главное ограничение GIF — не больше 256 цветов в кадре. Для фото это катастрофа: плавные переходы превращаются в полосы и рябь. Прозрачность грубая: пиксель либо виден полностью, либо нет, поэтому на цветном фоне вокруг картинки часто торчит «бахрома».

Жив он только благодаря анимации. Но анимированные GIF огромные, и короткое видео с тем же содержимым обычно весит в разы меньше и выглядит лучше. Многие «гифки» на крупных сайтах на самом деле давно уже видео без звука, которое крутится по кругу.

WebP — универсальный

WebP Google представил в 2010 году с простой целью — заменить сразу JPEG, PNG и GIF. И формат действительно умеет всё: сжатие с потерями и без, прозрачность (в том числе вместе с потерями, чего JPEG не умеет вовсе) и анимацию без ограничения в 256 цветов.

При сопоставимом качестве WebP обычно заметно легче и JPEG, и PNG. Все современные браузеры его понимают, так что для сайта это безопасный выбор. Подводят скорее программы: скачал картинку с сайта, а редактор или мессенджер её не открывает — частая история именно с WebP.

AVIF — самый лёгкий

AVIF — самый молодой в списке, и у него «видео» происхождение: он построен на видеокодеке AV1. Отсюда и результат — на фотографиях AVIF часто выходит легче даже WebP при том же качестве. Прозрачность и анимацию тоже умеет.

Почему тогда все не перешли на него? Кодируется он медленно: для одной картинки неважно, для тысяч товаров в каталоге уже ощутимо. И поддержка моложе — старые устройства и программы его понимают не всегда. Поэтому AVIF обычно отдают с подстраховкой: браузер понял — получил самую лёгкую картинку, не понял — получил WebP или JPEG. Посетитель ничего не замечает.

SVG — не картинка, а чертёж

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

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

Шпаргалка

• Фотография → AVIF или WebP, JPEG в запасе.
• Скриншот, схема, интерфейс → PNG или WebP без потерь.
• Логотип, иконка → SVG, а если вектора нет — PNG или WebP с прозрачностью.
• Анимация → короткое видео или анимированный WebP, но не GIF.
• Отправить в мессенджер или редактор → JPEG или PNG, их понимает всё.
• Не знаю, что выбрать → WebP. Ошибиться с ним сложно.

Мифы, в которые я сам верил

«PNG всегда качественнее JPEG». Для фото — нет: на экране разницы не видно, а весит PNG в разы больше. PNG выигрывает там, где есть текст и чёткие края.

«JPEG на 100% качества — это без потерь». Нет. Даже на максимуме что-то теряется, просто очень мало. Режима без потерь у обычного JPEG нет.

«Переименую .png в .webp — и картинка станет легче». Нет, расширение — просто подпись на файле, внутри останется тот же PNG. Формат меняет только конвертация. Исключение — те самые .jpg и .jpeg: там внутри и правда одно и то же.

Если запомнить из статьи что-то одно, пусть будет так: фото сжимаем с потерями, графику и текст — без потерь, иконки — вектором. Остальное подскажет шпаргалка.