На среднестатистической странице любого сайта картинки забирают больше половины всего веса трафика — и почти всегда именно одна из них становится тем самым LCP-элементом, по которому Google оценивает скорость загрузки. Поэтому вопрос «каким форматом сохранить картинку» — не вкусовщина дизайнера, а вполне измеримый параметр перформанса. Один и тот же кадр в JPEG, WebP и AVIF может отличаться по весу в три раза при одинаковом качестве на глаз.
Вместо того чтобы зубрить таблицу с пятью форматами и их свойствами, удобнее пройти по короткому дереву решений: четыре последовательных вопроса — и нужный формат сам всплывает в нужной ветке. Ниже — именно такой разбор, с примерами кода и поддержкой браузерами под каждый из современных форматов.
Шаг 1. А нужна ли картинка вообще?
Прежде чем выбирать формат, имеет смысл проверить, не решается ли задача без растрового файла в принципе. Любое изображение — это десятки или сотни килобайт поверх HTML и CSS, и часть из них можно безболезненно срезать.
- Эффекты, тени, градиенты и геометрические узоры рисуются средствами CSS быстрее, чем грузится PNG, и масштабируются под любой экран. Готовые помощники-генераторы есть в подборке ресурсов для работы с графическими элементами.
- Текст в картинке — почти всегда антипаттерн. Поисковик его не индексирует, скринридер не прочитает, выделить и скопировать нельзя, при ресайзе экрана появятся артефакты или белые поля. Решение — веб-шрифт и обычный <h1>.
- Иконки — это работа SVG-спрайта, а не папки с PNG. Один файл-спрайт открывает все иконки сразу и кэшируется как угодно долго.
Если после этой проверки картинка всё ещё нужна (а для фотографий, скриншотов реальных интерфейсов и сложных иллюстраций — точно нужна) — переходим к шагу 2.
Шаг 2. Вектор или растр?
Все веб-форматы делятся на две большие группы. Векторная графика (SVG) — описывает изображение математически: линии, кривые, заливки, опорные точки. Растровая (JPEG, PNG, WebP, AVIF, GIF) — хранит цвет каждого пикселя в сетке.
Из этого следует простое правило выбора:
- Логотип, иконка, схема, диаграмма, флаг, простая иллюстрация — берём SVG. Он остаётся резким на любом экране (хоть Retina, хоть 4K), весит обычно меньше эквивалентного PNG и редактируется текстовым редактором.
- Фотография, скриншот UI, рендер 3D, сложная сцена с миллионами цветов и градиентов — берём растр. SVG здесь либо не сможет описать сцену, либо разрастётся до неприличного размера.
Маленький, но болезненный нюанс: SVG не всегда легче. Если в файле сотни кривых, градиентов и фильтров (типичный экспорт сложной иллюстрации из Illustrator или Figma без чистки) — такой SVG спокойно перевешивает компактный PNG в 8-битной палитре. Перед публикацией любой SVG нужно прогнать через минификатор (например SVGO или его веб-версию SVGOMG), который уберет редакторские метаданные, скрытые слои и лишнюю точность чисел, и в среднем уменьшит размер на 30–70% без визуальной разницы.
Если ветка получилась «растр» — идём дальше выбирать конкретный.
Шаг 3. Какой именно растровый формат
На вебе сейчас в живом ходу четыре растровых формата. У каждого своя ниша.
| Формат | Сжатие | Прозрачность | Анимация | Где сильнее всего |
|---|---|---|---|---|
| JPEG | С потерями | Нет | Нет | Фотографии и плавные градиенты |
| PNG | Без потерь | Да (8 бит) | Только APNG | Скриншоты UI, графика с резкими краями и прозрачностью |
| WebP | Оба режима | Да | Да | Замена JPEG и PNG в одном лице, экономия 25–35% |
| AVIF | Оба режима | Да (10–12 бит) | Да | Максимальное сжатие, выигрывает у WebP ещё 20–50% |
Из таблицы выпадает простая логика: для фотографии — AVIF (если важен размер) или WebP (если важно широкое покрытие), с JPEG в качестве запасного варианта. Для скриншота интерфейса, иконки с прозрачностью, графика с чёткими линиями — PNG или WebP в lossless-режиме (он часто оказывается даже компактнее, чем PNG-8 с той же палитрой).
Отдельно стоит отметить полезное свойство JPEG, которого нет у PNG — прогрессивная отрисовка. Если файл сохранён как progressive JPEG, браузер рисует сначала размытую версию по первым байтам, потом постепенно уточняет. Для пользователя на медленном канале это выглядит так, будто картинка появилась раньше, чем дозагрузилась. WebP и AVIF умеют похожий трюк через multi-pass, но именно прогрессивный JPEG до сих пор остаётся самым предсказуемым.
Глобальное покрытие WebP по данным caniuse держится около 95%, AVIF — около 93%. Разница не критична, но именно из-за неё AVIF почти никогда не вставляется «в лоб» — только через тег picture с WebP- или JPEG-фолбэком (об этом в шаге 5).
Шаг 4. Анимация — это не GIF
Если на странице нужно что-то движущееся, инстинктивный ответ «возьмём GIF» почти всегда оказывается худшим. У формата два жёстких ограничения:
- Палитра ограничена 256 цветами на кадр. Любой градиент или плавный переход превращается в полосы.
- Нет межкадрового сжатия в том виде, в котором его умеют видеокодеки. Один и тот же двухсекундный ролик в GIF может весить 4 МБ, в MP4 (H.264) или WebM (VP9) — 200 КБ. Разница в двадцать раз.
В абсолютном большинстве случаев анимированный GIF корректнее заменить на тег <video> с атрибутами autoplay, muted, loop и playsinline — такая комбинация ведёт себя визуально как зацикленный GIF, но грузится в разы быстрее:
<video autoplay muted loop playsinline poster="preview.jpg">
<source src="loop.webm" type="video/webm">
<source src="loop.mp4" type="video/mp4">
</video>Если анимация совсем короткая и обязательно нужна прозрачность фона — APNG или анимированный WebP/AVIF справятся лучше, чем GIF, при сопоставимой простоте. Но даже там видео обычно остаётся выгоднее по весу.
Шаг 5. Retina, плотность пикселей и <picture> с фолбэком
Когда формат выбран, остаётся последний вопрос — что отдавать пользователям с разной плотностью экранов, и как при этом не ломать поддержку старых браузеров.
Один CSS-пиксель на дисплее Retina или Super Retina равен 2, 3 или даже 4 физическим пикселям. Картинка 100×100 в макете при удвоенной плотности будет физически отрисована как 200×200, то есть в четыре раза больше пикселей в файле:
| Плотность экрана | Размер исходника для 100×100 CSS-пикселей | Количество пикселей |
|---|---|---|
| 1x (обычный экран) | 100×100 | 10 000 |
| 2x (Retina, большинство современных смартфонов) | 200×200 | 40 000 |
| 3x (флагманы iPhone и Pixel) | 300×300 | 90 000 |
Решается это атрибутами srcset и sizes — подробный разбор того, как браузер выбирает между источниками, есть в статье про загрузку картинок в зависимости от устройства.
А вот для разрешения проблемы «AVIF лёгкий, но в Safari 15 не открывается» используется тег picture с цепочкой источников от самого современного к самому совместимому:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Главный баннер" width="1200" height="600" loading="lazy">
</picture>Браузер идёт по списку сверху вниз и берёт первый формат, который понимает. Современный Chrome или Safari подхватит AVIF, чуть более старая версия Edge — WebP, совсем древние — JPEG из <img>. Тег <img> внутри обязателен — именно он определяет реальные размеры, alt и поведение по умолчанию.
То есть сам тег picture доступен фактически везде — узким местом остаётся именно поддержка форматов в источниках.
Памятка по выбору
Короткая шпаргалка, которую удобно держать рядом с папкой исходников:
- Фотография, скриншот фотографии — AVIF + WebP + JPEG-фолбэк через picture.
- Скриншот интерфейса, окно DevTools, диаграмма с чёткими линиями — WebP lossless или PNG.
- Иконка, логотип, флаг, простая фигура — SVG (после прогона через SVGOMG).
- Анимация на странице — тег <video> с MP4 и WebM, а не GIF.
- Изображение с прозрачным фоном и резкими краями — PNG-8 (если палитра небольшая) или WebP lossless (если переходов больше).
Когда формат выбран, остаётся ещё прогнать файл через сжатие — даже правильно выбранный AVIF не отменяет ручного контроля качества и ресайза. Готовая подборка веб-сервисов, CLI и плагинов сборщиков под эту задачу собрана в статье про инструменты по оптимизации картинок.
Комментарии (0)