JPEG, PNG, WebP, AVIF: выбери правильный формат изображения
У каждого формата есть компромиссы. Вот как выбрать правильный для твоих изображений.
Ты экспортируешь изображение. Варианты — JPEG, PNG, WebP, GIF, AVIF, SVG и другие.
Все они производят изображения. Они не взаимозаменяемы.
JPEG: Стандарт для фотографий
Лучше всего для: Фотографий, сложных изображений с градиентами, всего с множеством цветов.
Избегай для: Текста, логотипов, скриншотов, всего с острыми краями.
JPEG использует сжатие с потерями. Он выбрасывает данные, которые ты, вероятно, не заметишь на фотографиях. Но он борется с острыми краями — текст выглядит размытым, логотипы получают артефакты.
Настройка качества имеет значение. 80-85% обычно золотая середина. Ниже 60% артефакты сжатия становятся очевидными.
PNG: Острые края и прозрачность
Лучше всего для: Скриншотов, логотипов, графики с текстом, изображений, требующих прозрачности.
Избегай для: Больших фотографий (файлы становятся огромными).
PNG использует сжатие без потерь. Каждый пиксель сохраняется точно. Отлично для острых краёв, ужасно для размера файла на сложных изображениях.
PNG-8 (256 цветов) vs PNG-24 (миллионы цветов). Используй 8, когда можешь это сделать.
WebP: Современный компромисс
Лучше всего для: Почти всего в вебе.
Избегай для: Когда тебе нужна максимальная совместимость со старыми браузерами.
WebP делает как сжатие с потерями, так и без, часто на 25-35% меньше, чем JPEG или PNG при том же качестве.
Поддержка браузеров отличная сейчас. Используй WebP с fallback на JPEG/PNG для древних браузеров.
AVIF: Новейший и наименьший
Лучше всего для: Максимального сжатия с хорошим качеством.
Избегай для: Требований поддержки браузеров, проблем со скоростью кодирования.
AVIF достигает ещё лучшего сжатия, чем WebP. Но кодирование медленнее, а поддержка браузеров всё ещё растёт.
Если ты можешь генерировать форматы заранее (статические сайты), используй AVIF с fallback.
GIF: Движущиеся изображения, ограниченные цвета
Лучше всего для: Простых анимаций, очень простой графики.
Избегай для: Фотографий (лимит 256 цветов), больших анимаций (огромные файлы).
Поддержка анимации GIF держит его живым. Но максимум 256 цветов означает, что фотографии выглядят ужасно.
Для анимаций видео MP4 или WebM часто меньше и лучшего качества.
SVG: Векторная графика
Лучше всего для: Иконок, логотипов, иллюстраций, всего, что должно масштабироваться.
Избегай для: Фотографий, сложных изображений.
SVG — это не растровый формат. Это XML, описывающий формы. Масштабируется до любого размера без потери качества.
Для иконок и логотипов SVG почти всегда правильный выбор.
Быстрое руководство по решению
| Тип контента | Формат | |-------------|--------| | Фото для веба | WebP (JPEG fallback) | | Скриншот | PNG | | Логотип/иконка | SVG | | Простая анимация | GIF или анимированный WebP | | Сложная анимация | Видео MP4/WebM | | Максимальное качество архива | PNG |
Частые ошибки
PNG для всех фото. PNG в 10MB мог быть JPEG в 500KB без видимой разницы.
JPEG для скриншотов. Текст становится размытым. Используй PNG.
Не использовать WebP в 2026. Поддержка браузеров отличная. Используй его.
Многократное сохранение JPEG. Каждое сохранение добавляет артефакты сжатия. Храни исходные файлы и экспортируй один раз.
Выбор формата зависит от конкретного изображения. Фотографии — это JPEG/WebP. Графика — это PNG/SVG. Понимай компромиссы и выбирай соответственно.