← Назад
Изображения для сайта
Советы

Как подобрать картинки для сайта

Качественные иллюстрации и фото на сайте могут как повысить, так и понизить доверие со стороны клиентов. Вообще, изображения на сайте — это первое, на что обращает внимание человек. Рассказываем, почему иллюстрации так важны, как их подобрать, использовать и оптимизировать.
08.02.2022 · 15 минут

Почему картинки на сайте играют большую роль

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

Изображения привлекают внимание пользователя

Одна из самых сложных задач компании — это способность привлечь и удержать внимание пользователя. Социальные сети, такие как Facebook, Instagram, TikTok и так далее сделали так, что люди привыкли потреблять много быстрого контента. Из-за этого сайты стали выглядеть как что-то большое и сложное. Именно поэтому для общения с пользователем очень важна визуальная составляющая.

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

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

• Есть ли то, что можно проще донести визуально: с помощью графиков, диаграмм или таблиц?

• Соответствует ли картинка или фото тексту?
Решите эти вопросы, и тогда вам с большей вероятностью удастся удержать внимание пользователей.

Картинки помогают SEO

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

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

Чтобы показывать релевантные изображения при поиске по картинкам, Google и Яндекс ориентируются на теги, в которых и написано, что представлено на них. Благодаря этому в результатах поиска пользователь получает именно то, что искал.

Как подобрать картинки для сайта

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

Убедиться, что изображения актуальны для компании

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

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

Здесь важно не использовать картинки ради картинок. Они должны повысить ценность страницы и предоставить аудитории отличное визуальное представление для усиления текстового описания.

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

Если уместно — использовать оригинальные фото

Фото добавляют сайту уникальности. Это не значит, что нельзя использовать стоковые фото, но если у компании есть что показать — покажите.

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

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

Не опираться на собственный вкус

Когда вы пытаетесь найти и использовать «идеальные» иллюстрации для сайта, очень просто начать выбирать исходя из собственных предпочтений. Это вариант может не сработать.

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

Спросите себя: «Поможет ли эта картинка читателю понять содержание?», «Будет ли это фото доносить ценность или наоборот, отвлекает внимание?», «Дополняет эта картинка текст или если его убрать — ничего не изменится?».

Если картинки или фото из интернета — подумать о лицензии

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

Вот несколько мест, в которых вы можете брать фото или картинки бесплатно и без согласования с владельцами:
•‎ FreeStockImages. Полностью бесплатный сервис, но тут можно скачать только фото.

•‎ Pixabay. Бесплатно скачивайте фото или иллюстрации на абсолютно разную тематику.

•‎ Pexels. Еще один сервис, где вы можете скачать фото или иллюстрации на любой вкус и цвет.

•‎ FreePik. Бесплатные и платные векторные иллюстрации и фото.
Таких мест куда больше. Если не понравится ни один из списка, то в интернете можно найти и использовать еще десятки подобных сервисов.

Оптимизировать изображения

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

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

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

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

Повышает скорость работы сайта

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

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

Улучшает показатели SEO

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

Как оптимизировать изображения для сайта

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

Выбрать формат

Существует три распространенных типа файлов, которые используют для публикации картинок в интернете: JPEG, GIF и PNG.

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

Изображения в формате GIF (.gif) имеют более низкое качество, чем картинки в формате JPEG, и используются для более простых изображений, таких как значки и небольшие изображения. GIF-файлы также поддерживают анимацию.

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

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

Поэтому, в основном лучше использовать JPEG и лишь по необходимости GIF и PNG.

Использовать сжатие

Методы сжатия используют с целью уменьшения размера картинки. Есть два распространенных типа сжатия:
•‎ Сжатие с потерями — уменьшает размер файла за счет удаления избыточных данных. Этот тип сжатия может уменьшить размер файла изображения, но также ухудшает качество. После сжатия файла невозможно восстановить удаленные данные. Чтобы предотвратить потерю данных, вы всегда должны хранить главную копию с максимально возможным качеством.

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

Изменить размер

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

Лучше всего найти баланс между качеством и размером файла. Измените размер иллюстрации до минимального размера, который по-прежнему обеспечит необходимый визуальный эффект. Кроме того, если вы должны показать большие картинки с высоким разрешением, показывайте уменьшенную версию и загружайте полное изображение только по запросу пользователя. Таким способом часто пользуются маркетплейсы, такие как OZON или Wildberries.
Разный размер картинок на сайте

Прописать Alt

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

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

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

Важно: не используйте альтернативный текст как способ «впихнуть» все ключевые слова. Ключевое слово нужно вставлять только если это имеет смысл. Добавление нерелевантных или повторяющихся ключей может привести к штрафу со стороны поисковой системы.

Использовать CDN

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

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

Например, если сервер на котором стоит сайт находится в Москве, а пользователь из Воронежа его посещает, CDN обслуживает их, используя ближайший к ним сервер.

Заключение

Если вы не оптимизируете иллюстрации, то желательно об этом задуматься. Это сильно повлияет на скорость сайта и процент отвала посетителей, не говоря уже о SEO.
В mottor есть инструменты, с помощью которых вы сможете отслеживать, как изменения визуала влияют на конверсию.

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

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat

Цвет вашего landing page

Контент против дизайна: что главное в разработке сайта?

Оптимизация коэффициента конверсии: принципы работы и советы

бесплатный конструктор сайтов, лендингов и квизов
Документы:
Документы:
Полезные ссылки:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
support@lpmotor.ru