Постер видео как LCP: выбирайте качество по весу файла, а не по формату

Если на первом экране видео, то крупнейшим элементом — LCP — почти всегда становится его постер: картинка, которая показывается до старта ролика. И его вес напрямую попадает в оценку. Совет «сохраните постер в webp» звучит очевидно — но на наших постерах webp с обычными настройками оказался тяжелее jpg.

Это двадцать шестая часть цикла «PageSpeed без мифов».

webp не всегда легче

Формат и качество	Вес постеров
jpg	31–60 КБ
webp, качество 80	40–95 КБ
webp, качество 50	24–59 КБ

Webp на высоком качестве сохраняет мелкие детали и шум кадра, которые jpg с его настройками уже сгладил. Сравнивать форматы нужно по весу конкретных файлов, а не по репутации.

Подбирайте качество по тому, как постер показывается

Постер на первом экране редко виден «чисто»: поверх него обычно затемнение под текст, градиент, заголовок. Под затемнением в 50 % разница между качеством 80 и 50 не видна совсем — а вес падает. На одном сайте так постер-LCP похудел со 110 до 34 КБ.

Зернистый кадр: помогает только размер

Кадры из видео часто зернистые — шум съёмки, сжатие самого ролика. Шум плохо сжимается любым форматом. Мы пробовали:

• убрать шум перед сжатием — 109 КБ → 109 КБ, без эффекта;
• качество 30 — 109 → 83 КБ, и появляются заметные артефакты;
• уменьшить ширину до 720 px — 66 КБ, и на экране телефона разницы нет.

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

Safari и webp-постеры

Старые версии Safari не показывали webp в атрибуте poster тега video. Если постер выводится не атрибутом, а фоном слоя под видео (так часто делают ради затемнения и кадрирования), этого ограничения нет: фоном webp поддерживается шире. Но помните про минусы фона из двадцать пятой части — для постера первого экрана добавьте прелоад с высоким приоритетом.