О создании сайтов

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

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

ПОДБИРАЙТЕ СМЫСЛОВЫЕ ИЛЛЮСТРАЦИИ

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

Крупно лицо эксперта, смотрит в камеру, улыбается — вызывает доверие

***

Крупно товар, и не только само по себе, но и в реальном применении — на лице, глаза смотрят в камеру — это сильный триггер

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

Фотография и ее обработка подтверждают то, что написано словами, демонстрирует свободу, яркую одежду, которая не оставляет без внимания и поднимает настроение

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

НЕТ — СТОКОВЫМ ФОТОГРАФИЯМ

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

Слишком идеальная семья, неестественные улыбки — 0 доверия

ДА — ФОТОСЕССИИ

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

Видно, что это живые люди, одетые в свою же продукцию — так формируется доверие к бренду

КРУПНЫЕ ФОТО

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

Сравните:

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

ВИДЕО, ГИФКИ И 3D

По возможности добавляйте видео или гифки, чтобы продемонстрировать свой товар или услугу на практике. Также хорошо работают 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/

Больше обо мне, моем подходе к созданию сайтов, с портфолио и примерными ценами — на моем личном сайте Переходите, знакомьтесь, пишите!

Как повысить конверсию за счет дизайна