Обсудить проект
ПОЛЬЗА / КОНТЕНТ ДЛЯ САЙТА

Фото и видео для сайта: свои или стоковые

Сайт почти собран, тексты написаны, осталась мелочь - картинки. И вот тут проект встаёт на две недели. Заказчику некогда снимать, дизайнеру нужно чем-то заполнить блоки, и в макет уезжают улыбчивые люди со стока. Сайт выходит красивым и мёртвым. Разбираем, почему так происходит, что снимать в первую очередь, если время есть только на один день, и как готовить файлы, чтобы всё это не утопило скорость страницы.

Фото и видео для сайта: свои или стоковые

Почему стоки не продают

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

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

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

Особенно дорого это обходится в двух местах. Первое - первый экран: там картинка работает как обещание, и чужое лицо в этой роли обесценивает всё, что написано рядом. Второе - блоки «о нас», «наша команда», «наши работы»: если там стоят стоки, вы не просто не убедили, вы прямо соврали, и это считывается.

Значит ли это, что сток нельзя вообще? Нет. Он спокойно живёт там, где никто не претендует на документальность: фоновая текстура, абстрактная иллюстрация к статье в блоге, обложка новости, географическая или предметная подложка под форму. Правило простое: сток допустим там, где картинка украшает, и запрещён там, где картинка доказывает.

Что снимать в первую очередь

Самая частая ошибка - планировать съёмку как большой проект. «Вот наведём порядок в цехе, купим форму сотрудникам, дождёмся хорошего объекта, потом позовём фотографа». В этой логике съёмка не случается никогда, а сайт всё это время стоит с чужими картинками. Гораздо честнее собрать один рабочий день и снять по приоритету.

Первое - результат. То, что клиент покупает. Готовый объект, собранная кухня, отремонтированный автомобиль, тарелка, интерьер, напечатанный тираж. Это самые ценные кадры на сайте, потому что они одновременно и иллюстрация, и доказательство. Если время закончится после первого пункта, сайт уже будет живым.

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

Третье - люди. Не постановочный «коллектив на фоне стены», а нормальные рабочие портреты: человек за своим столом, мастер у своего оборудования, руководитель в своём кабинете. Портреты закрывают вопрос «с кем я буду разговаривать» и отлично ложатся в блок с кейсами и отзывами, где рядом с историей стоит лицо человека, который её вёл.

Четвёртое - место. Вход, вывеска, шоурум, склад, парковка, кабинет. Это работает на доверие и на локальные запросы: клиент из Воронежа хочет понимать, что вы физически здесь, а не «федеральная сеть» с виртуальным адресом.

Пятое - детали и фактуры. Материалы крупным планом, инструмент, документы, фирменная упаковка. Эти кадры почти не тратят времени на съёмке, зато потом ими закрывается половина пустых мест в вёрстке, и дизайнеру не приходится идти на сток.

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

Свои, стоки или нейросеть

Сегодня у визуала на сайте три источника, и спор «свои или стоковые» уже неполный - к нему добавились изображения, сгенерированные нейросетью. У каждого источника своя честная зона применения, и проблемы начинаются ровно тогда, когда его выносят за её пределы.

Своя съёмка

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

Сток

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

Нейросеть

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

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

Видео: где помогает, где мешает

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

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

Что реально смотрят. Короткие ролики по делу: как выглядит объект целиком, как собирается изделие, как отвечает специалист на частый вопрос, отзыв клиента своими словами. Ролик на несколько десятков секунд, поставленный рядом с тем блоком, где у человека возникает сомнение, работает лучше, чем один большой фильм про компанию, который висит в подвале.

Главная техническая ошибка - заливать видео файлом на свой хостинг и включать автоплей. Тяжёлый файл в фоне мгновенно роняет скорость загрузки и съедает мобильный трафик посетителя. Разумная схема: фоновые ролики - короткие, сжатые, без звука, с постером-картинкой на время загрузки; смысловые - на видеохостинге, с превью и запуском по клику. Про то, как это связано с общей производительностью, подробнее в статье о скорости загрузки сайта.

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

Как готовить файлы

Хороший визуал легко превращается в главный тормоз сайта. Фотограф отдаёт исходники по несколько мегабайт каждый, их без изменений заливают в галерею - и страница, которая на компьютере в офисе открывается мгновенно, на телефоне в дороге грузится непозволительно долго. Дальше человек уходит, и вся съёмка оказывается вложением в никуда.

Размер под задачу. Картинку не нужно грузить крупнее, чем место, где она стоит. Фон первого экрана - одна ширина, карточка в списке работ - другая, аватар в отзыве - третья. Отдавать одну и ту же трёхтысячепиксельную фотографию во все три места означает платить трафиком за то, чего пользователь не увидит.

Современные форматы. WebP и AVIF при том же качестве весят заметно меньше привычного JPEG, и их понимают все актуальные браузеры. Это самая дешёвая оптимизация из существующих: те же картинки, тот же вид, меньше вес.

Отложенная загрузка. Всё, что находится ниже первого экрана, должно грузиться лениво, по мере прокрутки. А вот главную картинку первого экрана, наоборот, лениво грузить не надо - иначе посетитель первую секунду смотрит в пустоту.

Альт-тексты. У каждой содержательной картинки должно быть текстовое описание. Это нужно и людям, у которых картинки не загрузились или которые пользуются скринридером, и поисковикам, которые иначе не понимают, что изображено. Описание пишется по-человечески: «бригада монтирует вентфасад на объекте в Воронеже», а не «фото1».

Порядок в исходниках. Отдельно от сайта храните оригиналы в понятной структуре по датам и объектам. Через год, когда понадобится обновить блок или собрать презентацию, это сэкономит вам день работы. Сайт живёт долго, а материал имеет свойство теряться на чьём-то старом ноутбуке.

Частые вопросы

Можно ли снимать для сайта на телефон?

Да, и это нормальный рабочий вариант. Современный смартфон при дневном свете даёт картинку, которой хватает для карточек работ, процесса и деталей. Ограничения начинаются в сложном свете, в тесных помещениях и в предметной съёмке, где нужен свет и штатив. Практичная схема - профессионально снять первый экран и ключевые кадры, а текущий поток работ снимать самим на телефон.

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

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

Что делать, если показывать физически нечего - услуга без продукта?

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

Можно ли брать фотографии у поставщика или производителя?

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

Съёмку заказывать отдельно или это делает студия сайтов?

По-разному. Часть студий работает только с предоставленным материалом, часть организует съёмку под проект. Важно договориться об этом на старте, до вёрстки: если контента нет, дизайнер вынужден придумывать блоки под воображаемые картинки, и потом их всё равно придётся переделывать под реальные.

Короткий вывод

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

Соберём сайт вокруг вашего материала

APST делает сайты в Воронеже с 2005 года и почти всегда начинает с вопроса, что у клиента есть из фото и видео. Покажем, каких кадров не хватает под ваши блоки, подскажем, что реально снять самим, а что стоит доверить съёмочной группе, и соберём страницу так, чтобы визуал работал, а не весил.

Обсудить проект