Каждый формат изображения — это набор компромиссов между размером файла, качеством и возможностями вроде прозрачности или анимации. Выберете не тот — получите раздутые файлы, размытый текст или графику, которая не отображается. Вот каждый распространённый формат простыми словами, а следом таблица, которую можно держать под рукой.
Два больших семейства
Перед отдельными форматами одно различие объясняет большинство из них:
- Растровые изображения — это сетки пикселей. Фотографии растровые. Приблизьте достаточно — и увидите квадратики. PNG, JPG, WebP, AVIF и GIF — все растровые.
- Векторные изображения — это математика: линии, кривые и фигуры, заданные координатами. Они масштабируются до любого размера без размытия. SVG — векторный формат в вебе.
Другая ключевая идея — с потерями против без потерь. Форматы с потерями (JPG, обычно AVIF/WebP) отбрасывают часть деталей ради уменьшения файла. Форматы без потерь (PNG, GIF, WebP без потерь) сохраняют каждый пиксель точно.
Форматы по одному
JPG (JPEG) — рабочая лошадка для фотографий. С потерями, маленький, читается буквально везде. Ни прозрачности, ни анимации. Повторное пересохранение медленно его портит. Используйте для фото и всюду, где нужна максимальная совместимость.
PNG — без потерь, поддерживает прозрачность. Правильный выбор для скриншотов, логотипов, иконок и схем — всего с текстом или чёткими краями. Фото в PNG велики, так что для них не используйте.
WebP — современный формат, делающий обе работы: режим с потерями бьёт JPG по размеру (~25–35% меньше), режим без потерь поддерживает прозрачность и остаётся компактным. Тянет и анимацию. Сейчас поддерживается всеми браузерами. Идеален для веба; меньше — для почты или старого софта.
AVIF — самый новый и лучший компрессор здесь, примерно вдвое меньше JPEG при схожем качестве, с прозрачностью и HDR. Браузеры хорошо его отображают, но не могут надёжно кодировать его из canvas — поэтому браузерные инструменты откатываются к WebP, когда вы запрашиваете AVIF. Настоящее кодирование AVIF требует сервера или нативного приложения.
GIF — старый, ограничен 256 цветами, но классика для простой анимации. Для чего угодно сложнее короткого цикла WebP (или видео) меньше и резче. Годится для крошечных анимированных иконок; плох для фото.
SVG — вектор, поэтому масштабируется бесконечно без размытия и остаётся крошечным для простой графики. Идеален для логотипов, иконок и иллюстраций. Это код, а не пиксели, так что фотографию он передать не может.
Таблица сравнения
| Формат | Тип | Сжатие | Прозрачность | Анимация | Лучше для |
|---|---|---|---|---|---|
| JPG | Растр | С потерями | Нет | Нет | Фото, макс. совместимость |
| PNG | Растр | Без потерь | Да | Нет | Скриншоты, логотипы, текст |
| WebP | Растр | Оба | Да | Да | Веб-картинки, малый размер + альфа |
| AVIF | Растр | С потерями/без | Да | Да | Макс. сжатие (на сервере) |
| GIF | Растр | Без потерь | Только 1-бит | Да | Простые анимации |
| SVG | Вектор | — | Да | Да (с CSS/JS) | Логотипы, иконки, иллюстрации |
Как выбрать быстро
- Фотография? JPG ради совместимости, WebP ради веба.
- Скриншот, логотип или текст? PNG (растр) или SVG (если это настоящая векторная графика).
- Нужна прозрачность? PNG, WebP, AVIF или SVG — никогда JPG.
- Анимация? WebP ради качества и размера, GIF только ради устаревшей простоты.
- Публикуете на сайт? WebP обычно умный выбор по умолчанию.
Конвертация между ними
Когда у вас не тот формат, чтобы это исправить, ничего загружать не нужно. Конвертер изображений переключается между PNG, JPG и WebP прямо в вашем браузере через Canvas — без аккаунта, ничего не передаётся, и работает офлайн после первого визита. Он обрабатывает пакеты, а если вы запросите AVIF, откатывается к WebP (меньше JPG/PNG и поддерживается везде), поскольку браузеры не могут надёжно кодировать AVIF.
Держите таблицу выше в уме — и выбор формата перестанет быть гаданием: подберите формат под содержимое (фото или графика), затем под назначение (веб, почта, печать) — и почти каждый раз выберете верно.