Как оптимизировать изображения для Core Web Vitals (гайд 2026)

Ваш сайт загружается медленно. Вы запускаете Lighthouse. Отчёт говорит, что проблема в изображениях.

Красный показатель "Largest Contentful Paint"? Почти всегда виноваты неоптимизированные изображения. А Google использует этот показатель для ранжирования вашего сайта.

Core Web Vitals — это метрики, которые Google ценит больше всего. Изображения влияют на самую важную из них. Оптимизируйте изображения — и показатели вырастут. Вот как это сделать.

Что такое Core Web Vitals и почему изображения важны?

Core Web Vitals — это три метрики производительности, которые Google измеряет на каждой странице:

Largest Contentful Paint (LCP): Как быстро загружается самый большой видимый элемент. Должно быть менее 2,5 секунд.
Interaction to Next Paint (INP): Как быстро страница реагирует на клик или касание. Должно быть менее 200 миллисекунд.
Cumulative Layout Shift (CLS): Насколько сильно смещается макет страницы при загрузке. Должно быть менее 0,1.

Изображения напрямую влияют на две из трёх метрик. Тяжёлое hero-изображение убивает показатель LCP. Изображение без заданных размеров вызывает сдвиги макета и портит CLS.

Почему это важно для бизнеса? Google подтвердил, что Core Web Vitals — это фактор ранжирования. Страницы с хорошими показателями получают больше органического трафика. Страницы с плохими — опускаются в результатах поиска.

Данные это подтверждают. Сайты, улучшившие LCP на 2+ секунды, увидели измеримый рост в ранжировании. Для конкурентных ключевых слов разница в скорости может означать разницу между первой и третьей страницей.

А изображения обычно самые тяжёлые элементы на любой странице. Средняя веб-страница загружает более 1 МБ изображений. Это больше, чем скрипты, шрифты и HTML вместе взятые. Исправьте изображения — и вы решите большинство проблем с производительностью.

Как улучшить Largest Contentful Paint с помощью оптимизации изображений?

LCP измеряет, когда самый большой видимый элемент заканчивает рендеринг. На большинстве страниц это hero-изображение, фото товара или баннер.

Если это изображение загружается 4 секунды, ваш LCP равен 4 секундам. Google хочет менее 2,5. Вот как сократить этот разрыв.

Сжимайте изображения. Hero-изображение в 2 МБ — это слишком много. Сожмите до 150-200 КБ, и время загрузки резко упадёт. Для фотографий используйте качество 75-85%. Визуальная разница почти незаметна, а размер файла уменьшается на 80-90%.

Используйте современные форматы. Файлы WebP на 25-35% меньше JPEG при том же качестве. AVIF экономит ещё больше. Все современные браузеры поддерживают WebP. Смена формата — одно из самых простых улучшений LCP.

Масштабируйте до размера отображения. Не отдавайте изображение 4000px, когда на странице оно показывается в 800px. Сначала масштабируйте, потом сжимайте. Только это может уменьшить размер файла на 70-80%.

Предзагружайте LCP-изображение. Добавьте подсказку предзагрузки в HTML, чтобы браузер сразу начал скачивать hero-изображение. Без неё браузер обнаруживает изображение только после парсинга CSS. Эта задержка добавляет сотни миллисекунд.

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

Установите fetchpriority="high" на LCP-изображении. Это говорит браузеру приоритизировать это изображение перед другими ресурсами. Небольшое изменение, которое реально сокращает LCP.

Не используйте lazy load для LCP-изображения. Это частая ошибка. Lazy loading откладывает загрузку изображения, пока оно не попадёт в область видимости. Ваше hero-изображение уже видно при загрузке страницы. Lazy loading для него добавляет ненужную задержку и ухудшает LCP.

Lazy loading помогает или вредит Core Web Vitals?

Lazy loading отлично работает для изображений ниже сгиба. И плохо — для изображений выше сгиба.

Когда вы добавляете loading="lazy" к изображению, браузер ждёт, пока пользователь прокрутит страницу, прежде чем загружать его. Это экономит трафик на изображениях, которые пользователь может никогда не увидеть. Уменьшает начальный вес страницы и ускоряет первую загрузку.

Но если вы применяете lazy load к hero-изображению или любому изображению, видимому на первом экране, вы просите браузер отложить загрузку самого важного визуального элемента. Это напрямую увеличивает LCP.

Правило простое. Используйте lazy load для каждого изображения ниже сгиба. Никогда не используйте для изображений выше сгиба. Hero-изображение, логотип в шапке и любой контент, видимый без прокрутки, должны загружаться немедленно.

Для большинства страниц это означает 1-3 изображения загружаются сразу. Всё остальное — lazy loading. Такой баланс даёт лучший LCP и при этом экономит трафик.

Также следите за сдвигами макета из-за lazy-загруженных изображений. Когда lazy-изображение загружается и сдвигает контент вниз — это проблема CLS. Всегда задавайте явные атрибуты width и height. Браузер зарезервирует место до загрузки изображения и предотвратит скачки макета.

Какие форматы изображений дают лучшие показатели Core Web Vitals?

Формат, который вы выбираете, напрямую влияет на размер файла. Меньшие файлы загружаются быстрее. Быстрая загрузка означает лучший LCP.

WebP — лучший выбор по умолчанию для веб-изображений сейчас. Сжимает на 25-35% лучше JPEG без видимой потери качества. Поддержка браузерами — более 97%. Если не нужно поддерживать очень старые браузеры, WebP — ваш главный формат.

AVIF сжимает ещё лучше, чем WebP. До 50% меньше JPEG. Но кодирование медленнее, а поддержка браузерами ещё догоняет. Используйте AVIF, если ваш стек это поддерживает и вы можете предоставить фолбэк.

JPEG по-прежнему хорошо работает для фотографий. При правильном сжатии (качество 75-85) — надёжный выбор. Но WebP почти всегда даст меньший файл при том же визуальном качестве.

PNG подходит для логотипов, иконок и изображений с прозрачностью. Но файлы PNG большие. Если прозрачность не нужна, конвертируйте в WebP или JPEG.

Элемент <picture> позволяет отдавать лучший формат каждому браузеру:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero-изображение" width="1200" height="600">
</picture>

Это отдаёт AVIF браузерам с поддержкой, WebP — следующей группе, JPEG — как запасной вариант. Каждый посетитель получает наименьший файл, который может обработать его браузер.

Как предотвратить сдвиги макета из-за изображений?

Сдвиг макета происходит, когда изображение загружается и сдвигает другой контент. Текст, который вы читали, внезапно прыгает вниз. Кнопка, на которую вы собирались нажать, перемещается. Это раздражает пользователей и ухудшает CLS.

Решение простое. Всегда сообщайте браузеру размер изображения до его загрузки.

Задавайте width и height на каждом изображении. Браузер использует эти значения для расчёта соотношения сторон и резервирования нужного пространства. Даже если изображение ещё не загружено, макет остаётся стабильным.

<img src="/photo.webp" alt="Фото продукта" width="800" height="600">

Используйте CSS aspect-ratio для адаптивных изображений. Если изображения масштабируются с вьюпортом, задайте соотношение сторон в CSS. Браузер зарезервирует правильное пропорциональное пространство при любом размере экрана.

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Не вставляйте изображения динамически над существующим контентом. Если JavaScript загружает рекламный баннер или карусель вверху страницы, всё ниже сдвигается. Зарезервируйте место для динамического контента или загружайте его ниже сгиба.

Следите за макетами, зависящими от шрифтов. Иногда сдвиг макета вызван не изображениями. Поздно загруженные веб-шрифты могут перекомпоновать текст и сдвинуть изображения. Используйте font-display: swap и предзагружайте ключевые шрифты.

Чек-лист оптимизации изображений для Core Web Vitals

Пошаговый чек-лист для каждой страницы:

Перед загрузкой:

Масштабируйте изображения до размера отображения (2x для Retina-экранов).
Сожмите изображения до нужного качества. Для фотографий — 75-85%.
Конвертируйте в WebP или AVIF, где возможно.
Удалите метаданные (EXIF, GPS-координаты, информация о камере).

В HTML:

Задайте width и height на каждом теге <img>.
Добавьте loading="lazy" ко всем изображениям ниже сгиба.
Добавьте fetchpriority="high" к LCP-изображению.
Предзагрузите LCP-изображение через <link rel="preload">.
Используйте <picture> для современных форматов с фолбэками.

После деплоя:

Запустите Lighthouse или PageSpeed Insights. Проверьте LCP и CLS.
Посмотрите раздел "Возможности". Он отмечает изображения, которые можно уменьшить.
Тестируйте на мобильных. Мобильные соединения медленнее, поэтому оптимизация изображений там важнее.

Следование этому чек-листу будет держать ваши Core Web Vitals в зелёной зоне. Большинство сайтов видят снижение LCP на 1-3 секунды только за счёт оптимизации изображений.

Как тестировать и мониторить производительность изображений?

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

Google PageSpeed Insights даёт быстрый обзор. Вставьте любой URL и получите показатели LCP, INP и CLS для мобильных и десктопных. Также показывает реальные данные от пользователей Chrome, если они доступны.

Lighthouse (встроен в Chrome DevTools) запускает полный аудит. Отмечает слишком большие изображения, отсутствие lazy loading, изображения без размеров и в устаревших форматах. Запускайте в режиме инкогнито, чтобы расширения не влияли на результат.

Google Search Console показывает данные Core Web Vitals для всего сайта. Группирует URL по статусу: хорошо, требует улучшения или плохо. Проверяйте ежемесячно, чтобы вовремя заметить ухудшения.

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

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

Готовы исправить свои Core Web Vitals?

Изображения — самый большой груз на большинстве веб-страниц. Их оптимизация — самое эффективное изменение для Core Web Vitals.

Сжимайте изображения. Используйте современные форматы. Задавайте правильные размеры. Предзагружайте важное. Для неважного используйте lazy load.

CompressIMG берёт на себя этап сжатия. Загрузите изображения, выберите качество и скачайте оптимизированные файлы за секунды. Аккаунт не нужен. Начните с hero-изображений и двигайтесь дальше.

Ваш LCP-показатель скажет вам спасибо.