Для сайта картинки: Картинки для сайта — как подбирать фото и изображения на фотостоках — Независимое театральное объединение "Зрительские симпатии"

Содержание

Визуальный контент для сайта — типы и правила использования

Проведенные исследования показывают, что визуальная информация обрабатывается в 60 000 раз быстрее, чем текст. А если к тексту добавить картинку, вероятность его прочтения составляет целых 80%. Также изображения и иллюстрации запоминаются пользователями лучше, чем текст.

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

Типы визуального контента

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

Визуальный контент можно разделить на несколько видов:

Фотографии.
Иллюстрации и другие векторные изображения.
Видео.
Инфографика.
Диаграммы и графики.
Типографика.

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

Фотографии: как использовать в веб-дизайне

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

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

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

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

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

1. Поиск бесплатных изображений

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

Популярные стоки:

Pixabay — большая база бесплатных фото, есть поиск по сайту, для скачивания нужна регистрация;
Unsplash — сервис, где много атмосферных фото, чаще встречаются пейзажи или предметная фотосъемка;
Freeimages — бесплатный ресурс для скачивания изображений, есть поиск по коллекциям;
Pexels — база бесплатных изображений высокого качества, есть поиск по тематике или фотографу.

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

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

2. Покупка изображений

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

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

3. Создание уникальных фотографий самостоятельно

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

Несколько рекомендаций по подбору фото для сайта:

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

Как определить качество фотографии? Есть технические аспекты: разрешение в пикселях (чем больше, тем лучше), яркость/контрастность и прочее.

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

Иллюстрации и другие векторные изображения

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

Где брать векторные изображения:

с бесплатных и платных стоков, как в случае с фотографиями. Например, с Freepik или depositphotos;
заказать уникальные картинки у иллюстраторов.

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

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

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

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

Видеоконтент

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

Как используется видеоконтент.

1. Видеобэкграунд

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

2. Видео как часть дизайна

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

3. Видео как иллюстрирование текстового контента

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

Рекомендации по созданию видеоконтента:

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

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

Инфографика

Инфографика — графический способ передачи данных: с помощью текста и изображений.

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

Основные моменты, при создании инфографики:

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

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

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

Визуализация данных

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

При создании графиков и диаграмм, обращайте внимание на:

Цвета. Лучше выделить первостепенные данные ярким цветом, остальные — залить нейтральным. Не использовать более 3-4 цветов.
Легенду. Она нужна, чтобы пользователь понимал, что обозначает та или иная линия. В противном случае, диаграмма будет бесполезна.
Границы и сетки. Лучше их убрать совсем, чтобы не было лишних элементов.

Создавать такой контент можно в стандартных программах по типу Microsoft Excel или Google Sheets, в графических редакторах, а также на специальных ресурсах: Creately, Onlinecharts и прочее.

Типографика

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

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

1. Цветовые решения

Текст должен гармонично сочетаться с фоном сайта, привлекать внимание. Иногда используют нестандартные решения в виде градиента. Пример — официальный сайт Apple.

2. Композиция и размер

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

3. Текст

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

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

5 советов по расположению визуального контента

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

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

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

В студии дизайна IDBI особое внимание уделяется визуальному контенту.

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

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

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

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

Оптимизировать изображения нужно, чтобы они меньше весили и быстрее загружались.

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

Чтобы изображение оптимизировалось, нужно правильно задать формат, качество, размер, атрибуты alt и title, а также подписать картинки, разместить их в sitemap-файл и установить на сайт OpenGraph.

Формат

Google индексирует картинки в форматах JPEG, PNG, GIF, BMP, SVG и WebP. Яндекс — JPEG, PNG и GIF. Подробнее о том, как Яндекс индексирует изображения, можно узнать в справке.

JPEG — подходит для портретных и пейзажных фотографий, где важна цветопередача. Есть также JPEG 2000 и JPEG XR. Они сжимают изображения ещё сильнее, чем обычный JPEG, но пока эти форматы поддерживаются не всеми браузерами;

PNG — для сложных графических элементов, в которых нужно сохранить прозрачность и тени;

GIF — для анимации и мелких элементов: иконок, кнопок и так далее;

BMP — для растровых изображений;

SVG — для векторной графики в логотипах и значках;

WebP — сохраняет высокое качество изображений небольшого размера.

Качество

Чем качественнее будет картинка, тем больше пользователей обратит на неё внимание и тем лучше она проиндексируется.

Следите, чтобы при сжатии графика не испортилась и изображение было привлекательным и чётким.

Размер

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

Укажите ширину и высоту изображения в CSS, чтобы поисковик быстрее проиндексировал страницу. Оптимальный размер внутри страницы — в районе 300 px. Если изображение нужно растянуть на всю ширину экрана — 1920 px.

Приемлемый вес картинки — от 200 КБ до 1 Мб. Вес меньше 200 КБ сделает картинку некачественной, а изображение больше 1 Мб уже будет медленно загружаться.

Узнать размер и вес иллюстраций можно благодаря аудиту сайта от Serpstat:

Атрибуты alt и title

Название атрибута alt — сокращение от alternative. Это название изображения, которое покажется на месте картинки, если она не прогрузится. То есть это альтернативная, исходя из названия, информация, которую пользователь узнает об изображении.

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

Alt — это не то же самое, что название файла. Атрибут прописывается уже в коде, а название — перед загрузкой на сайт. Но назвать изображение тоже нужно правильно. Например, если на иллюстрации — аэропорт Шереметьево, назовите файл SVO-airport.jpg, а не именем, которое присвоила система.

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

Второй атрибут — title — показывается, если просто навести курсор на изображение, даже если оно прогрузилось. Эта настройка не так обязательна, как alt, но всё же с её помощью картинка может косвенно продвигаться — на изображении с текстом пользователи останавливают внимание чуть дольше.

Так title выглядит на сайте

Подписи

Если alt и title — подписи, которые появляются при каком-то действии, то обычная подпись сопровождает изображение всегда.

Изображение с подписью. Кстати, текст, который вы сейчас читаете — тоже пример подписи

Подписи помогают оптимизировать картинку по двум причинам:

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

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

Sitemap-файл

Sitemap — это карта сайта в виде кода, по которому можно читать, где находятся те или иные объекты. Чтобы поисковики проиндексировали труднодоступные изображения (например, загруженные с помощью JavaScript), их нужно прописать в sitemap-файле в формате XML.

В коде это выглядит так:

Подробнее о том, как настроить sitemap-файл, можно узнать в справках Яндекса и Google.

Разметка OpenGraph

Материалы, опубликованные на сайте, можно продвигать также с помощью соцсетей. Чтобы на него обратили внимание в новостной ленте, пост со статьёй нужно красиво оформить. В этом помогает разметка OpenGraph.

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

Пост со статьёй на OpenGraph

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

Подробная инструкция, как настроить OpenGraph, есть у Яндекс.Помощи.

CDN

Если страница медленно загружается, это может привести к потере аудитории и, как следствие — убыткам. Кроме веса контента, на скорость загрузки влияет географическая удалённость сервера. Чтобы сайт открывался одинаково быстро в любой точке мира, можно использовать сети доставки контента (Content Delivery Networks), которые распределяют нагрузку на один сервер.

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

Чтобы этого не произошло, стоит создать поддомен для CDN и размещать изображения на нём.

Где сжать изображение и не потерять качество

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

I love image

Сжимает картинки форматов JPG, PNG и GIF.

Image Compressor

Сжимает одновременно до 20 изображений форматов JPEG и PNG.

EzGIF

Как понятно из названия, этот сервис оптимизирует гифки.

Imagifiy

Позволяет оптимизировать все картинки на сайте сразу.

Compressor

Сервис, в котором можно выбрать — нужно ли искажать качество изображения или нет. Сжимает картинки на 90%.

Вывод

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

Оптимизируя изображения, не забудьте настроить формат, качество, размер, атрибуты alt и title, а также подписать картинки, разместить их в sitemap-файл и установить на сайт OpenGraph.

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

Как сделать картинку для сайта уникальной?

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

Польза от уникальных изображений для сайта.

С помощью графических файлов информация на сайте запоминается легче. Изображения объясняют и дополняют текстовый контент. Для сайтов с коммерческой тематикой, например, интернет-магазинов, png файлы – это атрибут первой необходимости. Ибо пользователю «лучше один раз увидеть, чем сто раз услышать».

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

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

у файла (jpeg,png) есть название;
заполнены атрибуты alt и title;
написан поясняющий его текст.

Задать необходимые изображению атрибуты не сложно. Намного труднее сделать картинку уникальной в своём роде. Для этого придётся или вложить деньги, или потратить время.

Как проверить уникальность картинок?

Проверить картинку на уникальность, можно в сервисах Гугл и Яндекс.

Проверка в Google

Проверка в Яндексе

Способы сделать уникальное изображение для сайта.

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

Однако существует несколько способов получить действительно уникальное изображение для сайта. Например:

сфотографировать предмет,
нарисовать его,
сделать скриншот с видеокадра,
купить файл на фотостоке;
изменить изображение, глубоко отредактировав его.

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

Обработка картинок в фоторедакторе.

Обрабатывать картинки можно в любом фоторедакторе. Но чтобы сэкономить время при обработке большого количества файлов, желательно, чтобы редактор имел функцию пакетной обработки файлов. Помимо редактирования графики изображения нужно изменить его мета-данные. То есть параметры Exif (Exchangeable Image File Format) файла, куда вписывается подробная информация о снимке, в том числе сведения о копирайте и названии картинки. Узнать EXIF файла можно в свойствах изображения. Чтобы защитить авторство собственных изображений, информацию в EXIF файле следует оформить надлежащим образом.
Уникальность картинке можно придать в редакторе Photoshop. Для этого используем специальные инструменты и делаем отражение картинки по горизонтали (зеркало), затем поварачиваем его на 5%, изменяем размер и удаляем мета-данные. После проверки Гугл сочтёт такое изображение уникальным. Этот способ не работает на фотографиях с логотипом и брендом компании, поскольку после поворота они искажаются.
Иногда, чтобы сделать фото уникальным, достаточно применить к нему отражение по горизонтали или повернуть на несколько градусов.
Самый простой способ получить уникальное фото – сделать скриншот видео.

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

Подводим итоги.

Тема о том, как достигнуть уникальности изображений на веб-ресурсе и по сей день не утрачивает своей актуальности. Об этом свидетельствует появившийся не так давно сервис tineye.com. С его помощью можно искать похожие изображения. Но вопрос поиска дублей не стоит доводить до крайностей. Превалирующим фактором ранжирования считается не графическая уникальность изображения, а seo параметры картинки и объясняющий её текст.

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

Полное руководство по выбору фотографий для вашего веб-сайта

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

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

Из чего состоит хорошая фотография для сайта?
- Ориентация
- Фокус
- Размер и качество изображения
- Стиль
Как получить фотографии для своего сайта
- Профессиональная фотография
- Стоковая фотография
- Персональная фотография
Организация и обмен изображениями веб-сайта

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

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

Ориентация

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

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

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

Взгляните на эти примеры, чтобы понять, что я имею в виду.

Видите, реальное полезное пространство на альбомном изображении намного больше, чем на портретном?

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

Фокус

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

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

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

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

Размер и качество изображения

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

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

Стиль

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

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

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

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

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

Профессиональная фотография

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

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

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

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

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

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

Использование стоковой фотографии

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

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

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

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

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

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

Unsplash (бесплатно)
Pixabay (бесплатно)
Pexels (бесплатно)
Фоновые рисунки Pikwizard (бесплатно)
Shutterstock (платный)
Getty Images (платно)

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

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

*Однажды мы услышали от клиента, который получил очень строгое письмо от Getty Images, с инструкцией взять фотографию, которую они использовали, или заплатить ОЧЕНЬ большой лицензионный сбор. После этого они позволили нам выбрать их изображения!

Фотография персонала

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

Неудобные объекты

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

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

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

Использование ваших собственных фотографий

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

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

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

Сложный стиль

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

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

Устранение проблемы

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

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

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

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

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

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

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

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

Picture Perfect

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

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

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

Если вы готовы начать проект и вам нужно агентство, которое поможет вам выбрать изображения, свяжитесь с нами — мы будем рады получить от вас известие!

Давайте общаться

Следите за новостями и советами по дизайну, разработке и маркетингу (плюс фотографии наших офисных собак).

Как выбрать правильные фотографии для вашего веб-сайта

Представьте себе веб-сайт, состоящий на 100 % из слов. Никаких фото, видео или других визуальных элементов. Звучит не слишком захватывающе.

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

1. Какую историю должны рассказывать изображения на вашем веб-сайте?

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

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

Переведите свой бизнес в онлайн с помощью Jimdo.

Начать сейчас

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

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

Не забывайте: Ваш логотип тоже рассказывает историю! Создайте логотип для своего бизнеса сегодня с нашим конструктором логотипов Jimdo.

Создайте логотип, который выделит ваш бизнес.

Создай свою сейчас

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

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

Нанять профессионального фотографа

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

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

Изображения своими руками

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

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

Стоковые фотографии

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

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

Примечание. «Без лицензионных отчислений» не всегда означает отсутствие лицензии. Вы можете использовать стоковое изображение бесплатно при условии, что вы укажете имя фотографа и/или источник фотографии. Или вы можете использовать фотографию, но не редактировать ее. Всегда читайте Условия использования изображения, прежде чем использовать его на своем сайте, и никогда не копируйте изображения, найденные в Google.

3. Будьте разборчивы в выборе фотографий

Что делает фотографию хорошей? На что следует обратить внимание?

Убедитесь, что он в фокусе

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

Используйте гармоничные цвета и освещение

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

Следуйте правилу третей

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

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

Используйте высокое разрешение

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

4. Не бойтесь редактировать свои фотографии

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

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

5. Расположите свои фотографии так, чтобы они произвели впечатление

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

Переведите свой бизнес в онлайн с помощью Jimdo.

Начать сейчас

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

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

Вот пример от производителя мебели Wood You Love. Команда изготавливает столы из массива дерева на стальных рамах. Но когда вы покупаете у WYL, вы покупаете не просто стол, изготовленный на заказ. Вы инвестируете в четырех квалифицированных мастеров, которые вкладывают в свою работу сердце и душу. Это касается как людей и процесса, так и конечного результата, поэтому вы сначала встречаетесь с их командой на их домашней странице.

Фотографии товаров

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

Дополнительные практические советы и приемы, которые помогут вашим продуктам выделиться, читайте в нашей статье «Как улучшить фотографии ваших продуктов».

Галереи изображений

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

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

Изображения как элементы дизайна

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

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

Изображения в качестве фона веб-сайта

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

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

6. Оптимизируйте изображения

Теперь вы нашли нужные фотографии и добавили их на свой веб-сайт. Осталось только оптимизировать ваши изображения для доступности и SEO.

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

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

Теперь у вас есть все нужные фотографии, что насчет вашего логотипа? Это еще один важный графический элемент, который вы должны иметь на своем сайте. Узнайте больше о том, что делает хороший логотип, и создайте свой собственный прямо сейчас с помощью Jimdo Logo Creator!

Переведите свой бизнес в онлайн с помощью Jimdo.

Начать сейчас

Купить веб-сайт Фотографии — фотографии и стоковые фото

24.751Bilder

Bilder
Fotos
Grafiken
Vektoren
Videos

Niedrigster Preis

Beste Qualität

Durchstöbern Sie 24.751

purchase a website pictures

Geschäftsmann, der einen Computer für Immobilienverkäufe und -ange

Haus, Immobilien-Konzept, verschiedene Angebote der Immobilie…

Интернет-магазины haben keine Schließzeit!

Frau Online-Shopping в режиме смартфона Kleidung zu Hause

Labradoodle Hund Bestellung онлайн через Интернет для…

Интернет-магазин — цифровой планшет

Mannliche Hand stöbert in einem Online-Shop auf einem digitalen Tablet, das Schuhe verkauft.

Amily paar Wahl neues Zuhause online,suche Immobilien

Paar Blick auf Haus

Immobilienkonzept

Immobilienkonzept mit Icons Lage, Vertrag und Preisdiagramm

Das ist zu einfach

Online-Shopping-Konzept — Paket- oder Papierkartons mit…

lucliches junges paar bezahlt rechnungen online in Computer-App

Покупки в Интернете-Konzept-Shopping-Service на Online-Web. Mit…

Händen der Unternehmer, die am Computer arbeiten

Immobilienkonzept. Хаузер в схеме. Personensuche,…

Männlicher Geschäftsmann, der Computer tippt, um Immobilien und…

Silver Surfer nutzt Internet-Flohmarkt-веб-сайт на планшете

Нет wiederzuerkennende ältere erwachsene Frau wählt Gegenstände von einer Internet-Flohmarktseite aus.

Online-Shopping und Digitales Marketing-Konzept, Frau mit…

Интернет-покупки / электронная коммерция и Lieferservice-Konzept:…

Дизайн веб-сайтов

Интернет-магазин с ноутбуком

Mann Hand halten Скриншот от Amazon-Anwendung

Чиангмай, Таиланд — 26 апреля 2016 г. : Mann Hand сделал скриншот приложения Amazon, подключенного к Asus Zenfone 2-Mobiltelefon gezeigt wird. Амазонка является одним из самых популярных американских сервисов электронной коммерции.

Würfel mit Einkaufswagen-Symbol auf der Laptop-Tastatur arbeitet an internet-kommunikations-technologie — покупка веб-сайта, фото, фотографии и изображения

Блог о цифровом образе жизни Schriftsteller oder Geschäft Person mit…

Digitale Online-Handel Verkauf Marketingkonzept. Frau mit Tablet…

Liefer- und Logistikkonzept

Liefer- und Logistikkonzept mit Icons

Online-Shopping und Modegeschäft Website mit Hinzufügen zum…

женщина женщина онлайн-покупки

женщина онлайн-покупки

Adaptives und Reaktionsschnelles Webdesign-Konzept, das Beispiel-W

Frau einkaufen онлайн в Черную пятницу.

Online-sichere Zahlung und Netzwerk sichere…

Lachender kaukasischer mann bei der Arbeit am Computer

Unkenntliche Frausucht Website auf Tablet für Sommerkleidung

Daten-Phishing-Kreditkarte

Euro-Geld E-Banking Online-Banking Internet-E-Commerce

Jeans kontaktieren Sie uns

Euro-Geld E-Banking Online-Banking Internet-E-Commerce

кнопка кнопки на веб-сайте на заднем плане — иллюстрация

изображение на ноутбуке für Online-Shopping

различные символы для Kontakt

Online Video Konferenz Work Call

Интернет-магазин

Upgrade Upgrade der Computersoftware Internetprogramm blaue.