Оптимизация изображений на сайте: WebP, srcset, lazy loading и ресайз

Изображения часто оказываются самым тяжёлым местом сайта. Код уже оптимизировали, SQL-запросы проверили, кэш включили, а страница всё равно грузится медленно. Потом выясняется, что на главной лежит баннер в 5 МБ, карточки товаров отдают оригиналы из загрузки, а мобильный пользователь скачивает те же картинки, что и десктоп.

Оптимизация изображений — это не одна кнопка “сжать всё”. Нужны правильные размеры, формат, кэш, адаптивная отдача и аккуратная обработка новых файлов.

Начать с фактического веса страницы

Сначала нужно понять, какие изображения реально грузятся. В браузере откройте DevTools → Network, включите фильтр Img и перезагрузите страницу.

Смотреть нужно:

• размер файла;
• фактический размер отображения на странице;
• формат файла;
• кэширование;
• грузится ли изображение сразу или ниже первого экрана;
• есть ли дубли одного и того же изображения.

Если картинка отображается как 300×300, но загружается оригинал 3000×3000, это очевидный кандидат на исправление.

Ресайз под место вывода

Сайт не должен отдавать оригиналы там, где нужны превью. Для карточек товара, аватаров, баннеров и галерей обычно нужны разные размеры.

/uploads/products/original/product-1.jpg
/uploads/products/thumb/product-1_300x300.webp
/uploads/products/card/product-1_600x600.webp

Оригинал можно хранить для повторной генерации, но пользователю лучше отдавать подготовленное изображение.

WebP

WebP часто даёт заметное уменьшение веса без видимой потери качества. Но лучше не заменять оригиналы вслепую. На практике удобно хранить оригинал и генерировать WebP-версии под нужные размеры.

<picture>
    <source srcset="/uploads/card/product.webp" type="image/webp">
    <img src="/uploads/card/product.jpg" width="600" height="600" alt="Товар">
</picture>

Так браузер возьмёт WebP, если поддерживает, а fallback останется для совместимости.

srcset для адаптива

Мобильному экрану не всегда нужен большой десктопный баннер. srcset позволяет отдать подходящий размер.

<img
    src="/uploads/banner-1200.jpg"
    srcset="/uploads/banner-480.jpg 480w, /uploads/banner-768.jpg 768w, /uploads/banner-1200.jpg 1200w"
    sizes="(max-width: 768px) 100vw, 1200px"
    width="1200"
    height="400"
    alt="Баннер">

Важно не просто добавить srcset, а проверить, какой файл реально выбрал браузер.

Lazy loading

Изображения ниже первого экрана можно грузить лениво.

<img src="/uploads/gallery/photo.jpg" loading="lazy" width="800" height="600" alt="">

Но главный баннер и первое важное изображение лучше не делать lazy. Иначе первый экран может появиться позже или прыгнуть при загрузке.

Width и height

Даже оптимизированная картинка может портить пользовательский опыт, если у неё не заданы размеры. Браузер не резервирует место и страница двигается после загрузки.

<img src="/uploads/photo.webp" width="800" height="600" alt="Фото">

Для карточек удобно использовать CSS aspect-ratio.

.product-card__image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

Кэширование

Подготовленные изображения можно кэшировать долго, особенно если в имени есть версия или hash. Но если файл перезаписывается по тому же URL, кэш может мешать обновлению.

location ~* \.(jpg|jpeg|png|webp|gif|svg)$ {
    expires 30d;
    add_header Cache-Control "public";
}

Новые загрузки

Если пользователи или менеджеры загружают изображения через админку, оптимизация должна применяться автоматически. Иначе старые картинки сожмёте один раз, а новые снова будут тяжёлыми.

Чек-лист

1. Найти самые тяжёлые изображения в Network.
2. Проверить фактический размер отображения.
3. Генерировать превью вместо отдачи оригиналов.
4. Добавить WebP с fallback.
5. Использовать srcset для адаптива.
6. Включить lazy loading для изображений ниже первого экрана.
7. Задать width, height или aspect-ratio.
8. Настроить кэширование изображений.
9. Автоматизировать обработку новых загрузок.

Хорошая оптимизация изображений незаметна пользователю. Страница просто быстрее открывается, не прыгает, не тратит лишний трафик и не требует от менеджера вручную готовить каждый файл перед загрузкой.