Hero-блок: как выбрать фото со стока и не убить скорость сайта
Первый экран продаёт, но тяжёлый баннер бьёт по LCP. Форматы, размеры, lazy-load и когда лучше вектор или градиент вместо фото.
Hero — лицо лендинга и главной магазина. Дизайнер хочет крупный эмоциональный кадр; разработчик смотрит на Core Web Vitals. Компромисс возможен, если заранее договориться о технике, а не «вставим потом оптимизированную».
Для подбора кадров используем бесплатные стоки из нашей подборки — Gratisography для ярких промо, Shopify Burst и PxHere для e-commerce, ISO Republic для широких панорам.
Техника загрузки
Исходник со стока — часто 4000+ px; на сайт отдаём WebP/AVIF 1600–1920 px по ширине контейнера, 2× только для retina в `srcset`.
LCP-изображение hero не lazy: `fetchpriority="high"`, явные `width` и `height`, чтобы не было скачка вёрстки.
Тёмный градиент поверх фото улучшает читаемость заголовка и позволяет взять чуть более сжатый файл без потери смысла.
Когда фото не нужно
B2B-сервисы и SaaS часто выигрывают от иллюстрации, 3D-мокапа интерфейса или чистой типографики — меньше вес и проще локализация.
На внутренних посадочных SEO иногда достаточно схемы или иконок: страница быстрее, а запрос закрывается текстом и структурой — см. рубрику «SEO и трафик».