Всё о фотографиях для сайта

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

Итак, мои рекомендации по работе с фотографиями для сайта

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

Фотографии также могут вызывать нужные эмоции и/или желание «хочу так же».

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

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

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

Используйте крупные картинки, на которых можно рассмотреть детали

Но следите, чтобы на них не было визуального шума: ненужных / лишних / мелких / разноцветных элементов, которые отвлекают от основного сюжета снимка

Сравните:

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

Если у вас интернет-магазин, уделите фотографиям особое внимание. Они должны показывать товар с разных ракурсов. Все фото должны быть в одном стиле, а товары — на однотонном светлом фоне. Чем лучше вы покажете свой товар, тем проще его будет продать

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

Сравните:

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

Сравните:

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

Сравните:

Например, изображение в карточке товара имеет разрешение 200 × 300. Загрузите картинку 600 × 900. Тогда она точно не «поплывёт», особенно если вы делает сайт на Тильде с использованием автомасштабирования

Для самых больших, фоновых фотографий, занимающих весь экран, можно взять разрешение 2560 × 1400 пикселей. В других случаях желательно не использовать фото свыше 1920 пикселей по большей стороне. Их сложнее оптимизировать так, чтобы они при этом мало весили. А тяжёлые фотографии (более 500 Кб), особенно если их много, будут замедлять общую загрузку сайта, что плохо скажется на пользовательском опыте, т.е. люди будут просто уходить с сайта, потому что он «тормозит», а нам это не нужно :)

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

и пока нет возможности провести фотосессию, а сайт нужен уже сейчас?

Тут на помощь могут прийти нейросети. Найдите специалиста, который напишет промпт по вашему запросу и сгенерирует изображения для вашего сайта. Или сразу обратитесь к дизайнеру сайтов, который оказывает такую дополнительную услугу. Я, например, генерирую картинки в MidJourney

Можем поставить такого плана фото вашей команды, например, пока вы организовываете профессиональную фотосессию

Я готовлю фотографии к публикации на сайте в Фигме

Фотку слишком высокого разрешения там можно уменьшить до нужных размеров, обрезать, как того требует дизайн, добавить какие‑то простые эффекты, а потом выгрузить в нужном формате

Для выгрузки я рекомендую использовать формат .jpg, т.к. он по определению меньше весит. Исключение — фотографии с прозрачным фоном. Тут без .png не обойтись)

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

Вот 2 онлайн-сервиса, которыми вы можете воспользоваться для оптимизации своих изображений без потери их качества:

COMPRESSOR.IO
TINYJPG.COM

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

Под ключ я создаю сайты для бизнесов и экспертов на платформе Tilda Publishing, поэтому лайфхаки по загрузке фото даю именно для неё. Если вы делаете сайты на чем‑то другом или вообще этим не занимаетесь, смело пропускайте эту часть:)

Не пытайтесь загрузить изображение больше описанных выше размеров. Это приведёт к тому, что Тильда сама его оптимизирует, а делает она это не всегда качественно. Высока вероятность того, что картинка станет «мыльной», нечёткой

Оптимальный вес фотографии — до 500 Кб, но чем меньше, тем лучше. Можете сделать 30 — делайте! Изображения, в т.ч. .gif, тяжелее 5 Мб Тильда в принципе не даст загрузить

Перед загрузкой не забудьте поставить галочку переключателя «Разрешить загрузку до 1920рх» в положение Вкл.

Загружайте фото в формате .jpg или .png (только если вам нужен прозрачный фон). Впоследствии Тильда сама дополнительно оптимизирует ваше фото и переведёт его в формат.webp, но уже без потери качества

Загрузить фото можно прямо с компьютера через кнопку «загрузить файл»

или по ссылке

Сюда можно вставить ссылку с того же сервиса tinyjpg, не скачивая сжатую фотографию предварительно на свой компьютер: нажимаем правой кнопкой мыши (ПКМ) на слово download, выбираем в выпадающем контекстном меню «Копировать адрес ссылки» и вставляем её в Тильду

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

Подбор фотографий:

https://unsplash.com/
https://www.pexels.com/
https://stocksnap.io/popular
https://icons8.com/photos
https://www.everypixel.com/

Оптимизация:

COMPRESSOR.IO
TINYJPG.COM

Удаление фона:

https://clipdrop.co/remove-background

Вообще очень нравится этот сервис: https://clipdrop.co/tools
Тут можно много разных интересных штук делать с фотографиями с помощью ИИ: добавлять текст, менять размер, улучшать качество и т.д.

Также для разных видов обработки:

https://www.photopea.com/
https://pixlr.com/ru/suite/