Мы ведём много сайтов: следим, чтобы с технической стороны всё было хорошо, размещаем новый контент и так далее. И бывает, что клиент пишет: «Появились свежие фото, высылаю — добавьте на сайт». А мы: «Лучше переделать. Если размещать эти, то поломается либо вёрстка, либо идея фотографий». При этом снимки качественные: резкие, сочные, сделанные на хороший телефон или камеру. Проблема в том, что все они вертикальные. Мало того, часть очевидно снята для соцсетей, где человек или предмет занимают весь кадр снизу доверху.
Объясняем, какого подхода к кадру требует сайт, и как снимать контент, чтобы он выглядел аккуратно на любых устройствах.
Почему у сайтов горизонтальная логика
Основная сетка большинства сайтов спроектирована под мониторы компьютеров и ноутбуков (пропорции 16:9 или 16:10). Все базовые элементы веб-страницы строятся горизонтальными полосами: баннеры на первом экране, карточки услуг в три-четыре колонки, блоки «О компании», галереи преимуществ.
Когда в горизонтальный блок загружают вертикальное фото, CMS пытается как-то выйти из положения. Вариантов обычно два:
- Автоматическая обрезка. Картинка заполняет ширину блока, но срезается сверху и снизу. В итоге главный объект кадра лишается головы, ног или важного контекста.
- Вставка без обрезки. Фото остаётся вертикальным, но в строке из нескольких колонок оно превращается в узкую «башню». Растягиваясь вверх и вниз, оно ломает единую линию страницы и давит на расположенный рядом текст.
Но ведь 70–80% заходят на сайты со смартфонов
Это самый частый аргумент, и на первый взгляд он кажется логичным: экран телефона вертикальный, значит, и фото должны быть такими же.
Но вот что важно учитывать:
В 90% проектов на стандартных CMS (WordPress, Битрикс, Tilda и др.) под каждый блок загружается один исходный файл. Сайт адаптивный: система сама перестраивает колонки в одну линию под мобильный экран, сжимает шрифты и масштабирует изображение. Но фотография остаётся одной и той же.
- Горизонтальное фото на смартфоне пропорционально уменьшается по ширине экрана. Оно занимает своё аккуратное место над заголовком или текстом новости, не деформируется и не закрывает собой весь первый экран.
- Вертикальное фото (особенно формата 9:16) на смартфоне занимает экран целиком. Чтобы добраться до сути услуги, описания или кнопки заявки, посетителю приходится долго листать вниз. А на мониторе компьютера то же самое фото выглядит неуклюже.
Поэтому для сайта оптимально выбирать пропорции 4:3 или 3:2. Они достаточно широкие для экрана компьютера и при этом не превращаются в слишком узкую полоску на телефоне.
Где вертикальный формат на сайте уместен
Вертикальные снимки — нормальный инструмент, если они используются в правильном контексте:
- Портреты специалистов. Фото на карточках врачей, юристов, тренеров или ключевых сотрудников в разделе, посвящённом команде.
- Каталоги определенных товаров. Одежда, обувь, аксессуары на моделях — здесь пользователи привыкли к вертикальным карточкам, как на маркетплейсах.
- Галереи свободного типа. Когда интерфейс изначально спроектирован под карточки разной высоты (как в Pinterest).
Где вертикальные фото почти гарантированно всё испортят
- Главный баннер и слайдер первого экрана. Горизонтальная обрезка неизбежна, и ключевой объект почти наверняка будет срезан.
- Ряды карточек (услуги, преимущества, кейсы). Если в строке три блока, а фото разные по пропорциям, сетка станет «рваной», а кнопки «Купить» или «Подробнее» разбегутся по разной высоте.
- Превью статей и новостей. Блог выглядит аккуратно только тогда, когда все обложки приведены к единой пропорции.
- Превью для ссылок (Open Graph). Когда ссылкой на вашу статью делятся в Telegram, WhatsApp или соцсетях, мессенджеры генерируют горизонтальную плашку. Вертикальное фото там будет обрезано случайным образом.
- Рекомендательные системы поисковиков. Например, для попадания в блоки рекомендаций Google Discover поисковик прямо требует горизонтальные изображения (шириной от 1200 px).
Отдельная боль — формат сторис (9:16)
Снимки, сделанные для Reels, Stories или клипов, практически непригодны для классических блоков сайта.
В них объект часто занимает 90% вертикали. Если такое изображение нужно поместить в адаптивный контейнер статьи или баннера, обрезка уничтожает композицию: в кадре остаётся живот, воротник или кусок стены, а лица нет.
Вертикальный контент для соцсетей хорош в соцсетях. Для сайта его использовать не стоит.
Памятка для съемки: как подготовить фото для сайта
Если вы планируете фотосессию или сами фотографируете рабочий процесс, производство, товары или команду, сохраните эти простые правила.
- Держите камеру или телефон горизонтально. Если снимаете на смартфон, проверьте настройки камеры: выбирайте пропорции 4:3 или 1:1, а не режим «во весь экран» (16:9).
- Оставляйте «воздух» вокруг главного объекта. Ключевой объект (человек, товар, рабочий процесс) должен быть по центру и занимать около 60–70% кадра. Сверху, снизу и по бокам должно оставаться свободное пространство. При адаптации верстки сайт срезает именно края — свободный фон можно срезать безболезненно, а вот руки или лицо вернуть не получится.
- Делайте дубли. Нужен кадр и для соцсетей, и для сайта? Сделайте два отдельных снимка: один вертикальный в полный рост, второй — горизонтальный с запасом по бокам.
- Не сжимайте снимки перед отправкой разработчикам. Отправляйте оригиналы через облачные диски (Google Диск, Яндекс Диск). Мессенджеры без режима отправки «файлом» сжимают картинки и убирают резкость.
- Если есть только вертикальный кадр: не пытайтесь натянуть его на баннер. Лучше использовать его внутри статьи с выравниванием по левому или правому краю, обтекая текстом, либо разместить в портретной карточке.
И всегда заранее договоривайтесь с тем, кто ведёт сайт, какой формат и размер фото нужен для разных разделов. Это занимает пять минут, но избавляет от долгих правок потом.