Какие форматы изображений использовать для веба
Что проверяют
Умеете ли вы выбирать формат под тип картинки и думать о весе страницы, а не просто перечислять расширения. Следующий вопрос обычно практический: как отдать современный формат так, чтобы старый браузер не остался без картинки, и как это связано с LCP.
Как отвечать
Делите изображения по характеру, а не по привычке:
- JPEG: фотографии и сложные градиенты, сжатие с потерями, без прозрачности. Прогрессивный JPEG показывает размытое превью до полной загрузки;
- PNG: без потерь, с альфа-каналом. Хорош для скриншотов и графики с чёткими краями, для фото получается в разы тяжелее;
- WebP: с потерями и без, прозрачность, анимация. Поддерживается всеми актуальными браузерами, разумный формат по умолчанию;
- AVIF: обычно легче WebP при том же качестве, особенно на фото, но кодируется медленнее. Тоже есть во всех современных браузерах;
- SVG: иконки, логотипы, иллюстрации. Весит мало, масштабируется без потерь, перекрашивается через
currentColor; - GIF: палитра до 256 цветов. Для анимации проигрывает видео: короткий ролик в
<video autoplay muted loop playsinline>весит в разы меньше.
Дальше расскажите, как это собирается на странице. Элемент <picture> с <source type="image/avif">, <source type="image/webp"> и фолбэком в <img> отдаёт лучший поддерживаемый формат. srcset и sizes дают телефону маленькую картинку вместо десктопной. Атрибуты width и height спасают от сдвигов макета, loading="lazy" подходит для картинок ниже первого экрана, а главному изображению лучше дать fetchpriority="high". На практике форматы генерирует сборка, компонент фреймворка вроде next/image или CDN с конвертацией на лету.
Где спотыкаются
Говорят, что WebP плохо поддерживается. Это давно не так, отказываться от него ради старых браузеров сейчас незачем.
Ставят loading="lazy" на картинку первого экрана. Браузер начинает грузить её позже, и LCP ухудшается.
Выгружают иконки в PNG высокого разрешения вместо SVG, а SVG от дизайнера не прогоняют через SVGO и оставляют в нём метаданные редактора.