Как оптимизировать загрузку изображений в вебе
Что проверяют
Знаете ли вы, как изображения влияют на Core Web Vitals, и можете ли назвать конкретные атрибуты и форматы, а не общие слова про сжатие. Следом обычно спрашивают, почему главную картинку первого экрана нельзя грузить лениво.
Как отвечать
Стройте ответ вокруг трёх целей: меньше байт, правильный размер, правильный момент загрузки.
- формат: AVIF и WebP при сопоставимом качестве весят заметно меньше JPEG и PNG. Через
<picture>и<source type="image/avif">отдают современный формат с запасным JPEG. Иконки и логотипы лучше в SVG, прогнанном через SVGO; - адаптивный размер:
srcsetс дескрипторами ширины и атрибутsizes, чтобы телефон не качал картинку для 4K-монитора. Безsizesбраузер считает, что изображение занимает всю ширину окна; - размеры в разметке: атрибуты
widthиheightили CSSaspect-ratioрезервируют место, и страница не прыгает при загрузке. Это напрямую влияет на CLS; - ленивая загрузка: нативный
loading="lazy"для всего ниже первого экрана. СвойIntersectionObserverдля этого сейчас нужен только в особых сценариях; - приоритет: картинке, которая станет LCP, ставят
fetchpriority="high", а если она задана в CSS, добавляют<link rel="preload" as="image">; - доставка: CDN с ресайзом на лету, имена файлов с хэшем и
Cache-Control: public, max-age=31536000, immutable.
Упомяните, что фреймворки берут часть работы на себя: next/image и Nuxt Image генерируют srcset, умеют конвертировать форматы и включают ленивую загрузку. Результат проверяют в Lighthouse или PageSpeed Insights: там видно, какой элемент стал LCP и сколько байт можно сэкономить.
Где спотыкаются
Ставят loading="lazy" всем картинкам подряд, включая баннер первого экрана. Браузер откладывает его загрузку, и LCP заметно ухудшается.
Сжимают файл, но отдают одну версию шириной 3000 пикселей на все устройства. Экономия от формата теряется на лишних пикселях.
Называют WebP форматом «без потери качества». У него есть оба режима, и основной выигрыш в весе дают как раз потери, просто малозаметные.