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

Изображения — один из главных «пожирателей» скорости загрузки сайта. По данным HTTP Archive, на них приходится больше 50% веса средней веб-страницы. При этом большинство сайтов до сих пор не используют даже базовые техники оптимизации. Разбираемся, как исправить это за несколько шагов.

• • Скорость загрузки — меньший вес файлов = быстрее рендеринг страницы
• • SEO-позиции — Google оценивает LCP (Largest Contentful Paint), в котором изображения играют ключевую роль
• • Конверсия — каждая секунда задержки снижает конверсию в среднем на 7%
• • Доступность — корректные alt-теги делают сайт понятным для скринридеров и поисковых роботов
• • Трафик из Google и Яндекс Картинок — правильно оформленные изображения попадают в поиск по картинкам

Alt-теги: как писать правильно

Атрибут alt (альтернативный текст) — это текстовое описание изображения. Его видят поисковые роботы, скринридеры для незрячих пользователей, а также браузеры, когда картинка не загрузилась.

Правила написания alt-текста

1. Описывайте содержимое, а не настроение. Плохо: «красивое фото». Хорошо: «Деревянный стол в скандинавском стиле с белыми ножками».
2. Включайте ключевые слова органично. Не надо: «купить стол стол деревянный стол». Правильно: «Деревянный обеденный стол из массива дуба, 160×80 см».
3. Длина — до 125 символов. Скринридеры обрезают текст после этого порога.
4. Не начинайте с «Изображение…» или «Фото…». Поисковики и так знают, что это картинка.
5. Декоративные изображения — пустой alt. Разделители, фоны, иконки-украшения должны иметь alt=»», чтобы скринридер их пропустил.
6. Для функциональных изображений описывайте действие. Кнопка-иконка «поиск» → alt=»Поиск по сайту».

Хороший alt-текст — это то, что вы бы сказали по телефону человеку, который не видит экран, но должен понять смысл изображения.

Форматы изображений: что выбрать

Выбор формата — это баланс между качеством, весом файла и поддержкой браузерами.

Рекомендуемая стратегия выбора формата

• • Фотографии и сложные изображения → WebP (основной) + JPEG (fallback для старых браузеров)
• • Изображения с прозрачностью → WebP (основной) + PNG (fallback)
• • Иконки и логотипы → SVG (масштабируется без потерь)
• • Анимации → WebP-анимация или короткое видео MP4 (вместо GIF)
• • Максимальная оптимизация → AVIF + WebP + JPEG через тег 

Такая конструкция позволяет браузеру самому выбрать лучший поддерживаемый формат — от самого эффективного (AVIF) до универсального (JPEG).

Оптимизация веса файлов

Даже правильный формат не спасёт, если файл весит 5 МБ. Вот комплексный подход к снижению веса изображений без потери видимого качества.

1. Задайте правильный размер

Самая распространённая ошибка — загружать изображение 3000×2000 пикселей туда, где оно отображается в 400×300. Браузер всё равно скачивает оригинал. Правило простое: размер файла должен соответствовать максимальному размеру отображения с учётом retina-экранов (умножьте на 2).

2. Применяйте сжатие

• • С потерями (lossy): качество 75–85% для JPEG/WebP — визуально неотличимо от оригинала, но вес меньше в 2–4 раза
• • Без потерь (lossless): для PNG и SVG — убирает метаданные и оптимизирует структуру файла
• • Инструмент: Squoosh (браузерный, бесплатный)

3. Удалите метаданные

EXIF-данные (GPS-координаты, модель камеры, дата съёмки) могут добавлять 20–50 КБ к каждому фото. Для веба они бесполезны — удаляйте их при загрузке. Большинство CMS делают это автоматически, но лучше проверить.

4. Внедрите lazy loading

Атрибут loading=»lazy» говорит браузеру загружать изображение только когда оно появляется в области видимости. Это сокращает начальный вес страницы и ускоряет первую отрисовку.

Важно: не ставьте loading=»lazy» на изображения в первом экране (above the fold) — это замедлит LCP и ухудшит Core Web Vitals.

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

Атрибут srcset позволяет браузеру выбрать подходящий размер изображения в зависимости от экрана устройства. Мобильный пользователь скачает маленькую версию, владелец 4K-монитора — большую.

6. Всегда указывайте width и height

Атрибуты width и height в теге  позволяют браузеру заранее зарезервировать место под изображение. Это предотвращает CLS (Cumulative Layout Shift) — «прыжки» контента при загрузке, за которые Google штрафует в Core Web Vitals.

Оптимизация изображений — это не разовая задача, а процесс, который стоит встроить в рабочий процесс публикации. Правильные форматы, осмысленные alt-теги, сжатие и lazy loading вместе дают ощутимый прирост скорости сайта, улучшают позиции в поиске и снижают нагрузку на сервер. Начните с аудита текущих изображений через Google PageSpeed Insights — он покажет, где потери наибольшие.

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