Posted:
Июн 29, 2023
Comments:
0 Comments

Hero image что это: Выбираем героя для главной страницы сайта — советы UX-дизайнера — Офтоп на vc.ru

Содержание

Выбираем героя для главной страницы сайта — советы UX-дизайнера — Офтоп на vc.ru

Ник Бабич об эффективном использовании изображений на примере сайтов известных компаний.

6854
просмотров

Ник Бабич, разработчик пользовательских интерфейсов

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

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

1. Обеспечьте релевантность

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

Пример неудачного выбора героя — не каждый поймёт, как это изображение связано с кредитами

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

Образ героя на главной странице Lunet Eyewear уточняет основной месседж сайта

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

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

Slack использует в качестве образа героя интерфейс своего приложения

Выбор hero image — скорее искусство, чем наука. И всё же мы можем упростить эту задачу с помощью чек-листа, созданного Энджи Скотмюллером. Перед тем, как использовать то или иное изображение, убедитесь, что оно отвечает следующим семи принципам:

  1. ​Релевантность ключевым словам. Является ли выбранное изображение их визуализацией?

  2. Чёткость цели.     Уточняет ли изображение месседж сайта?

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

  4. Аутентичность.     Внушает ли образ героя доверие к бренду?

  5. Демонстрация ценности.     Показывает ли образ героя преимущества продукта или бренда?

  6. Нужные эмоции.     Вызывает ли образ героя те эмоции, которые подталкивают посетителя к целевому действию?

  7. Клиент как герой.     Может ли клиент представить себя в роли героя (в случае, если он приобретёт продукт)?

2. Превратите образ героя в шедевр

Hero image — это всего один бит информации. Но он должен быть в чём-то выдающимся. В чём-то, что заставляет пользователя вновь и вновь возвращаться на сайт. Это вовсе не означает, что изображение обязательно должно о чём-то информировать, скорее оно должно усиливать месседж сайта в максимально релевантной манере.

Образ героя на сайте Breitling

3. Выбирайте эмоциональные изображения

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

Сайт Coca-Cola

Сайт Adobe

4. Hero image должен загружаться как можно скорее

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

Стив Содерс в своей статье Hero Image Custom Metrics («Пользовательские метрики для образа героя») предлагает добавлять на такие страницы специальные метрики, позволяющие определять, когда контент становится видимым.
В качестве примера приведём код встроенного таймера, который вставляется сразу после тега img.

<img src=”hero.jpg” onload=”performance.mark(‘hero1’)”><script>performance. mark(‘hero2’)</script>

Это что-то вроде User Timing API. Посмотреть, как он работает, можно на тестовой странице Стива.

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

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

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

6. Адаптируйте изображение под экраны разного размера

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

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

Responsive Breakpoints Generator позволяет работать с изображениями разного размера

7. Подчеркните призыв к действию

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

Кнопка призыва к действию визуально уравновешивает крупное изображение

Используйте эффект размытия, чтобы протестировать визуальную иерархию страницы. Это поможет убедиться, действительно ли взгляд пользователя зацепится за то, за что должен зацепиться. Всё, что вам понадобится, — это применить к скриншоту страницы object blur effect в Adobe XD (добавить эффект размытия). Оценив полученный результат, вы сможете исправить ситуацию.

Тест на размытость позволяет выявить визуальную иерархию дизайна

8. Создайте контраст

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

Используйте цветной слой

Самое простое, что можно сделать, — это наложить плоский текст на изображение. Если контраст между текстом и изображением недостаточен, проложите между ними полупрозрачный цветной слой.

На сайте Outlines текст идёт поверх цветного слоя

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

Голубой фон hero image для Clique хорошо сочетается с цветом интерфейса приложения

Добавьте контраст с помощью фона

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

Уровень прозрачности может меняться

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

Практические советы по применению подобных инструментов можно найти в статье Design Conversations: Text on Images («Беседы о дизайне: текст поверх изображения»).

9. Показывайте реальных людей

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

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

Такие фотографии оставляют у пользователя неприятное ощущение мелкого притворства

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

Сайт Daniella Draper

Сайт The Renovator

И ещё пара советов:

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

10. Используйте иллюстрации

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

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

Простые для понимания иллюстрации Dropbox помогают прояснить и донести до пользователей сложные идеи

Иллюстрации Basecamp апеллируют к воображению пользователей и помогают бренду устанавливать с ними сильную эмоциональную связь

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

Заключение

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

Рекомендации по применению Hero Images (UPD) / Хабр

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

Из статьи вы узнаете:

  • почему визуальная составляющая играет решающую роль в привлечении пользователей;

  • какие функции выполняют изображения на сайтах;

  • что следует учитывать при отборе картинок.


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

Hero Image

Hero image – термин, применяемый чаще всего в веб-дизайне. Подразумевает под собой тенденцию использовать большие изображения или фотографии. Hero image размещается обычно в верхней части сайта, на самом приметном месте веб — страницы или в центре. Если такое изображение используется вверху страницы, оно называется “hero header”.

— это не просто красивая картинка. Это мощный инструмент коммуникации.


В этой статье я дам вам несколько советов, как правильно использовать технику Hero Image.

Выбирайте удачные изображения

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

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

Пример неудачно выбранной картинки

Если же вам удастся найти именно то, что нужно, пользователь захочет посмотреть, что еще вы можете ему предложить.

Пример правильно подобранного изображения

Сделайте картинку композиционным центром

Hero Images идеально подходят, чтобы сжато передать самую важную информацию

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

Apple — профессионал в создании Hero Image.

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

Ищите изображения, вызывающие эмоции

Внедряйте эмоции в дизайн

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

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

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

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

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

Размытая картинка и снимок подходящего размера

Акцентируйте внимание на кнопках призыва к действию

Призыв к действию не должен конкурировать с красочным изображением

Несмотря на то что все внимание здесь сосредоточено на картинке, нельзя забывать и о других ключевых элементах интерфейса — например, «призывах к действию» (англ. call to action, CTA). При попытке акцентировать внимание пользователя очень важен правильный выбор цвета. Кнопки с призывом к действию должны мгновенно бросаться в глаза.

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

Выдерживайте контраст в дизайне

Убедитесь, что текст, который вы располагаете поверх фото, легко читается

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

В качестве альтернативы вы можете применить scrim:

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


О применении других эффектов вы можете узнать в статье «Хитрости дизайна: Текст на фото»

Учитывайте разные размеры экранов

Картинка должна выглядеть пропорционально на всех устройствах

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

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

Автор фото: themeforest

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

Используйте иллюстрации

Добавьте индивидуальности

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

Dropbox показывает процесс обмена сообщениями и объясняет сложные идеи посредством легко понятных рисунков

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

Заключение


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

Спасибо за внимание!

Главный образ — Optimizely

 

Что такое главный образ?

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

Источник: Balsamiq

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

Зачем использовать главный образ?

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

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

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

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

  • Будьте осторожны при использовании больших изображений в качестве главных изображений, поскольку они могут повлиять на время загрузки, особенно на мобильных устройствах. На основе исследования, проведенного в Google, было показано, что увеличение скорости загрузки страницы с 0,4 до 0,9 секунды может снизить трафик на 20%. Эффективность главных изображений теряется, если пользователю требуется слишком много времени для их загрузки. Убедитесь, что ваши большие изображения баннера и размеры видео оптимизированы и что они размещены на быстром CDN, чтобы они не замедляли время загрузки вашей страницы.
  • Спросите себя, действительно ли выбранное вами изображение приносит пользу. Несмотря на то, что изначально использование стоковых изображений в качестве основного изображения может быть дешевым и быстрым решением, во многих случаях стоковые фотографии являются клише и неоригинальными. Идеальное главное изображение должно дополнять изображения вашего продукта и основного предложения — этого очень сложно добиться с помощью стоковых изображений.

Примеры основных изображений

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

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

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

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

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

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

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

Secret Escapes (компания, занимающаяся туристическими услугами) размещает CTA в центре своего главного изображения, а также ценностного предложения. Изображение, которое они используют, также демонстрирует примеры туристических направлений, которые они предлагают.

Как протестировать различные основные изображения с помощью A/B-тестирования

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

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

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

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

Идеи тестирования основного изображения

Некоторые идеи по оптимизации основных изображений включают:

  • Тестирование влияния неподвижного изображения на движущееся изображение: может быть полезно выяснить, находят ли пользователи ваши визуальные эффекты привлекательными, эстетически привлекательными или информативными, или если они находят их отвлекающими. Сравнение неподвижной графики с движущейся графикой, такой как изображение в формате .gif или HTML5, может дать представление о предпочтениях ваших пользователей.
  • Тестирование влияния интерактивного воспроизведения видео или видео с автоматическим воспроизведением: в Интернете становится все более и более распространенным явлением воспроизведение встроенного звука без необходимости его активации. Для сайтов, использующих обмен видеосообщениями, полезно измерять важность видеоконтента, проверяя, нажимают ли пользователи, чтобы активировать контент, или лучше использовать автоматическое воспроизведение видео.
  • Тестирование ценностного предложения героя: вызывают ли разные изображения разные эмоции у ваших пользователей и заставляют ли они вести себя по-разному на вашем сайте?
  • Тестирование объектной направленности главного героя: создает ли основной предмет вашего изображения положительное ощущение у пользователей, которое вызывает действия, способствующие достижению конечной цели конверсии бизнеса? Или это отталкивает?

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

Полное руководство по основным изображениям [Лучшие практики + примеры]

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

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

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

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

Главный образ в веб-дизайне

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

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

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

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

Размеры основного изображения

Поиск правильного соотношения сторон и кадрирования может привести к путанице при изменении размера основного изображения. Главные изображения баннера отличаются от полноэкранных изображений, и каждое изображение должно масштабироваться в соответствии с пространством. Вы также должны учитывать, что никто не просматривает сайты одинаково. Лично мой экран обычно увеличен до 120%, но у других могут быть открыты десятки вкладок разного размера.

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

1. Размеры полноэкранного изображения и баннера

Идеальный размер полноэкранного основного изображения составляет 1200 пикселей в ширину с соотношением сторон 16:9. Для главного изображения баннера идеальный размер — 1600 x 500 пикселей.

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

Вы можете проверить скорость загрузки для ПК и мобильных устройств с помощью Google PageSpeed ​​Insights. Это дает всесторонний взгляд на то, какой контент сайта загружается первым и где есть возможности для улучшения. Стремитесь к тому, чтобы время загрузки страницы составляло от одной до двух секунд, потому что вы, скорее всего, потеряете людей, если загрузка превысит пять секунд.

2. Размеры главного изображения для мобильных устройств

Идеальный размер главного изображения для мобильных устройств — 800 x 1200 пикселей.

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

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

3. Сжатие основного изображения

Вы хотите сжать основное изображение, если у вас большой размер файла (все, что превышает 1 МБ, слишком велико). Вы можете использовать такие сайты, как TinyJPG, Compress JPG или Adobe Photoshop Compressor, чтобы уменьшить размер без снижения качества. Просто убедитесь, что размеры указаны правильно, иначе изображение может выглядеть размытым или растянутым.

При изменении размера основного изображения проверьте Google Analytics, чтобы увидеть типичное разрешение экрана посетителей вашего веб-сайта. Затем разработайте дизайн с учетом этой целевой аудитории. Просто не забудьте протестировать свое главное изображение в нескольких браузерах, экранах и телефонах, чтобы увидеть, как оно масштабируется. Как только вы определились с размерами, пришло время добавить их на вашу веб-страницу с помощью HTML и CSS.

Главное изображение HTML

HTML — это язык кодирования, состоящий из элементов, используемых для придания структуры веб-странице. Он создает порядок и позволяет вставлять контент (например, главные изображения) на сайт.

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

Главное помнить:

  • Основное изображение должно быть центрировано.
  • Текст должен легко читаться.
  • Он должен отлично смотреться на экранах всех размеров.
  • Изображение должно покрывать всю область просмотра.

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

1. Создайте структуру.

Настройте два контейнера для главного изображения, используя правила кодирования вашего веб-сайта. Например, в первом примере ниже используется .hero для структуры и .hero-content для изображения, текста и кнопки, а второй использует .image-container и .inner-container .

Источник изображения

Источник изображения

2. Добавьте свой контент.

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

Источник изображения

Обратите внимание, что ширина и высота раздела .hero установлены на 100vw и 100vh. Это гарантирует, что изображение помещается во все окно просмотра, как по вертикали, так и по горизонтали, поэтому оно охватывает весь экран.

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