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 и трафик».
