Форматы изображений: JPG, PNG, WebP, AVIF, GIF, BMP и ICO
Какой формат использовать для фото, логотипов, скриншотов, сайтов, печати и соцсетей и почему.
Любой формат изображения это набор компромиссов между размером файла, качеством, прозрачностью, анимацией и совместимостью. Выберете не тот, и получите либо раздутый файл, либо размытый логотип. Это руководство объясняет, в чём силён каждый формат, с цифрами, которые нужны для решения.
Два вида сжатия
Сжатие без потерь хранит каждый пиксель точно и просто находит более экономный способ записать те же данные, как это делает ZIP. Откройте и сохраните изображение без потерь тысячу раз, и оно не изменится. Так работают PNG, BMP, GIF и WebP без потерь.
Сжатие с потерями выбрасывает информацию, прежде всего ту, к которой человеческий глаз наименее чувствителен: мелкую текстуру, тонкие различия цвета, высокочастотный шум. Результат может быть в десять раз меньше файла без потерь без видимой разницы, но каждое повторное сохранение теряет ещё немного. Так работают JPG, WebP с потерями и AVIF.
Отсюда первое правило: используйте форматы с потерями для фотографий, в которых полно шума и текстуры, которых никто не хватится, и форматы без потерь для графики с резкими краями, плоскими цветами и текстом, где важен каждый пиксель.
Формат за форматом
JPG (JPEG)
Формат фотографий с 1992 года. С потерями, 8-битный цвет, без прозрачности, без анимации. Поддерживается всем, что когда-либо выпускалось. Качество от 0 до 100 управляет компромиссом; 80-85 это повседневная золотая середина. Слабые места: заметная «блочность» при низком качестве, ореолы вокруг резких краёв и отсутствие прозрачности. Используйте его для фото, которые уйдут за пределы браузера: в почту, печать, маркетплейсы, старые программы.
PNG
Без потерь, цвет до 16 бит, полная альфа-прозрачность, без анимации (APNG существует, но редок). Правильный выбор для логотипов, иконок, скриншотов, схем, диаграмм и любых изображений с прозрачным фоном. Слабое место это размер: фотография в PNG может быть в десять раз тяжелее JPG. Никогда не используйте PNG для фотографий на сайте.
WebP
Веб-формат Google, который сейчас поддерживают все современные браузеры. Есть режимы с потерями и без, оба с прозрачностью, плюс анимация. WebP с потерями примерно на 25-35 % легче JPG при равном качестве; WebP без потерь примерно на 25 % легче PNG. Это лучший универсальный формат для всего, что показывается в браузере. Слабое место это совместимость вне браузера: старые настольные программы, некоторые почтовые клиенты и многие формы загрузки его всё ещё отклоняют.
AVIF
Ещё новее, основан на видеокодеке AV1. Обычно на 50 % легче JPG и на 20 % легче WebP при равном качестве, с прозрачностью, анимацией и широким цветовым охватом. Поддерживается всеми современными браузерами с 2024 года. Кодирование медленное, особенно в браузере, а поддержка вне браузеров пока неровная. Используйте его, когда размер файла критичен и вы контролируете среду показа, и отдавайте рядом запасной WebP или JPG.
GIF
Из 1987 года. Ограничен 256 цветами на кадр, однотонной прозрачностью и анимацией, которая и есть единственная причина, почему он всё ещё повсюду. Ужасен для фотографий, годится для простой графики, непревзойдён по совместимости. Для статичных изображений PNG делает всё то же, что GIF, но лучше; для анимации MP4 или анимированный WebP гораздо легче.
BMP
Несжатый растровый формат Windows. Огромные файлы, в обычном использовании без прозрачности, без сжатия. Выживает только потому, что его тривиально читать, а это важно встраиваемым устройствам и старым программам. Никогда не используйте его для веба или хранения.
ICO
Формат иконок Windows и favicon в браузерах. Содержит несколько размеров одного изображения в одном файле, чтобы для вкладки, закладки или ярлыка выбирался нужный. Делается из PNG инструментом PNG в ICO.
Сравнительная таблица
| Формат | Сжатие | Прозрачность | Анимация | Размер фото относительно JPG | Совместимость |
|---|---|---|---|---|---|
| JPG | С потерями | Нет | Нет | 1× | Универсальная |
| PNG | Без потерь | Да, полная | Нет | 5-10× | Универсальная |
| WebP | Оба варианта | Да, полная | Да | 0,65-0,75× | Все браузеры, большинство современных программ |
| AVIF | Оба варианта | Да, полная | Да | 0,5× | Все современные браузеры, немногие программы |
| GIF | Без потерь, 256 цветов | Да, вкл/выкл | Да | 2-4× (и хуже качество) | Универсальная |
| BMP | Нет | Нет | Нет | 20-30× | Универсальная, но почти не используется |
Какой формат для какой задачи
- Фото на сайте: WebP с качеством 75-85 и запасной JPG, если нужно поддержать совсем старые браузеры. AVIF, если нужны максимально лёгкие страницы.
- Логотипы и иконки на сайте: SVG, если он есть; иначе PNG или WebP без потерь.
- Скриншоты: PNG. Сжатие с потерями размывает текст.
- Вложения в письма: JPG для фото, PNG для графики. Не отправляйте WebP: слишком многие почтовые клиенты обрабатывают его плохо.
- Печать: JPG с качеством 95 или PNG/TIFF, 300 пикселей на дюйм печатного размера.
- Соцсети: JPG или PNG; каждая платформа всё равно пересжимает при загрузке, поэтому загружайте в высоком качестве и в нужных размерах.
- Вырезанные товары на прозрачном фоне: PNG для максимальной совместимости, WebP для веба.
- Favicon: ICO плюс PNG для главных экранов телефонов.
Конвертация между форматами
Все конвертации на этом сайте работают в браузере. Самые частые маршруты: PNG в WebP и JPG в WebP для веба, WebP в JPG и WebP в PNG ради совместимости и PNG в JPG, чтобы уменьшить фото, экспортированные не в том формате. Компрессор изображений умеет любое из этого с пакетной обработкой.