Оптимизация изображений для сайта: скорость загрузки и SEO

Изображения обычно весят больше всего на странице: по данным Google, они составляют в среднем 50–60% от общего веса. Неоптимизированные фотографии замедляют загрузку и напрямую влияют на позиции в поиске через метрики Core Web Vitals.

Почему изображения — главная причина медленного сайта

Откройте вкладку Network в DevTools на своём сайте. HTML, CSS и JavaScript вместе обычно весят несколько сотен килобайт. Изображения тянут на мегабайты: одна фотография товара весом 3 МБ грузится несколько секунд даже на быстром мобильном интернете.

По данным Google, 53% посетителей закрывают мобильную страницу, если она грузится дольше 3 секунд. Скорость загрузки входит в факторы ранжирования Google, и раз изображения — 50–60% веса страницы, их оптимизация даёт самый быстрый выигрыш.

Core Web Vitals и изображения

С 2021 года Google официально включил Core Web Vitals в алгоритм ранжирования. Метрик три: LCP, INP и CLS. Изображения напрямую влияют на две из них: LCP и CLS. Разберём обе.

LCP — Largest Contentful Paint

Время до отрисовки самого крупного элемента на экране. Чаще всего этот элемент — главное изображение страницы. Хороший показатель: менее 2,5 секунды. Если hero-изображение весит 2 МБ — LCP будет плохим. Сожмите его до 200–300 КБ — LCP улучшится мгновенно.

CLS — Cumulative Layout Shift

Насколько элементы «прыгают» при загрузке. Если изображение загружается без указанных размеров, браузер сначала не резервирует под него место — и после загрузки весь контент «прыгает» вниз. Решение: всегда указывайте атрибуты width и height для тегов <img>.

Выбор правильного формата

Выбор формата — первый и самый важный шаг оптимизации. Неправильный формат может означать в разы больший размер файла.

Тип контента	Лучший формат	Почему
Фотографии	WebP → JPEG	WebP на 25–35% меньше JPEG при том же качестве
Логотипы, иконки	SVG → WebP/PNG	SVG масштабируется без потери качества
Скриншоты интерфейсов	WebP → PNG	Чёткие края, без артефактов JPEG
Анимация	WebP → видео (MP4)	WebP-анимация в 2–3 раза легче GIF
Иллюстрации с прозрачностью	SVG → WebP/PNG	Сохраняется альфа-канал

Оптимальные размеры: не грузите то, что не показываете

Вторая по важности ошибка — загрузка изображений в слишком высоком разрешении. Если фотография отображается шириной 800 пикселей, нет никакого смысла загружать файл 4000×3000. Браузер всё равно масштабирует его до 800px — это лишние данные, которые скачиваются и сразу выбрасываются.

Оптимальные ширины для различных элементов сайта:

• Hero-изображение во всю ширину: 1920px (desktop), 768px (mobile)
• Фото в карточке товара: 600–800px
• Аватар или маленькое превью: 100–200px
• Изображение в блоге (колонка текста): 740–900px

srcset и sizes: адаптивные изображения

Вы можете задать несколько вариантов изображения через атрибуты srcset и sizes, браузер сам выберет подходящий размер под экран пользователя:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Описание фото"
  width="800" height="600"
  loading="lazy"
/>

Браузер с маленьким экраном загрузит photo-400.jpg, с большим — photo-1200.jpg. Пользователи на мобильных телефонах не скачивают лишние данные.

Lazy loading: не грузить то, что не видно

Изображения, которые находятся ниже видимой области экрана (below the fold), не нужно загружать сразу. Браузеры поддерживают нативный lazy loading через атрибут loading="lazy":

<img src="photo.jpg" alt="Фото" loading="lazy" />

Один атрибут может снизить время первой загрузки страницы на 30–50%, если на странице много изображений. Важно: не применяйте lazy loading к изображениям в верхней части страницы (above the fold), потому что они должны загружаться сразу для хорошего LCP.

Сжатие: оптимальный уровень качества

Уровень качества при сжатии определяет соотношение размера файла и визуальных потерь: чем ниже процент, тем меньше файл и заметнее артефакты.

• 90–100% качество — максимальное качество, минимальное сжатие. Для архивного хранения, полиграфии.
• 80–85% качество — отличный баланс. Разница с оригиналом едва заметна, файл на 40–60% меньше.
• 70–80% качество — хорошо для веба. Небольшие артефакты заметны лишь при 100% зуме.
• 60–70% качество — для thumbnails и превью, где важна скорость, не детали.
• Ниже 60% — только для иконок или изображений, где качество не критично.

Для большинства сайтов оптимально 80% при JPEG/WebP. Это снижает размер файла в 2–3 раза по сравнению с оригиналом без заметной потери качества на экране.

alt-текст и SEO: зачем описывать изображения

Поисковые системы не «видят» изображения — они читают текст. Атрибут alt — это описание изображения для поисковиков и пользователей с нарушением зрения.

• Плохо: alt="img1.jpg"
• Плохо: alt="фото фото фото" (переспам)
• Хорошо: alt="Синие кроссовки Nike Air Max 270 мужские"

Хорошо написанные alt-тексты дополнительно помогают с ранжированием в Google Images и Яндекс.Картинки — это дополнительный источник трафика.

Чек-лист: перед публикацией каждого изображения