Вопрос с собеседования · Frontend
Как оптимизировать изображения на сайте?
JuniorПроизводительность
Ещё спрашивают так:
- Что такое srcset и lazy loading?
- Какой формат картинок выбрать?
Коротко
Картинки — часто самая тяжёлая часть страницы. Приёмы: современные форматы (AVIF, WebP; SVG для иконок), размер под экран через srcset и sizes (телефону не нужна картинка 3000px), сжатие, loading="lazy" для картинок ниже первого экрана, width и height (или aspect-ratio), чтобы не было сдвигов вёрстки (CLS), а главной картинке первого экрана — fetchpriority="high" и без lazy (это LCP). Раздача через CDN с кэшированием.
- Главную картинку нельзя делать ленивой — LCP ухудшится
- picture — разные форматы с запасным вариантом
- Сервис или сборка генерирует варианты размеров автоматически
Подробно
<img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px" width="800" height="450" fetchpriority="high" alt="…">Что хотят услышать
- Форматы и сжатие.
- srcset и sizes.
- lazy для нижних, приоритет для главной.
- Размеры против CLS.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✓Современные форматы, srcset, lazy ниже экрана, width и height против сдвигов, приоритет главной
- ✗Ставить loading="lazy" на все изображения, включая главное на первом экране, — так быстрее всего
- ✗Одна картинка 3000px для всех устройств — лучший вариант
- ✗Размеры изображения в разметке не влияют на CLS
Связанные вопросы
Партнёр платформы
Разбор собеседования
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.