Оптимизация изображений для сайта: форматы, вес, alt и ленивая загрузка

Оптимизация изображений для сайта — работа, которая влияет одновременно на скорость, позиции и поведение пользователей. Картинки часто занимают больше половины веса страницы, а между тем их несложно привести в порядок: выбрать формат, сжать, задать размеры, подписать. Разберём последовательность действий, которая снижает вес страницы без потери качества.

Почему изображения стали частью внутренней оптимизации

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

Форматы: что и когда использовать

• WebP — универсальный выбор для фотографий и графики: качество сравнимо с JPEG при заметно меньшем весе.
• AVIF — ещё компактнее, но требует проверки поддержки и корректного фолбэка.
• JPEG — безопасный вариант, если нужна максимальная совместимость.
• PNG — для изображений с прозрачностью и простых схем; для фото он избыточен по весу.
• SVG — для иконок и логотипов: масштабируется без потерь и весит немного.

Практическая схема: фотографии — в WebP с резервным JPEG, иконки — в SVG, схемы — в SVG или PNG, скриншоты интерфейсов — в PNG при малом размере или WebP при большом.

Сжатие и размеры

Первое правило: не загружать на сайт снимок 4000 пикселей шириной, если он отображается в блоке шириной 800. Ориентируйтесь на максимальную ширину контейнера, умноженную на два для экранов с высокой плотностью пикселей.

Второе: сжимайте изображения и контролируйте качество глазами. Для фотографий обычно достаточно качества 75–85% — разница незаметна, а вес падает в разы. Для графики и схем следите, чтобы не появились артефакты вокруг линий и текста.

Адаптивность через srcset

Атрибут srcset позволяет отдавать разные версии изображения под разные экраны: телефон получает лёгкий файл, монитор — более детальный. В сочетании с атрибутом sizes это снимает необходимость компромисса между качеством и скоростью.

Alt-текст: как писать полезно

Alt описывает содержание изображения словами. Он нужен по двум причинам: поиск понимает, что на картинке, а незрячие пользователи получают описание. Пишите по существу: «Схема перелинковки кластера статей», а не «картинка1».

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

Имена файлов

Имя файла — тоже сигнал. Латиница через дефис, по смыслу: perelinkovka-klastera.webp лучше, чем IMG_2043.jpg. Служебные префиксы и случайные наборы символов не несут пользы.

Ленивая загрузка и стабильность вёрстки

Ленивая загрузка откладывает загрузку изображений, которые находятся за пределами экрана. Это ускоряет появление первого экрана. Важно: изображения на первом экране грузить лениво не нужно — иначе пользователь увидит пустой блок.

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

Оформление внутри текста

• Изображение ставится рядом с разделом, который иллюстрирует, а не в самое начало любой ценой.
• Подпись под рисунком помогает понять контекст и добавляет текстового содержания блоку.
• Логотипы, скриншоты и чужие иллюстрации используйте в рамках прав: указывайте источник, если это требуется.
• Для интерфейсных скриншотов следите, чтобы важные элементы были видны на мобильном экране.

Галереи, инфографика и карточки товаров

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

Инфографику и схемы удобнее собирать в векторном формате: она остаётся чёткой на любом экране и весит немного. Если в схеме есть текст, продублируйте ключевые надписи в alt или подписи — иначе смысл потеряется при отключённых изображениях.

Хранение и раздача

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

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

• Формат подобран: WebP или AVIF для фото, SVG для иконок и логотипов.
• Вес сжат, качество проверено визуально.
• Размеры файлов соответствуют отображению, настроены адаптивные версии.
• Alt-тексты заполнены для смысловых картинок и пусты для декоративных.
• Имена файлов осмысленные, латиницей, через дефис.
• Зарезервировано место под изображения, нет сдвигов вёрстки.
• Ленивая загрузка включена для всего, что ниже первого экрана.
• Неиспользуемые файлы удалены из медиатеки.

Заключение

Оптимизация изображений для сайта — это не только про скорость. Аккуратные форматы, продуманные размеры, честные alt-тексты и стабильная вёрстка улучшают поведенческие метрики и добавляют страницам трафик из поиска по картинкам. Работу стоит включить в регламент публикации: подготовить изображения заранее проще, чем переделывать потом весь архив.