Фотографии и иллюстрации на сайте: как выбрать

Зачем сайту изображения и что они должны делать

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

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

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

Собственная съёмка или фотостоки

Это главный выбор, который предстоит сделать.

Когда без собственной съёмки не обойтись:

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

Здесь сток не просто хуже, он вреден. Человек, который увидел красивый стоковый интерьер в разделе «Наши работы», а потом узнал его на сайте другой компании, больше не поверит ни одному вашему слову.

Когда фотостоки уместны:

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

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

Как подготовить собственную фотосъёмку

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

1. Составьте список кадров. Опирайтесь на прототип и дизайн сайта: какие блоки, какие пропорции картинок, что на них должно быть. Например: «главный экран — широкий кадр цеха с работающим оборудованием, есть место слева под заголовок», «команда — портреты по пояс на одинаковом фоне», «каталог — каждый товар на белом фоне, три ракурса и деталь».
2. Учтите форматы. Широкий горизонтальный кадр для первого экрана, квадраты для карточек, вертикали для мобильной версии. Полезно просить фотографа снимать с запасом по краям, чтобы потом кадрировать под разные экраны.
3. Подготовьте место. Уборка в офисе или на производстве, униформа сотрудников, чистая продукция без царапин и пыли. Мелочи в кадре видны очень хорошо.
4. Договоритесь о стиле. Светлые и воздушные снимки или контрастные и тёмные, постановочные или репортажные. Покажите фотографу примеры того, что нравится.
5. Решите юридические вопросы. Согласие сотрудников и клиентов на публикацию фото, права на использование снимков — всё это лучше оформить заранее.

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

Иллюстрации, иконки и инфографика

Фотографии — не единственный вариант. Иллюстрации хорошо работают там, где снимать нечего или нужно объяснить сложное.

Когда иллюстрации лучше фото:

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

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

Инфографика превращает цифры и процессы в наглядную схему. Но помните: текст, нарисованный внутри картинки, не читается поисковыми системами и экранными дикторами. Ключевые выводы инфографики стоит продублировать обычным текстом.

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

Стиль изображений и фирменный образ

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

Что формирует единый стиль:

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

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

Техническая подготовка: размер, формат, вес

Красивое фото, которое грузится несколько секунд, вредит сайту. Скорость загрузки влияет и на поведение посетителей, и на позиции в поиске.

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

Формат файла.

• JPEG — для фотографий;
• PNG — для изображений с прозрачностью и графики с чёткими краями;
• WebP и AVIF — современные форматы, которые при том же качестве весят заметно меньше;
• SVG — для логотипов, иконок и простых иллюстраций: векторная графика остаётся чёткой при любом масштабе и весит мало.

Сжатие. Даже правильно уменьшенный JPEG можно дополнительно сжать без видимой потери качества. Большинство систем управления — WordPress, 1С-Битрикс, Tilda — умеют делать это автоматически или с помощью модулей.

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

Фиксированные пропорции. Если у картинки в коде заданы размеры, страница не «прыгает» при загрузке. Это заметно улучшает впечатление и один из показателей, которые учитывает Google.

Изображения и SEO

Картинки — дополнительный источник трафика и сигнал для поисковых систем о содержании страницы.

• Имя файла. Осмысленное имя латиницей вроде remont-vannoy-plitka.jpg лучше, чем DSC_0457.jpg.
• Атрибут alt. Краткое описание того, что на изображении. Оно нужно незрячим пользователям и поисковым системам. Пишите для человека, а не набивайте ключевые слова: «Ванная комната после ремонта, белая плитка и душевая кабина» лучше, чем «ремонт ванной Москва недорого ремонт ванной под ключ».
• Окружающий текст. Изображение, которое стоит рядом с релевантным текстом и подписью, поисковик понимает лучше.
• Уникальность. Собственные фото чаще попадают в поиск по картинкам, чем копии, которые есть на тысячах сайтов.
• Микроразметка товаров. Для интернет-магазинов изображение товара в микроразметке помогает формировать расширенные сниппеты.

Права на изображения: чего нельзя делать

Это не формальность. Использование чужих фото без разрешения может закончиться претензией правообладателя и требованием компенсации.

• Нельзя брать картинки из поиска. То, что изображение находится в Яндекс Картинках или Google, не значит, что его можно использовать.
• Нельзя копировать фото с сайтов конкурентов и производителей без явного разрешения. Даже фото товаров от поставщика — уточните условия использования.
• На фотостоках читайте лицензию. Бесплатные фото тоже имеют условия: где-то нужно указывать автора, где-то запрещено коммерческое использование или использование людей с фото в определённом контексте.
• Фото людей требуют согласия. Это касается сотрудников, клиентов, моделей.
• Сохраняйте документы. Договор с фотографом, лицензии стоков, согласия — всё должно храниться на случай вопросов.

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

Типичные ошибки

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

Итог

Изображения — не украшение, а полноценная часть содержания сайта. Они показывают продукт, доказывают реальность компании, объясняют сложное и задают настроение.

Коротко о главном:

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

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