Почему изображения — главная проблема производительности
Изображения составляют в среднем 50-70% от общего веса веб-страницы. По данным HTTP Archive, средняя страница загружает более 1 МБ изображений. Неоптимизированные изображения — причина №1 медленной загрузки сайтов и плохих показателей Core Web Vitals.
Оптимизация изображений — это самый быстрый способ ускорить сайт с минимальными усилиями.
Современные форматы изображений
WebP
Формат от Google, поддерживается всеми современными браузерами (97%+ глобально). Преимущества:
- На 25-35% меньше JPEG при аналогичном качестве
- На 26% меньше PNG с поддержкой прозрачности
- Поддержка анимации (замена GIF с 64% экономией размера)
- Лосси и лосслесс режимы
AVIF
Формат на базе AV1, поддержка около 93% браузеров. Лучшее сжатие на рынке:
- На 50% меньше JPEG при аналогичном качестве
- На 20% меньше WebP
- Поддержка HDR и wide color gamut
- Медленнее в кодировании, чем WebP
Когда использовать какой формат
- AVIF — для фотографий и сложных изображений, когда время кодирования не критично
- WebP — универсальный выбор, хороший баланс качества и совместимости
- SVG — для иконок, логотипов, иллюстраций (векторный, масштабируется без потерь)
- PNG — для скриншотов и изображений с текстом, когда нужна пиксельная точность
- JPEG — фоллбэк для старых браузеров
Элемент picture для прогрессивной загрузки
Используйте <picture> для предоставления нескольких форматов:
<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Описание" width="800" height="600"> </picture>
Браузер выберет первый поддерживаемый формат. Всегда указывайте width и height для предотвращения layout shift (CLS).
Responsive Images
Атрибут srcset позволяет загружать изображение подходящего размера для устройства:
<img
srcset="image-480.webp 480w,
image-800.webp 800w,
image-1200.webp 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1200px"
src="image-800.webp"
alt="Описание"
>
Не загружайте 2000px изображение для 320px мобильного экрана. Экономия может составить 80% трафика.
Lazy Loading
Ленивая загрузка откладывает загрузку изображений, которые не видны на экране, до момента прокрутки:
<img src="image.webp" alt="Описание" loading="lazy">
Правила lazy loading:
- Не применяйте к LCP-изображению — главное изображение над сгибом должно загружаться сразу
- Не применяйте к первым 2-3 изображениям на странице
- Применяйте ко всем изображениям ниже первого экрана
- Используйте
fetchpriority="high"для LCP-изображения
<!-- LCP-изображение — высокий приоритет --> <img src="hero.webp" alt="Hero" fetchpriority="high"> <!-- Изображения ниже сгиба — ленивая загрузка --> <img src="gallery-1.webp" alt="Gallery" loading="lazy">
Сжатие изображений
Качество сжатия
Для фотографий оптимальное качество — 75-85%. Разница между 85% и 100% едва заметна глазу, но размер файла может отличаться в 2-3 раза.
Инструменты сжатия
- Squoosh — визуальное сравнение, поддержка AVIF/WebP
- ImageOptim — пакетная оптимизация для macOS
- Sharp — Node.js-библиотека для серверной обработки
- cwebp/cavif — CLI-утилиты для конвертации
Автоматизация
Интегрируйте оптимизацию в CI/CD pipeline или используйте CDN с автоматической конвертацией (Cloudflare Polish, imgproxy). Никогда не полагайтесь на ручную оптимизацию — она будет забыта.
Дополнительные оптимизации
Предзагрузка LCP-изображения
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
CSS-спрайты и инлайн-SVG
Для маленьких иконок используйте SVG-спрайты или инлайн-SVG вместо отдельных файлов — это сокращает количество HTTP-запросов.
Placeholder при загрузке
Используйте CSS-заглушки нужного размера или размытые превью (LQIP — Low Quality Image Placeholder) для предотвращения layout shift.
Проверка скорости загрузки
Используйте тест скорости Enterno.io для измерения времени загрузки ваших страниц. Сравните результаты до и после оптимизации изображений. Проверьте HTTP-ответ на наличие заголовков кэширования для изображений.
Итоги
Оптимизация изображений — самый эффективный способ ускорить сайт. Используйте WebP/AVIF с фоллбэком, responsive images для разных экранов, lazy loading для изображений ниже сгиба, и автоматизируйте сжатие. Эти меры могут сократить вес страницы на 50-80%.