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

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

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

Вот где в игру вступает концепция «отзывчивого» дизайна сайта!

Как работает адаптивный дизайн

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

Любая фотография, которую вы загружаете на свой веб-сайт Bandzoogle, будет растягиваться и масштабироваться в зависимости от размера «пространства», в котором находится изображение.

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

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

1. Выберите правильное изображение

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

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

Исполнитель: Tragedy Ann

Рабочий стол и широкоэкранный

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

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

Теперь представьте это на экране шириной 1000 пикселей — ширина экранов настольных компьютеров/ноутбуков больше, чем высота, и, допустим, этот же экран также имеет высоту 570 пикселей (соотношение 16:9 для многих дисплеев).

В этом сценарии наше изображение имеет ширину 1000 пикселей на этом дисплее, но было масштабировано до высоты 900 пикселей, что означает, что в пространстве высотой всего 570 пикселей оно обрезает более 300 пикселей вверху и внизу экрана. изображение. Картины без головы, ага!

Мобильная и портретная ориентация

Проделайте ту же математику с примером мобильного экрана высотой 600 пикселей — скажем, этот же дисплей имеет ширину всего около 320 пикселей. Когда изображение адаптируется к этому дисплею, более половины изображения будет обрезано с обеих сторон (помните, что изображение уменьшается до 667 пикселей в ширину на портретном экране высотой 600 пикселей).

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

Оптимизируйте, а затем загрузите свои файлы

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

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

Несколько простых советов по выбору правильного изображения для шапки:

• Избегайте использования изображений, которые были «обрезаны близко» — чем больше места или отступов у вас есть вокруг «фокуса» вашего изображения, тем меньше вероятность того, что фокус будет обрезан на разных дисплеях.
  
• Используйте большие изображения — 2000 x 1800 при размере 72 dpi, как правило, хорошо подходят для большинства тем Bandzoogle и помогают убедиться, что ваши изображения отлично выглядят на любом экране.
  
• Старайтесь использовать изображения, ориентация которых близка к «квадратной». Это не обязательно должно быть идеально квадратное изображение, но как можно ближе к равной высоте и ширине изображения оно будет отлично работать на любом дисплее. Это дополнительное пространство дает вам передышку независимо от того, в какой ориентации просматривается ваш сайт.
  
• Старайтесь избегать использования изображений с текстом или логотипами на самом изображении — вы определенно не хотите, чтобы важный текст или ваш брендинг был обрезан для ваших посетителей!
  
• Вместо этого добавьте свой логотип в параметр «название / логотип» вашего редактора тем Bandzoogle. Затем добавьте любой текст, который вы хотите в заголовок, к функции заголовка «Призыв к действию». Таким образом, ваши важные сообщения не будут обрезаны краем дисплея.

Художник: Мартин и Джеймс

2. Обрежьте в соответствии с вашей темой

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

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

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

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

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

Затем вы можете отрегулировать масштаб с помощью ползунка масштабирования и щелкнуть / перетащить изображение в относительное положение.

3. Установите фокус

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

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

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

Художник: Анна Баси

4. Настройте высоту мобильного заголовка

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

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

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

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

После включения щелкните значок «Предварительный просмотр для мобильных устройств» в редакторе тем и отрегулируйте ползунок «Высота заголовка (для мобильных устройств)». изображение. Просто нажмите «Сохранить» после того, как вы установите это!

5. Добавьте фильтры

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

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

Художник: Карлин Уильямс

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

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

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

Создайте музыкальный веб-сайт с адаптивными изображениями всего за несколько кликов. Создайте свой веб-сайт с Bandzoogle уже сегодня!