Оптимизация изображений: размеры, форматы и alt

Определите, что изображение помогает увидеть: товар, этап действия, результат или декоративный фон. Уберите дубли, которые не добавляют информации. Затем проверьте фактический размер отображения, разрешение файла, сетевые запросы и элемент LCP.

Крупнейший видимый элемент не обязательно совпадает с самым тяжёлым файлом. Сдвиги макета также могут происходить по разным причинам, поэтому сначала измеряйте.

Нельзя заранее утверждать, что один формат всегда меньше другого. Сравните несколько вариантов на своих изображениях. Для деталей продукта чрезмерное сжатие может ухудшить возможность выбора.

CSS меняет отображаемый размер, но не обязательно размер скачанного файла. Подготовьте варианты под реальные места показа и используйте srcset вместе с корректным sizes. Учебный пример:

<img src="/images/product-800.jpg"
     srcset="/images/product-400.jpg 400w,
             /images/product-800.jpg 800w,
             /images/product-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     width="1200" height="800"
     alt="Настольный светильник с регулируемым шарниром">

Значения должны соответствовать макету. Браузер учитывает размер области и плотность пикселей. Указанные размеры задают соотношение сторон; адаптивные стили не должны его случайно нарушать.

Alt передаёт значимую информацию с учётом роли изображения. Для фотографии товара — видимые отличия; для изображения-ссылки — назначение перехода; для чистого декора — пустой alt="". Фиксированной нормы в 5–12 слов нет.

Подпись видна всем и может сообщать источник, дату или пояснение. Она не всегда заменяет alt. Сложный график требует доступных данных и объяснения рядом. Не помещайте единственный текст важных условий только в изображение. Не нужно утверждать, что поисковики вообще не распознают текст картинки: причина дублирования прежде всего в доступности и ясности содержания.

Картинки ниже видимой области можно загружать отложенно. Важное изображение первого экрана обычно должно загружаться без lazy loading; приоритет настраивают по измерениям. Подробнее — отложенная загрузка изображений.

Заранее резервируйте место в макете. Для главного изображения проверьте, не задерживают ли его скрипты, позднее обнаружение или неверный выбор источника.

Файл и страница должны быть доступны роботу. Google рекомендует стандартные HTML-элементы изображений, содержательные имена, alt и контекст. Image sitemap может помочь обнаружению; разметка и og:image могут передавать сведения о представлении страницы. Это не гарантирует включение в поиск.

Проверьте HTTP-ответы, запреты обхода, нестабильные адреса CDN и срок действия ссылок. Не закрывайте значимые изображения от робота случайным общим правилом.

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

Сравните LCP, сдвиги и первоначальную загрузку. Не приписывайте заранее уменьшение веса в разы или прохождение Core Web Vitals: эти результаты нужно измерить на конкретной странице.

Сохранены важные детали; изображения не растягиваются; alt и подписи соответствуют роли; нет лишних копий; загрузка первого экрана не задержана; адреса стабильны. Проверяйте несколько типов страниц, затем распространяйте настройки на общий шаблон. Подробная диагностика — скорость загрузки сайта.