Главная · Каталог задач · Оптимизация изображений сайта

Готовый сценарий

Оптимизация изображений сайта

Одна картинка для всех экранов заставляет телефон скачивать широкую фотографию для маленькой карточки. Модель рассчитает набор размеров, соберёт srcset и sizes по реальной сетке, задаст width и height против сдвига макета. Главное изображение получит приоритет, а ниже первого экрана останется ленивым.

Попробуйте прямо здесь Отвечает Gemma 3 12B — модель подобрал сервис

Открыть в полном чате

  • Доступ без VPN
  • Русский интерфейс
  • Оплата рублями по факту

Зачем

Зачем это нужно

01

Отдаёт браузеру несколько размеров вместо одной максимальной копии

02

Резервирует пропорции до загрузки и предотвращает скачок контента

03

Не применяет lazy loading к главному изображению, от которого зависит LCP

Вопросы

Частые вопросы

Какой формат выбрать?

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

Как понять значения sizes?

Они описывают фактическую ширину элемента в макете при разных viewport, а не ширину исходной картинки. Браузер использует это число для выбора кандидата из srcset. Модель переведёт ваши CSS-брейкпоинты в выражение и проверит в DevTools, какой файл выбирается на типовых экранах.

Почему lazy loading ухудшил LCP?

Главное изображение начали загружать поздно, только после разбора разметки и решения о видимости. Для LCP-элемента нужна обычная ранняя загрузка и иногда повышенный приоритет. Ленивый режим оставляют контенту ниже первого экрана. Модель определит роль каждого изображения по трассе, а не по порядку файла.

Рядом

Дальше — весь каталог задач: поиск по названию, темы и фильтры.

Нужно больше

Весь Енотик — в одном окне

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