Картинки для сайта и лендинга: где какие работают

Кратко

На странице не одна картинка, а пять-шесть мест с разными требованиями. Первому экрану нужен кадр с воздухом под заголовок и быстрым весом, блоку продукта — предметная съёмка, блоку доверия — люди, фону — спокойная поверхность, превью ссылки — отдельный горизонтальный кадр. Подбирать их одинаково нельзя: у каждого места свой размер, своя пропорция и своя цена ошибки.

Лендинг обычно собирают так: находят одну эффектную картинку на первый экран, а остальные добирают «чем-нибудь похожим». Через месяц страница выглядит как коллаж из разных источников, грузится дольше, чем нужно, а в мессенджере разворачивается серым прямоугольником. Разберём страницу по местам и посмотрим, что требуется в каждом.

Какие места на странице вообще требуют картинки?

Их обычно шесть, и они не взаимозаменяемы.

• Первый экран. Самая дорогая картинка страницы: её видят все, она задаёт тон и почти всегда оказывается самым тяжёлым элементом загрузки.
• Блок продукта. Показывает вещь или интерфейс. Требует честности: здесь читатель сверяет обещание с видом.
• Блок доверия. Люди, команда, процесс, клиенты. Работает узнаванием, а не красотой.
• Фон и разделители. Спокойные поверхности между смысловыми блоками; их задача — не мешать.
• Карточки в списках. Мелкие кадры, которые читаются на размере с монету.
• Превью ссылки. Кадр, который увидят в мессенджере и соцсети раньше самой страницы.

Каким должен быть кадр на первом экране?

Спокойным по краям и быстрым по весу. Первый экран почти всегда содержит крупнейший элемент страницы, а по нему измеряется Largest Contentful Paint — метрика, которую Google рекомендует держать в пределах 2,5 секунды у 75-го процентиля загрузок (web.dev). Тяжёлая картинка на первом экране — самый частый способ этот порог перешагнуть.

Отсюда практические требования к кадру:

• Воздух под заголовок. Ровный участок без важных деталей, куда ляжет текст и кнопка.
• Простая композиция. Один смысловой центр: сложный кадр на первом экране конкурирует с заголовком и проигрывает оба сообщения.
• Терпимость к обрезке. На мобильном экране от горизонтального кадра остаётся середина, и герой обязан в ней уцелеть.
• Возможность сжаться. Кадры с мягкими градиентами и малым числом мелких деталей весят кратно меньше пёстрых при одинаковом качестве.

Кадр во всю ширину или картинка в колонке?

Оба решения рабочие, и выбирать стоит по тому, что важнее в блоке — атмосфера или объяснение.

Что ставить в блоки продукта, услуг и доверия?

Здесь картинка отвечает на вопрос «что я получу» и «кому это доверить». Абстракция в таких блоках работает хуже конкретики.

Мокапы и шаблоны

Мокапы и предметные сцены: показать приложение, упаковку, печатный материал так, будто они уже существуют.

Смотреть работыБизнес

Работа, переговоры, команда — то, чем закрывают блок «о компании» и страницу услуги.

Смотреть работыИнтерьер

Помещения и рабочие пространства: помогают там, где услуга оказывается офлайн — от студии до клиники.

Смотреть работы

Для агентства недвижимости логика та же, только кадры берут из раздела недвижимости, а под разделители и фоны блоков подходят абстрактные поверхности — они не спорят с текстом и легко подгоняются по цвету. Мелкую графику для списков преимуществ проще брать в разделе иконок, чем рисовать заново.

Как готовить файл, чтобы страница не потяжелела?

Порядок один и тот же для любого места на странице.

1. Обрежьте под слот

   Сначала кроп под пропорцию блока, потом всё остальное. Кадр, обрезанный браузером, всё равно грузится целиком — вы платите за пиксели, которых никто не увидит.

2. Задайте реальный размер

   Ширина картинки должна соответствовать ширине места показа с запасом на экраны с удвоенной плотностью, а не «на всякий случай в четыре тысячи пикселей».

3. Сожмите и сравните

   Сохраните в современном формате и посмотрите на кадр в масштабе показа рядом с исходником. Разница, невидимая в масштабе показа, — это чистая экономия.

4. Отложите нижние картинки

   Всё, что ниже первого экрана, грузится лениво. Кадр первого экрана, наоборот, лениво грузить нельзя: так вы своими руками замедлите главную метрику страницы.

5. Проверьте на телефоне

   Откройте страницу на мобильном экране и посмотрите, что осталось от каждого кадра после обрезки и сколько времени занял первый экран.

Что увидят в превью ссылки?

Отдельную картинку, которую вы задаёте тегом og:image. Meta рекомендует изображение не меньше 1200 × 630 пикселей, минимально допустимое — 200 × 200, файл не больше 8 МБ, а пропорцию советует держать близкой к 1.91:1, иначе кадр обрежут (документация Meta для разработчиков). Кадр меньше 600 × 315 показывается маленьким квадратом сбоку от ссылки — это и есть тот «серый прямоугольник», который портит рассылку.

Что писать в alt?

То, что видно на картинке, — коротко и по делу. Alt читают экранные дикторы и поисковые роботы; Google в рекомендациях по картинкам просит описательный текст вместо перечисления ключевых слов и указывает, что осмысленное имя файла и подпись рядом тоже помогают понять содержимое (Google Search Central).

Практическое правило: опишите кадр так, как описали бы его по телефону человеку, который принимает решение. «Бариста готовит кофе за стойкой» лучше, чем «кофе, кофейня, бариста, эспрессо, купить кофе».

Как собрать комплект на страницу, а не набор находок?

Смотрите на страницу целиком, а не на блок за блоком. Кадры одной страницы должны совпадать по трём признакам: температура света, точка съёмки и плотность деталей. Проще всего это получается, когда картинки взяты из одного задания или одного раздела каталога — тогда общая манера заложена ещё в брифе.

Как выбирать сам кадр и что проверять до покупки, подробно разобрано в статье как выбрать AI-изображение под проект. Если та же страница потом раскладывается на посты, пригодится статья про изображения для соцсетей, а если под неё запускают трафик — про креативы для рекламы.

Главное

• У страницы не одна картинка, а шесть мест с разными требованиями.
• Кадр первого экрана почти всегда решает скорость загрузки: он не грузится лениво и не бывает «на всякий случай большим».
• Пропорция задаётся слотом, а не исходником: обрезайте до загрузки, а не в браузере.
• Превью ссылки подбирается отдельно — по требованиям площадки, а не по вкусу.
• Alt описывает содержимое; декоративный фон остаётся без описания.

Сколько картинок нужно лендингу?

Столько, сколько на странице смысловых блоков, требующих показа: обычно от четырёх до восьми. Картинка без работы — лишний вес и лишний шум; блок без картинки там, где читателю нужно увидеть предмет, — потерянное объяснение.

Можно ли использовать один кадр и на первом экране, и в превью ссылки?

Можно, если он выдерживает обе пропорции и остаётся понятным в маленьком размере. Чаще выгоднее взять два кадра одной серии: у превью другой масштаб чтения.

Какой ширины должна быть картинка первого экрана?

Такой, какой ширины место показа, умноженной на плотность экрана, — и не больше. Универсального числа нет: у страницы с колонкой в 720 пикселей и у страницы с кадром во всю ширину ответы разные.

Что делать, если кадр красивый, но пёстрый?

Использовать его там, где поверх нет текста: блок продукта, галерея, разделитель. Для первого экрана нужен участок без деталей — либо другой кадр, либо тот же сюжет в более спокойной версии.

Нужно ли подписывать картинки на странице?

Подпись нужна там, где кадр несёт данные или требует пояснения: схема, сравнение, интерфейс. Декоративной иллюстрации подпись не нужна — она забирает внимание у заголовка.

Как понять, что картинки замедляют страницу?

Измерьте время появления самого крупного элемента на мобильном соединении и посмотрите, какой элемент им оказался. Если это картинка первого экрана — начинать оптимизацию нужно с неё, а не со скриптов.

Чем заменить фотографию, если продукта ещё не существует?

Мокапом или иллюстрацией процесса. Показывать несуществующий продукт фотореалистичным кадром рискованно: обещание, которое не совпадёт с реальностью, дороже отсутствующей картинки.