Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

Hero-блок: как выбрать фото со стока и не убить скорость сайта

Первый экран продаёт, но тяжёлый баннер бьёт по LCP. Форматы, размеры, lazy-load и когда лучше вектор или градиент вместо фото.

Изображение статьи: Hero-блок: как выбрать фото со стока и не убить скорость сайта

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

#дизайн#производительность#стоки#веб

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.