Изображение должно быть достаточно чётким для своей роли и не тяжелее необходимого. Загрузка исходника шириной 5000 пикселей в карточку 600 пикселей расходует трафик, ухудшает скорость и может задерживать главный контент страницы.
Подберите размеры и формат
Экспортируйте изображение под максимальный размер отображения и подготовьте варианты для разных экранов. Браузер выбирает подходящий файл через srcset и sizes. WebP широко подходит для фотографий и графики; AVIF часто сжимает сильнее, но требует проверки качества и корректного резервного варианта. Для логотипов и простых иконок используйте SVG, если файл безопасен и не содержит лишнего кода.
Не существует универсального процента качества. Сравнивайте визуально на реальном размере. Фотография может хорошо выглядеть при сильном сжатии, а мелкий текст и интерфейсный скриншот — потерять читаемость.
Не ухудшайте LCP
Главное изображение первого экрана обычно не загружают лениво: браузеру нужно получить его быстро. Остальные картинки можно подключать через lazy loading. Задавайте width и height, чтобы страница зарезервировала место и не прыгала при загрузке.
Alt и имя файла
Alt описывает смысл изображения в контексте страницы. Если картинка декоративная, допустим пустой alt. Не перечисляйте ключевые слова. Имя schema-vnutrennej-perelinkovki.webp понятнее, чем IMG_7842.jpg, но само по себе не заменяет содержательного окружения.
| Тип | Рекомендация |
|---|---|
| Главное фото | приоритетная загрузка, точный размер |
| Фото в тексте | responsive‑варианты и lazy loading |
| Скриншот | контроль читаемости текста |
| Декор | пустой alt, если не несёт смысла |
Рабочий процесс
Храните оригинал отдельно, а на сайт загружайте оптимизированные версии. Проверяйте фактический размер файлов, мобильный экран, тёмную тему и ошибки 404. Image sitemap полезна крупным визуальным каталогам, но для обычного сайта важнее доступность изображений и корректные страницы.
FAQ
Какой вес изображения считать нормальным?
Ориентируйтесь на роль и качество. Большинство контентных изображений можно удержать в пределах сотен килобайт, но жёсткий лимит без учёта размера и детализации вреден.
Можно ли конвертировать всё в WebP автоматически?
Можно, если система сохраняет оригиналы и проверены прозрачность, качество и резервная выдача.
Alt влияет на поиск по картинкам?
Он помогает понять содержание и доступен экранным дикторам. Пишите описание для человека, а не набор запросов.