Как оптимизировать изображения: WebP, AVIF, размеры, lazyload

Изображения — один из главных факторов скорости загрузки сайта. На долю картинок приходится до 60–70% веса страницы. Если их не оптимизировать, проект теряет позиции в поиске, а пользователи уходят из-за долгого ожидания.

В 2025 году стандарты оптимизации медиа обновились: Google активно продвигает WebP и AVIF, браузеры научились лучше работать с lazyload, а Core Web Vitals жёстко контролируют LCP (Largest Contentful Paint) и CLS (Cumulative Layout Shift).

В этой статье расскажу, как оптимизировать изображения так, чтобы сайт уверенно держал 90+ баллов в PageSpeed Insights.

1. Форматы: WebP и AVIF

WebP

• Поддерживается во всех современных браузерах.
• Сжимает картинки на 30–50% лучше JPEG/PNG при том же качестве.
• Идеален для фото и графики без прозрачности.

AVIF

• Новый лидер по сжатию.
• Сохраняет высокое качество при минимальном весе (до 70% меньше JPEG).
• Отлично подходит для мобильных сетей и проектов с большим количеством фото.

✅ Рекомендация:

• Используйте WebP как основной формат.
• Тестируйте AVIF для тяжёлых фото и проектов с большим трафиком.
• JPEG/PNG оставляйте только для резервной совместимости (старые браузеры <5%).

2. Размеры и адаптивность

Частая ошибка — загружать огромную картинку (3000px шириной) для мобильного экрана 360px.

Как правильно

• Используйте атрибуты srcset и sizes:

<img src="hero-1280.webp"
srcset="hero-480.webp 480w, hero-768.webp 768w, hero-1280.webp 1280w"
sizes="100vw"
alt="Баннер сайта">

• Для превью создавайте отдельные версии (thumbnail).
• Не храните в коде изображения «про запас» — только нужный размер.
• Проверяйте фактические размеры: ширина картинки не должна быть больше контейнера.

3. Lazyload: откладываем лишнее

Lazyload — это ленивая загрузка изображений, которые находятся ниже первого экрана.

Почему это важно

• Сокращает вес страницы при первой загрузке.
• Улучшает LCP и скорость рендера.

Как включить

• В WordPress lazyload включен по умолчанию.
• В HTML5 достаточно:

<img src="image.webp" loading="lazy" alt="Пример">

⚠️ Важно: никогда не ставьте lazyload на LCP-изображение (герой-картинка или главный баннер).

4. Preload для ключевых изображений

Google PageSpeed часто ругается: «Отложите загрузку ресурсов, не влияющих на LCP».
Решение — preload для главной картинки.

<link rel="preload" as="image" fetchpriority="high" href="/images/hero.avif">

Так браузер загрузит её в первую очередь.

5. Сжатие и автоматизация

• Онлайн-инструменты: TinyPNG, Squoosh.
• WordPress-плагины: ShortPixel, Imagify, Optimole.
• Автоматическая генерация WebP/AVIF при загрузке.

👉 Совет: используйте lossy-сжатие с коэффициентом 70–80% — визуальной разницы нет, а вес падает в разы.

6. SVG: когда лучше

SVG — это векторный формат. Он идеально подходит для:

• логотипов,
• иконок,
• простых иллюстраций.

Преимущества:

• вес в разы меньше PNG,
• масштабируемость без потери качества,
• возможность стилизовать через CSS.

7. CDN и кэширование

Даже оптимизированные изображения нужно быстро доставлять.

• Подключите CDN (Cloudflare, BunnyCDN, KeyCDN).
• Настройте кэширование на год:

<FilesMatch "\.(jpg|jpeg|png|gif|webp|avif|svg)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

8. Типичные ошибки при оптимизации изображений

❌ Использование PNG для фото (вес в 5–10 раз выше).
❌ Огромные картинки без ресайза.
❌ Lazyload на LCP-элементе.
❌ Нет width и height → скачки CLS.
❌ Подключение Google Fonts без оптимизации картинок (шрифты + картинки = тяжёлый старт).

Чек-лист оптимизации изображений

• Все фото в WebP/AVIF.
• Адаптивные размеры через srcset.
• Lazyload для изображений ниже первого экрана.
• Preload для LCP-изображения.
• Сжатие до 70–80% качества.
• SVG для иконок и логотипов.
• CDN и кэширование на год.
• width/height прописаны для всех IMG (чтобы не было CLS).

Итог

В 2025 году оптимизация изображений — это не «дополнительная опция», а обязательное условие для успешного SEO и высокой конверсии.

1. Перейдите на WebP/AVIF.
2. Настройте адаптивные размеры.
3. Включите lazyload и preload для LCP.
4. Подключите CDN и кэш.

Так вы сократите вес сайта на десятки процентов, улучшите Core Web Vitals и получите стабильные 90+ в PageSpeed Insights.