Фотографии для сайта: что снимать, где брать и как принимать

Фотографии делают последними, а решают они первыми

На странице услуги человек сначала видит изображение и только потом читает заголовок. Решение «то или не то» принимается раньше, чем прочитано первое слово.

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

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

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

Что снимать: минимальный набор

Список короче, чем кажется. Для большинства сайтов хватает четырёх категорий.

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

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

Люди. Не корпоративные портреты на белом фоне, а те, кто действительно работает, в своей обстановке. Один честный кадр команды стоит десяти стоковых улыбок.

И место. Офис, мастерская, склад, витрина. Это подтверждение существования, которое ничем не заменить.

Своя съёмка, стоки или генерация

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

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

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

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

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

Что нельзя брать, и почему это дорого

Короткий список того, что регулярно попадает на сайты и не должно.

Чужие фотографии из поиска. Кажется безобидным, пока не приходит требование от правообладателя. Проверка автоматизирована, ищут поиском по изображению, и находят.

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

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

И фотографии людей, у которых не спросили разрешения. Это отдельная тема, где право зависит от страны, но житейское правило простое: если человека можно узнать, нужно согласие.

Одинаковый кадр важнее красивого

Неочевидная вещь, которая портит больше сайтов, чем плохое качество съёмки.

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

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

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

И следите за уровнем света. Восемь кадров в одной тональности смотрятся как серия. Восемь кадров, снятых при разном освещении, смотрятся как случайная подборка.

Размер, вес и формат

Технические требования, которые стоит записать один раз и передавать фотографу вместе с задачей.

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

Вес файла. Ориентир для крупного изображения — сотня-другая килобайт после сжатия. Мы держали сто фотографий каталога в среднем по сто сорок семь килобайт; весь набор занял четырнадцать мегабайт.

Формат. Современные форматы дают меньший вес при том же качестве, и большинство движков умеют отдавать их автоматически, оставляя исходник в привычном формате. Отдельно готовить их вручную обычно не нужно.

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

Чужие картинки по ссылке ломаются

Отдельная ошибка, которая выглядит как экономия и оборачивается дырами на страницах.

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

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

Дело не только в надёжности. Чужой сервер отвечает медленнее вашего, вы не управляете его сжатием и не можете отдать современный формат.

Правило простое: всё, что показывается на вашем сайте, должно лежать на вашем сайте.

Альтернативный текст и имена файлов

Две мелочи, которые почти ничего не стоят и делаются почти никогда.

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

«Монтажник устанавливает вентиляционный короб в квартире» — альтернативный текст. «Вентиляция монтаж вентиляции установка вентиляции» — набор слов, который вредит.

Декоративным изображениям альтернативный текст не нужен вовсе: пустое значение атрибута правильнее, чем описание фоновой текстуры. Экранный чтец такое изображение просто пропустит.

Имена файлов — то же самое в миниатюре. Название вида montazh-ventilyacii-kvartira лучше, чем IMG_4821, и обходится в одну минуту при загрузке.

Где фотографии тормозят сайт

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

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

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

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

И четвёртое: одна огромная картинка на всех устройствах. Телефону не нужен кадр шириной в две тысячи пикселей, но он его получает, если сайт не отдаёт разные размеры под разные экраны.

Как принимать съёмку

Чек-лист, по которому мы принимаем присланные пакеты. Он короткий и отсекает почти всё.

Все кадры в одном соотношении сторон и без подгонки размытыми полосами.

Ни на одном кадре нет чужих логотипов, вывесок и узнаваемых знаков.

Ни на одном кадре нет выдуманных интерфейсов и нечитаемого текста.

Освещение и цветовая тональность согласуются между кадрами.

Есть исходники в полном размере, а не только подготовленные под сайт.

Пакет, не прошедший хотя бы один пункт, возвращается целиком. Принять половину и доснять остальное дешевле, чем разбирать, какие именно кадры испорчены.

Наш опыт: сто сорок изображений

Итоги одной работы, чтобы цифры были не абстрактными.

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

Сорок обложек для журнала. Задача была не «сделать красиво», а убрать повторы: одна и та же заглушка стояла на десятках материалов, и это выглядело хуже, чем отсутствие картинки.

Два пакета отклонены целиком. Первый — квадратные кадры, подогнанные под широкий формат размытыми полосами, плюс настоящие логотипы чужих сервисов. Второй — выдуманные интерфейсы поверх экранов устройств.

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