Оптимизация изображений в 2026: AVIF, WebP и скорость сайта
Изображения — это около 48% среднего веса страницы, и чаще всего именно картинка является элементом LCP (Largest Contentful Paint), за которым Google следит напрямую. Переход с JPEG на WebP экономит 25–35% веса, на AVIF — до 50%. Это самый дешёвый способ ускорить сайт. Разбираем полный арсенал.
Форматы 2026: что выбрать
| Формат | Экономия vs JPEG | Поддержка | Когда использовать |
|---|---|---|---|
| JPEG | — | 100% | Легаси, email, старые CMS |
| WebP | 25–35% | 96,4% | Основной формат для фото |
| AVIF | до 50% | 94,9% | Критичные к весу изображения |
| SVG | в 5–20 раз | 100% | Логотипы, иконки, графики |
| PNG | — | 100% | Скриншоты, прозрачность с текстом |
Рекомендация 2026: AVIF первым, WebP запасным, JPEG как финальный фолбэк. Поддержка AVIF выросла до 94,9% — отставание в 1,5 пункта от WebP уже несущественно.
Как отдавать разные форматы: тег picture
Браузер сам выберет формат, который умеет отдавать, — с помощью srcset и sizes:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Описание" width="1200" height="800"
loading="lazy" decoding="async">
</picture>Для адаптивных картинок добавляйте разрешения (DPR):
<img src="photo-800w.webp"
srcset="photo-400w.webp 400w, photo-800w.webp 800w, photo-1600w.webp 1600w"
sizes="(max-width: 768px) 100vw, 800px"
alt="...">Так телефон не качает версию для десктопа. Google рекомендует держать фото в районе 200 КБ — хороший ориентир для страницы.
Качество и размеры: практические значения
- WebP: качество 75–85 — визуально эквивалентно JPEG 85.
- AVIF: качество 60–70 — внешне как JPEG 85, но вдвое легче.
- Высота изображений не больше, чем нужно: не грузите 4000 px картинку в карточку 300 px.
- Атрибуты width/height: без них браузер резервирует место после загрузки и появляется CLS.
Lazy loading и приоритеты
Правило 2026: лениво всё, кроме того, что видно сразу:
- Первый экран — без
loading="lazy": LCP-изображение должно грузиться первым. Для него используйтеfetchpriority="high". - Остальное —
loading="lazy", иначе браузер качает всё сразу. - Прелоад LCP:
<link rel="preload" as="image" href="hero.avif">. - Прозрачность через CSS (без картинки): тени, скругления, градиенты — не должны быть изображениями.
Инструменты и автоматизация
| Инструмент | Тип | Зачем |
|---|---|---|
| Squoosh / TinyPNG | Онлайн-сервисы | Быстрое сжатие разовых файлов |
| sharp (Node.js) | Библиотека | Конвертация в WebP/AVIF в сборке |
| ImageOptim / Codex | Десктоп | Пакетная обработка |
| Cloudflare Polish / Bunny Optimizer | CDN | Автоконвертация и сжатие на лету |
| WebP Convert / ShortPixel (WP) | Плагины | Автоматизация в WordPress |
Оптимальный конвейер: хранить оригиналы в JPEG/PNG, а сборщик или CDN автоматически отдают WebP/AVIF. Тогда конверсия в новые форматы не ломает старые страницы.
Проверка результата
- PageSpeed Insights: смотрите LCP и «Total Image Size».
- Chrome DevTools → Network: фильтр IMG — ищите картинки тяжелее 300 КБ.
- WebPageTest: проверка «LCP element» — какой файл и сколько весит.
- Сравнение до/после: обычно −40–70% веса картинок при том же качестве.
«Формат изображения — это не деталь дизайна, а выбор с максимальным влиянием на скорость. Переход JPEG → WebP → AVIF может срезать сотни килобайт без видимого изменения качества» — практика веб-производительности, 2026.
Начните с главной страницы: сконвертируйте 3–5 первых экранов в AVIF с WebP-фолбэком, добавьте width/height и lazy-loading — и проверьте PageSpeed через час. Эффект будет заметен сразу.