Техническое руководство по ускорению загрузки картинок. WebP и AVIF, srcset и picture, ленивая загрузка, CDN для изображений. Как сократить вес картинок без потери качества и улучшить Core Web Vitals.
Введение
Изображения — это 50-70 процентов веса среднестатистической веб-страницы. Пока текст грузится мгновенно, картинки тянут резину, убивая LCP и беся пользователей. Вы можете сколько угодно оптимизировать код и настраивать кеширование, но если на главной странице висит фотография весом 5 мегабайт, скорость будет ужасной. Хорошая новость: оптимизация изображений — это low-hanging fruit SEO. Несколько правильных действий дают прирост скорости в разы. В этой статье — техническое руководство по ускорению загрузки изображений: современные форматы, адаптивные картинки, ленивая загрузка и CDN.
Современные форматы: WebP и AVIF
JPEG и PNG — это прошлый век. Современные форматы сжимают изображения в 2-5 раз эффективнее при том же визуальном качестве. WebP — формат от Google, поддерживается всеми современными браузерами, включая Яндекс.Браузер. Сжатие с потерями даёт уменьшение веса на 25-35 процентов по сравнению с JPEG. Сжатие без потерь — на 20-25 процентов по сравнению с PNG. AVIF — ещё более новый формат, основанный на видеокодеке AV1. Сжимает на 50 процентов лучше JPEG при том же качестве. Поддерживает HDR, прозрачность, широкий цветовой охват. Минус: не все старые браузеры поддерживают AVIF. Поэтому внедрять его нужно через тег picture с фолбэком на WebP или JPEG. Как перевести сайт на WebP. Вариант первый: плагины для CMS. Для WordPress — Imagify, ShortPixel, Converter for Media. Они автоматически конвертируют загружаемые изображения в WebP и отдают их браузерам, которые поддерживают формат. Вариант второй: ручная конвертация перед загрузкой на сайт. Подходит для небольших проектов. Вариант третий: серверная конвертация на лету. На сервер загружается JPEG, а отдаётся WebP через скрипт или CDN. Важно: не удаляйте оригиналы в JPEG. Они нужны как фолбэк для старых браузеров. Подробнее о базовых методах оптимизации читайте в статье Оптимизация изображений для сайта: WebP, AVIF, сжатие.
Адаптивные изображения: srcset и picture
На десктопе картинка шириной 1920 пикселей выглядит отлично. На смартфоне с экраном 360 пикселей она просто тратит трафик и замедляет загрузку. Адаптивные изображения решают эту проблему. Атрибут srcset в теге img позволяет указать несколько версий изображения для разных разрешений экрана. Браузер сам выбирает подходящую по плотности пикселей и размеру вьюпорта. Например, для экрана шириной 360px загрузится версия 400px, для экрана 1920px — полная версия. Тег picture даёт ещё больше контроля. Внутри него можно указать разные форматы (WebP для современных браузеров, JPEG для старых) и разные размеры для разных медиа-выражений. Внедрение srcset и picture требует доработки шаблонов CMS или ручной вёрстки. Но результат того стоит: вес страницы на мобильных устройствах сокращается в 2-5 раз. Если сайт на WordPress, плагины оптимизации изображений часто добавляют srcset автоматически. Проверьте, что у вас это работает: откройте код страницы и найдите теги img с атрибутом srcset.
Ленивая загрузка: lazy loading
Ленивая загрузка откладывает загрузку изображений до того момента, когда они появятся в области видимости пользователя. Картинка в футере, до которой нужно скроллить пять экранов, не будет грузиться при открытии страницы. Это ускоряет первоначальную загрузку и экономит трафик. Современный способ — атрибут loading="lazy" в теге img. Он поддерживается всеми актуальными браузерами и не требует JavaScript. Просто добавьте этот атрибут ко всем изображениям, которые находятся ниже первого экрана. Не ставьте lazy loading на первое изображение в статье — оно должно загрузиться сразу, так как влияет на LCP. Для фоновых изображений (в CSS) lazy loading через loading="lazy" не работает. Здесь нужен JavaScript или плагин. Важный нюанс: при ленивой загрузке убедитесь, что у изображений заданы размеры (width и height) или aspect-ratio. Иначе при загрузке картинки вёрстка будет дёргаться, ухудшая CLS. О влиянии CLS и других метрик на ранжирование читайте в статье Скорость загрузки сайта: как проверить и ускорить Core Web Vitals.
CDN для изображений
CDN ускоряет загрузку изображений, раздавая их с серверов, географически близких к пользователю. Но современные CDN умеют больше. Оптимизация на лету: CDN автоматически конвертирует изображения в WebP или AVIF, сжимает их, обрезает до нужного размера. Вам не нужно менять ничего на сервере — достаточно подключить CDN и настроить правила. Кеширование: изображения кешируются на серверах CDN по всему миру, снижая нагрузку на ваш сервер. Защита от хотлинка: CDN может блокировать прямые ссылки на ваши изображения с других сайтов. Популярные CDN с оптимизацией изображений доступны и в России. Некоторые работают как плагины для WordPress, настройка занимает 15 минут. При выборе CDN обращайте внимание на: наличие точек присутствия в России (важно для скорости), возможность автоматической оптимизации изображений, цену (многие CDN имеют бесплатные тарифы для небольших проектов).
Аудит изображений: находим и исправляем проблемы
Как проверить, что изображения на сайте оптимизированы. Первое: PageSpeed Insights или Lighthouse. Отчёт покажет, какие изображения можно сжать и на сколько. Второе: краулер. Соберите все URL изображений, проверьте их размер и формат. Найдите JPEG, которые можно конвертировать в WebP. Найдите PNG, которые используются для фотографий (а не для иконок) — их тоже лучше в WebP. Третье: вручную проверьте ключевые страницы. Откройте панель разработчика, вкладка Network, отфильтруйте по Img. Посмотрите на размеры изображений. Если видите картинки тяжелее 200-300 КБ — это кандидаты на оптимизацию. Четвёртое: проверьте атрибуты width и height. Они должны быть указаны для всех img-тегов, чтобы браузер резервировал место под картинку до её загрузки.
Часто задаваемые вопросы
Какой формат лучше: WebP или AVIF? AVIF сжимает лучше, но поддерживается меньшим числом браузеров. Оптимальная стратегия: использовать оба формата через тег picture. AVIF для современных браузеров, WebP как фолбэк, JPEG для совсем старых.
Снижает ли сжатие качество изображений? При разумном сжатии разница незаметна глазу. WebP с качеством 80-85 процентов визуально идентичен JPEG с качеством 90-95, но весит в 2-3 раза меньше. Всегда проверяйте результат визуально после сжатия.
Нужно ли хранить оригиналы изображений? Да, всегда храните оригиналы в максимальном качестве. Если через год появится новый формат, который сжимает ещё лучше, вы сможете переконвертировать всё из оригиналов, а не из уже сжатых копий.
Как быть с изображениями товаров, которые грузятся через API? Если изображения приходят из внешнего источника (1С, маркетплейс), настройте обработку при импорте: конвертация в WebP, сжатие, добавление водяных знаков. Это делается скриптом на сервере или плагином для интеграции.
Влияет ли скорость загрузки изображений на SEO? Да, напрямую через Core Web Vitals (LCP часто зависит от изображений) и косвенно через поведенческие факторы. Пользователи не ждут, пока загрузится тяжёлая картинка. Быстрые изображения — быстрый сайт — лучшие позиции.
