JPG, PNG, WebP или AVIF?

Перед сравнением форматов, знайте разделение, которое их все управляет. Форматы без потерь хранят каждый пиксель точно и могут быть повторно открыты и пересохранены навсегда без деградации — PNG является основным. Форматы с потерями выбрасывают информацию, которую глаз вряд ли заметит, обменивая немного качества на намного меньший файл — JPG, WebP и AVIF все так делают. Нет единого «лучшего» формата, потому что правильный выбор зависит от того, является ли ваше изображение фотографией, логотипом или скриншотом, и от того, как сильно вы цените размер по сравнению с совместимостью.

JPG (или JPEG) — это ветеран. Он был построен для фотографий и использует сжатие с потерями, настроенное на плавные градиенты реальных изображений. Он не имеет прозрачности и его сжатие может оставить блочные артефакты вокруг резких краёв и текста, что объясняет, почему это неправильно для логотипов и скриншотов. Его суперсила — универсальная поддержка: каждое устройство, редактор и веб-сайт принимают JPG.

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

WebP от Google — это современный универсальный формат. Он предлагает как режимы с потерями, так и без потерь, плюс прозрачность и анимацию, и при аналогичном качестве производит файлы примерно на 25-35% меньше, чем JPG и часто намного меньше, чем PNG. Каждый текущий браузер его поддерживает, что делает его прагматичным стандартом для быстрого веб-сайта сегодня.

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

Хорошо оптимизированная веб-страница редко использует один формат для всего. Фотографии выходят как WebP или AVIF для скорости, с запасом JPG. Логотипы, значки и всё с прозрачностью остаются как PNG — или лучше, как SVG, если они векторная графика — потому что формат с потерями размыл бы их чёткие края. Скриншоты текста выглядят лучше всего как PNG по той же причине.

Если вы не уверены, стоит ли переключение, преобразуйте одно репрезентативное изображение и сравните оба размер файла и то, как оно выглядит при полном масштабировании. Снижение размера с JPG на WebP или AVIF часто резко, без видимой потери качества, что является именно выигрышем, который делает страницы загружаются быстрее. Когда совместимость имеет большее значение, чем байты — вложение электронной почты, старая система, типография — вернитесь к JPG или PNG, двум форматам, которые работают везде.