Как оптимизировать изображения для сайта и улучшить PageSpeed

Скорость загрузки — подтверждённый Google фактор ранжирования с 2018 года для десктопа и с 2021 года для мобильных устройств. Более того, она напрямую влияет на конверсию: каждая дополнительная секунда загрузки увеличивает отказ от страницы до 32%, по данным самого Google. А в e-commerce исследования Portent показывают, что страницы, загружающиеся за 1 секунду, конвертируют до 3 раз лучше страниц, загружающихся за 5 секунд.

Изображения обычно составляют 50–80% общего веса веб-страницы. Их правильная оптимизация — самое эффективное вмешательство для производительности любого сайта.

Что PageSpeed Insights оценивает в изображениях

Google PageSpeed Insights (PSI) анализирует вашу страницу и отмечает проблемы, связанные с изображениями, по нескольким категориям. Самые распространённые:

• «Используйте современные форматы изображений»: появляется, когда сайт использует JPG или PNG там, где WebP (или AVIF) значительно уменьшил бы размер.
• «Правильно задавайте размер изображений»: появляется, когда изображение, отправленное на сервер, больше, чем место, где оно отображается. Пример: загрузка фото 2000px для показа в 400px.
• «Откладывайте загрузку изображений за пределами экрана»: появляется, когда изображения ниже сгиба загружаются вместе с остальной страницей, а не только когда пользователь прокручивает до них (ленивая загрузка).
• «Эффективно кодируйте изображения»: появляется, когда применённое сжатие изображений всё ещё имеет запас для уменьшения без заметной потери качества.
• «LCP-изображение»: определяет, какое изображение является Largest Contentful Paint страницы — главным элементом, определяющим одну из метрик Core Web Vitals.

6 принципов оптимизации изображений для веба

1. Используйте правильный формат для каждого типа изображения

Выбор формата — решение с наибольшим влиянием ещё до какого-либо сжатия:

WebP создаёт файлы на 25–35% меньше, чем JPG, и на 20–30% меньше, чем PNG, при эквивалентном визуальном качестве. В 2026 году совместимость превышает 97% используемых браузеров — больше нет технической причины избегать его на новых сайтах.

2. Сжимайте без потери видимого качества

Сжатие — это процесс уменьшения размера файла при сохранении размеров изображения. Для фото JPG снижение качества со 100% до 80% даёт файлы в 5–10 раз меньше с незаметной разницей на экране. Это идеальный диапазон для веба.

Практические ориентиры веса по типу изображения:

• Hero / главный баннер: ниже 200 КБ
• Фото товара (e-commerce): 50–150 КБ
• Изображение статьи блога: 50–120 КБ
• Миниатюра / thumbnail: 10–30 КБ
• Логотип (PNG/WebP): ниже 30 КБ
• SVG-иконки: ниже 5 КБ

3. Загружайте изображения в реальных размерах отображения

Это самая распространённая и одна из самых влиятельных ошибок: загрузка изображений намного больше, чем место, где они отображаются. Браузер скачивает изображение целиком, а затем отбрасывает лишние пиксели при рендеринге.

Примеры цены этой ошибки:

• Фото товара 3000×3000px, показанное в блоке 600×600px: браузер скачивает 9 миллионов пикселей, а использует лишь 360 тысяч — 96% впустую.
• Баннер шириной 4000px на сайте с максимальной шириной макета 1440px: 63% скачанных пикселей отбрасываются немедленно.

Правило простое: изображение, отправляемое на сервер, должно быть максимум вдвое больше размеров отображения (двойной размер для покрытия Retina/HiDPI-экранов). Для блока шириной 600px загружайте максимум 1200px.

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

4. Внедрите ленивую загрузку

Ленивая загрузка — техника загрузки изображений только тогда, когда они вот-вот попадут в видимую область экрана, вместо загрузки всех изображений страницы сразу при начальной загрузке. Эффект значителен: на страницах с большим количеством изображений (например, каталоги товаров или длинные статьи) ленивая загрузка может снизить начальный вес страницы на 60–80%.

Самая простая реализация нативна в современном HTML — достаточно добавить атрибут loading="lazy" к тегам изображений:

<!-- Изображение, которое должно загружаться сразу (над сгибом) -->
<img src="banner-principal.webp" alt="Баннер" loading="eager">

<!-- Изображения, которые могут подождать (ниже сгиба) -->
<img src="produto-1.webp" alt="Товар 1" loading="lazy">
<img src="produto-2.webp" alt="Товар 2" loading="lazy">

Важно: никогда не применяйте loading="lazy" к главному изображению над сгибом (hero, баннер, первое фото товара). Это задерживает LCP — важнейшую метрику Core Web Vitals — и напрямую ухудшает оценку в PageSpeed.

5. Задавайте width и height в тегах изображений

Когда браузер начинает загружать страницу, он строит макет ещё до того, как узнаёт размер изображений. Если width и height не заданы, браузер не резервирует правильное место — и когда изображение загружается, макет «прыгает», сдвигая текст и кнопки. Именно это PageSpeed измеряет как Cumulative Layout Shift (CLS) — ещё один Core Web Vital.

<!-- Без размеров: вызывает сдвиг макета -->
<img src="produto.webp" alt="Товар">

<!-- С размерами: резервирует правильное место с самого начала -->
<img src="produto.webp" alt="Товар" width="600" height="600">

Значения width и height в HTML не обязаны совпадать с визуальным размером отображения — они лишь задают пропорцию. За размер отображения отвечает CSS.

6. Используйте адаптивные изображения со srcset

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

<img
  src="produto-800.webp"
  srcset="produto-400.webp 400w,
          produto-800.webp 800w,
          produto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Товар"
  width="800"
  height="800"
  loading="lazy"
>

Для интернет-магазинов с большим количеством фото товаров srcset может снизить объём данных, передаваемых мобильным пользователям, на 40–60%.

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

Используйте этот список перед публикацией любой страницы или обновлением существующих изображений:

• ☐ Изображения в WebP (или SVG для векторных)
• ☐ Применено сжатие — фото ниже 150 КБ, когда это возможно
• ☐ Правильные размеры — не более чем вдвое больше места отображения
• ☐ loading="lazy" на всех изображениях ниже сгиба
• ☐ loading="eager" (или без атрибута) на главном изображении над сгибом
• ☐ width и height заданы во всех тегах <img>
• ☐ Описательный атрибут alt на всех изображениях (доступность + SEO)
• ☐ srcset для изображений, сильно различающихся по размеру между мобильными и десктопом
• ☐ LCP-изображение без loading="lazy" и с fetchpriority="high", если возможно

Оптимизация по платформам

WordPress

WordPress автоматически конвертирует в WebP начиная с версии 6.1, если сервер это поддерживает. Для надёжности установите плагин оптимизации, например Imagify, ShortPixel или Smush — они сжимают, конвертируют в WebP и автоматически добавляют ленивую загрузку к уже существующим изображениям в медиабиблиотеке.

Shopify

Shopify автоматически конвертирует изображения в WebP и подаёт правильную версию по устройству с 2021 года. Что продавцу нужно контролировать вручную — размер загружаемых изображений: рекомендуется 2048×2048px для фото товаров, которые Shopify изменяет под каждый контекст отображения.

Wix, Squarespace и другие конструкторы

Большинство современных конструкторов уже применяют сжатие и ленивую загрузку автоматически. Что по-прежнему зависит от пользователя — загрузка изображений разумного размера: загрузка фото с камеры весом 8 МБ перегружает сервер и может привести к вариантам большим, чем нужно.

Чистые сайты на HTML/CSS или фреймворки (Next.js, Nuxt и т.д.)

В этих случаях вся оптимизация — ответственность разработчика. Компонент <Image> в Next.js, например, автоматизирует ленивую загрузку, srcset и конвертацию в WebP. Для фреймворков без такой абстракции необходима ручная оптимизация по чек-листу выше.

Как измерить эффект от оптимизации

После применения оптимизаций измерьте результат этими инструментами:

• Google PageSpeed Insights (pagespeed.web.dev) — полный анализ с диагностикой по элементам, отдельно для мобильных и десктопа.
• Google Search Console → Отчёт о работоспособности страниц — показывает состояние Core Web Vitals с реальными данными пользователей вашего сайта.
• WebPageTest.org — детальный технический анализ с waterfall-диаграммой загрузки, полезен для определения, какое именно изображение задерживает LCP.
• Chrome DevTools → Network — отфильтруйте по «Img», чтобы увидеть все загруженные изображения, их размеры и время загрузки.

Часто задаваемые вопросы