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

Если ваш сайт грузится медленно — в 9 из 10 случаев виноваты изображения. По статистике Google, картинки составляют в среднем 50–60% от общего веса страницы. Неоптимизированные фотографии не только замедляют загрузку, но и напрямую влияют на позиции в поиске через метрики Core Web Vitals. В этой статье — полное руководство по оптимизации изображений с чек-листом в конце.

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

Представьте: посетитель открыл страницу вашего магазина. Браузер начинает загружать HTML, CSS, JavaScript — всё это занимает несколько сотен килобайт. Затем начинается загрузка изображений — и вот здесь счёт идёт на мегабайты. Фотография товара весом 3 МБ будет грузиться несколько секунд даже на хорошем мобильном интернете.

Исследования показывают, что 53% мобильных пользователей покидают сайт, если загрузка занимает более 3 секунд. Google учитывает скорость загрузки при ранжировании — и изображения напрямую влияют на это.

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

С 2021 года Google официально включил Core Web Vitals в алгоритм ранжирования. Три ключевые метрики — и две из них напрямую зависят от изображений:

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: адаптивные изображения

HTML предоставляет мощный инструмент для адаптивной загрузки — атрибуты 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 и Яндекс.Картинки — это дополнительный источник трафика.

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