Отдаёт браузеру несколько размеров вместо одной максимальной копии
Зачем
Зачем это нужно
Резервирует пропорции до загрузки и предотвращает скачок контента
Не применяет lazy loading к главному изображению, от которого зависит LCP
Вопросы
Частые вопросы
Какой формат выбрать?
Фотографии обычно выигрывают от современных сжатых форматов, иллюстрации с прозрачностью требуют отдельной оценки, а простые иконки часто лучше как SVG. Модель сравнит качество на нескольких размерах. Нельзя выбирать формат только по расширению: реальный вес и визуальные артефакты проверяют на исходниках.
Как понять значения sizes?
Они описывают фактическую ширину элемента в макете при разных viewport, а не ширину исходной картинки. Браузер использует это число для выбора кандидата из srcset. Модель переведёт ваши CSS-брейкпоинты в выражение и проверит в DevTools, какой файл выбирается на типовых экранах.
Почему lazy loading ухудшил LCP?
Главное изображение начали загружать поздно, только после разбора разметки и решения о видимости. Для LCP-элемента нужна обычная ранняя загрузка и иногда повышенный приоритет. Ленивый режим оставляют контенту ниже первого экрана. Модель определит роль каждого изображения по трассе, а не по порядку файла.
Рядом
Соседние страницы каталога
Дальше — весь каталог задач: поиск по названию, темы и фильтры.