Зачем оптимизировать изображения
Тяжелые изображения замедляют LCP, пустые alt ухудшают доступность и контекст, а хаотичные файлы мешают масштабировать каталог. Для услуг изображения усиливают доверие, для ecommerce помогают выбрать товар, для статей объясняют сложные шаги.
Базовый чек-лист изображений
- Сжимать изображения до разумного веса без заметной потери качества.
- Использовать WebP или AVIF там, где это поддерживает инфраструктура.
- Задавать width и height, чтобы не было скачков CLS.
- Писать alt для смысловых изображений, а не для декора.
- Не загружать hero и ключевые изображения лениво, если они нужны в первом экране.
Как писать alt
Alt должен описывать изображение в контексте страницы. Для товара - что на фото и важная характеристика. Для схемы - что она объясняет. Для декоративных элементов alt можно оставить пустым, чтобы не засорять восприятие.
Как изображения ломают скорость
Большой heroУхудшает LCP, особенно на мобильных.
Нет размеровВызывает сдвиги макета и ухудшает CLS.
Слишком много превьюУвеличивает количество запросов и вес страницы.
Неверный lazy loadingЗадерживает важное изображение первого экрана.
Как проверить изображения
Используйте проверку изображений ROI SEO, PageSpeed Insights и ручной просмотр ключевых шаблонов: главная, услуга, категория, карточка товара, статья. Важно проверять не только размер файла, но и роль изображения на странице.