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


Оглавление (нажмите, чтобы открыть):

Dobrovoi Master

Адаптивные изображения с помощью CSS

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

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

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

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.

HTML:

CSS:

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

Адаптивные изображения в колонках

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу значение inline-block для свойства display , т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.

1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.

HTML:

CSS:

2. Три колонки изображений

С трёх-колоночным макетом концепция та же, необходимо распределить ширину базового контейнера на три картинки, для этого достаточно установить значения ширины изображений около одной трети ширины контейнера: 32% .

HTML:

CSS:

Условная расстановка адаптивных изображений

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

HTML:

CSS:

/* Для небольших устройств (смартфоны) */ img < max-width: 100%; display: inline-block; >/* Для средних устройств (планшеты) */ @media (min-width: 420px) < img < max-width: 48%; >> /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) < img < max-width: 24%; >>

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

Адаптивное изображение на всю ширину экрана

Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.

CSS:

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

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

Источник: sixrevisions
Надеюсь буржуинский автор не будет на меня в обиде за столь вольный перевод)))

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

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

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

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

Если статья понравилась, то поделитесь ей в социальных сетях:

Корректно добавить изображения в адаптивный дизайн немного сложнее, чем в фиксированный макет.
Самый простой вариант — это определиться с каким-то средним разрешением для изображений и подготавливать картинки в соответствии с ним.
Для того чтобы изображение не превышало размер блока, в котором оно должно находится, в CSS можно добавить правило:
Это правило задаст изображению максимальную ширину, таким образом, оно не будет превышать ширину контейнера. Свойство height со значением auto обеспечит сохранение пропорций изображению при его уменьшении. Три последних CSS свойства (если необходимо) позволят отцентрировать изображение по горизонтали (когда ширина изображения меньше ширины контейнера).

Кроме этого, изображения на меленьких экранах желательно отображать так, чтобы они занимали всю ширину viewport. Если у вас имеется отступ для контента страницы, то его для изображения можно убрать, например, так (с помощью CSS):
Более сложный вариант заключается в том, чтобы подготовить различные версии одного и того же исходного изображения для различных классов устройств. Тут тоже необходимо определиться с форматами изображений. Например, можно выбрать следующие значения ширины: 375px, 750px и 1500px. В соответствии с значениями ширины именовать и файлы. Например, image1-375w.jpg (имеет ширину 375px), image2-750w.jpg (имеет ширину 750px), image1-1500w.jpg (имеет ширину 1500px).
При выводе изображения (img) использовать атрибуты srcset и size.
В srcset указать ширину изображения в пикселях:
В атрибуте sizes ширину, которую должна иметь изображение на том или ином устройстве.
vw — задаёт ширину картинки в зависимости от ширины viewport. 1vw = 1% от ширины viewport.

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

Адаптивный web-дизайн для начинающих

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

Что это такое?

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

Включает в себя такие основные методики:

  1. Используйте при разработке гибкий макет, создающийся с помощью сетки. Чтобы его создать, используйте относительные единицы измерения. Не используйте фиксированные значения, измеряемые в пикселях. Для этого изменяйте ширину в зависимости от свободного места на странице;
  2. Гибкость контента. Размер шрифта берется относительно размеру в 16рх. Если, например, фиксированный размер контента font-size: 32рх, относительный размер будет равен 32рх / 16 рх = 2em;
  3. Гибкие изображения. Для этого используется правило применяемое к тегу изображения img: img . Это правило говорит, что картинка не будет больше контейнера, в котором размещена и не будет больше своего истинного размера на больших экранах;
  4. Используйте медиазапросы. Они меняют стили в зависимости от разрешения экрана: изменяют ширину, высоту и положение на интернет – странице.

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

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

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

Как работает такой дизайн?

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

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

Важно! Такой дизайн нужно использовать при работе с большими интернет – проектами, не поддерживаемыми технологию Java Script.

Важные приемы

На странице оставьте только важную информацию. Такие интерфейсы где расположено минимум информации постепенно набирают популярность среди пользователей. Уберите лишние элементы дизайна с интернет – страницы. Это сделает интерфейс будет удобным для посетителя.

Для хорошего отображения на мобильных телефонах с маленькими экранчиками, используйте скрытые элементы управления: pop-up окна (открываются на странице после выполнения пользователем какого – то действия), off- canvas меню (невидимые по умолчанию и вызывающиеся при клике на специальную кнопку). При создании отзывчивого web – дизайна используйте svg изображения. Их можно редактировать, и при этом они не потеряют свое качество и хорошо смотрятся на Retina дисплеях.

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

Карточный интерфейс

Для его создания используются фигуры прямоугольной формы. Иногда их создают с закругленными углами. Это контейнеры для контента. Они самодостаточные и произвольно перемещаются по макету страницы.

Важно! Использование такого дизайна помогает бороться с высоким показателем отказов. Особенно высокий этот показатель у мобильных интернет – проектов, так как они предлагают урезанный вариант контента основного интернет – проекта. Роботы Гугла воспринимают это как нерелевантный контент для людей. Эти приведет к падению рейтинга, созданного интернет – проекта.

Как создать?

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

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

Предлагаю вам воспользоваться курсом, который называется «Верстка сайта с нуля». Ознакомиться подробнее с ним и скачать можно по адресу: www.srs.myrusakov.ru/makeup . Его создал Михаил Русаков.

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

Вывод

Чтобы созданный интернет – проект был посещаемым и авторитетным используйте отзывчивый дизайн. Используйте рекомендации, описанные выше, и созданный интернет – проект быстрее попадет в ТОП Гугла и Яндекса.

Хотелось бы закончить статью словами известного американского дизайнера Френка Химеро: «Идея хорошего дизайна заключается в том, чтобы заставить остальных дизайнеров почувствовать себя идиотами, потому что это не их идея».

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

Перевод статьи: How To Make WordPress Images Responsive.
Автор статьи: Sebastian Green.

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

Шаг 1. Вносим изменения в functions.php для генерации изображения с другими размерами.

Всегда, когда вы загружаете в систему изображение, оно сохраняется с его родными (исходными) размерами. Кроме того, WordPress автоматически генерирует 3 копии этого изображения с измененными стандартными размерами (высота или ширина могут варьироваться в зависимости от формата картинки):

  1. Thumbnail / Иконка (150 х 150).
  2. Medium / Средний размер (300 x 300).
  3. Large / Крупный размер (1024 x 1024).

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

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

Каждый вызов функции содержит имя создаваемой копии изображения (которое необходимо для идентификации системой) и его ширину. То есть у нас теперь имеются изображения 300, 600, 1200 и 2400 пикселей в ширину. Используемая здесь функция add_image_size способна и на большее. А именно, с ее помощью можно изменять высоту картинки или кадрировать ее, но в нашем примере мы используем эту функцию таким образом, что формат изображения остается неизменным. Мы лишь создаем его копии с разными размерами. Больше информации по функции add_image_size можно найти в WordPress кодексе .

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

Шаг 2. Установка плагина RICG Responsive Images .

Для того, чтобы WordPress мог использовать все размеры изображения, необходимо установить отвечающий за этот процесс плагин: RICG Responsive Images. Сразу же после его установки и активации все доступные копии изображения различных размеров будут включены в разметку посредством использования в соответствующем теге элемента-изображения атрибута srcset .

При добавлении изображения на страницу в WordPress, генерируемый HTML выглядит, как правило, вот так:

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

Сразу же после запуска плагина, разметка примет такой вид:

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

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

Ваши изображения превратились в отзывчивые.

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

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

Однако здесь существует одна потенциальная проблема, которая заключается в том, что данная схема работает только с теми изображениями, которые были загружены в систему уже после установки плагина RICG Responsive Images. Если ваш сайт абсолютно новый, то проблемы как бы вообще нет. Но в другом случае, когда вы пытаетесь изменить таким образом способ представления изображений на уже работающем сайте с достаточно большим объемом контента, все размещенные ранее изображения будут фиксированного размера. То есть добавленные в functions.php дополнительные вызовы функции add_image_size не будут применены к уже существующим изображениям, и соответственно их вариаций других размеров просто не существует. Хочу вас успокоить — нет, вам совсем не потребуется заново размещать уже существующие на сайте картинки. Есть другой плагин, который решит и эту проблему.

Шаг 3. Установка регенерирующего новые размеры изображений плагина (опционально).

Плагин Regenerate Thumbnails путем регенерации всех ранее загруженных на сайт изображений добавит их новые копии, размеры которых будут основаны на параметрах, указанных вами при редактировании файла functions.php . Неплохо, да? Этот плагин сэкономит вам кучу времени и сделает всю «грязную» работу всего в один клик.

Плагин достаточно прост в обращении. После его установки перейдите в меню «Tools» — «Regen. Thumbnails» и потом просто нажмите кнопку «Regenerate All Thumbnails». Появится индикатор хода выполнения процесса регенерации и программа сообщит вам, сколько изображений было обработано.

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

Оптимизация и создание отзывчивых изображений при помощи CSS

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

17 Сентябрь 2020

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

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


Способ 1

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

Посмотрим на пример ниже.

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

Способ 2

Но представьте, что такая магия существует и для элементов img? Давайте посмотрим на свойство object-fit, которое отлично работает как с изображениями, так и видеоконтентом. Да-да, и с ним тоже!

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

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

Способ 3

Сразу оговоримся, этот способ работает во всех браузерах и его суть в том, что изображение должно быть помещено в родительский элемент. При этом свойство padding нужно выражать в процентах, а свойство position установить в значение relative. Результат: изображение будет растянуто по всей площади родительского элемента. То есть, создается, например, некий «квадрат» и изображение полностью в нем и размещается.

В действительности такой вариант широко используется в мире. И он действительно прост. Особенно, если предстоит работать с внедрением видеороликов с того же YouTube и иных ресурсов; в случаях, когда соотношение сторон не изменяется. На практике при обычном внедрении видео могут появляться черные полосы. Чтобы их избежать как раз и подходит данный способ.

Пример на CodePen наглядно демонстрирует работу кода, как и частичка кода netflix.

Способ 4

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

Способ 5

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

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

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

Особенность данного метода также в том, что его можно комбинировать с тегом (HTML 5). В руководстве Mozilla есть хорошее описание данного метода. Как мы сказали, не все браузеры, особенно устаревшие версии, поддерживают srcset, поэтому его можно с легкостью заменить на img.

Пример использования всех тегов и атрибутов данного способа можно снова увидеть на CodePen.

Заметки на полях

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

  • Техника видеогиганта Netflix работает всегда, удобна при любых макетах и предполагает создание контейнера и использование свойства padding.
  • При работе над уменьшением времени загрузки страницы, при работе над мобильными (в приоритете) дизайнами и сайтами подходит атрибут srcset, который позволяет быстрее загрузить уменьшенные изображения.
  • Свойство object-fit использовать можно тогда, когда поддержка браузера IE 11 веб-верстальщику неважна как таковая. Будет работать сайт – хорошо, нет – ну и ладно. В противном случае, от этого способа придется отказаться.
  • Свойство height: auto позволяет решить большинство разных проблем и иные способы могут просто не потребоваться. Универсальная палочка-выручалочка, с которой стоит начинать, иногда. Особенность только в том, что здесь нет определения четких размеров изображения, а значит, например, для интернет-магазина и карточек товара такой метод определенно не подходит.
  • В случае, когда изображение используется только как оформление фона, но не является контентом само по себе, то вполне подходит background-image, название которого и говорит само за себя.

Завершение

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

Так или иначе, даже Google в своем блоге для разработчиков посвящали данной теме целый огромный материал. И все же не всегда, посещая тот или иной сайт и на РС, и на мобильном устройстве можно увидеть красивый макет с адаптивными картинками. Увы, но верстальщики, видимо, работают, что называется «на скорость» и за качеством особо не наблюдают.

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

26 психологических приемов для работы с отзывами пользователей Материал редакции

Маркетолог и автор книг Ник Коленда проанализировал выводы 202 академических исследований и опубликовал материал о том, какие психологические приемы следует использовать при работе с пользовательскими отзывами. Редакция vc.ru публикует перевод статьи.

Отзывы клиентов повсюду. Только на сервисе TripAdvisor их более 385 миллионов штук. Если бы каждый был написан на стикере, то высота стопки составила бы 38,5 тысяч метров. Это в четыре раза выше горы Эверест. Представьте что будет, если добавить сюда и другие платформы (например, Amazon, Yelp и Walmart).

Но несмотря на количество отзывов, в интернете о них очень мало прикладной информации. Мало кто знает о том:

  • Какие отзывы более эффективны?
  • Как бороться с негативными оценками?
  • Как побудить клиентов писать более подробные отзывы?

Чтобы найти ответы на эти вопросы, я залез на Google Scholar и прочитал выводы 202 академических исследований, которые охватили более 12 миллионов отзывов. Я узнал много нового, и постарался структурировать информацию. У меня получилось пять секций и 26 советов.

Секция №1. Форма выражения

1. Установите максимальное количество символов для заголовка отзыва

В 2014 году исследователи Сэлихан и Ким проанализировали 35 тысяч отзывов на Amazon. Они выяснили, что длина заголовка влияет на читаемость комментария:

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

— из исследования Сэлихан и Ким

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

2. Установите минимальное количество символов для отзыва

Для тела отзыва картина обратная. В 2015 году исследователи Бьеринг, Хавро и Моэн проанализировали 1,4 миллиона отзывов на Amazon и обнаружили, что чем длиннее сам отзыв, тем более убедительным он кажется пользователям.

Чтобы поощрить клиентов писать более объемные сообщения, вы можете установить минимальную или рекомендуемую длину комментария.

3. Вычисляйте (и помогайте исправлять) грамматические и орфографические ошибки

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

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

4. Не скрывайте недостатки вашего продукта

Я знаю, это звучит странно, ведь обычно отзывы нужны, чтобы продвигать продукт, верно? Тогда зачем же говорить о нем плохо? Оказывается, люди в большей степени доверяют тем рецензиям, которые описывают не только плюсы, но и минусы продукта или компании. Это в 2009 году выяснили исследователи Дох и Хуанг.

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

5. Используйте «якоря», чтобы побудить посетителей написать положительный отзыв

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

Предположим, что вы рекламная платформа, которая продает объявления по модели PPC (оплата за один клик). Вам выгодно, чтобы люди закладывали более высокий бюджет. Вот как это делает сервис Outbrain:

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

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

6. Разбивайте отзыв на составные элементы

Отзывы на сайте для поиска работы Glassdoor разбиты на подзаголовки (плюсы, минусы, рекомендации руководству и так далее). С одной стороны, структурированные отзывы выглядят более убедительными (как выявило исследование Маккевича и Йейтса).

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

7. Задавайте такие вопросы, которые помогут сделать отзыв более убедительным

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

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

Попросите клиентов описать, как они искали товар

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

Вот пример отзыва: «Я посетил очень много магазинов и никак не мог найти подходящие кроссовки. Мне помогли сотрудники этой компании. Они оказались очень отзывчивыми и внимательными».

Попросите клиентов рассказать об опыте использования аналогичных товаров

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

Попросите клиентов описать, как именно они используют продукт

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

Пример: «Видеокурс йоги так расслабляет. Я смотрю его каждый раз, когда у меня плохой день на работе».

Попросите клиентов рассказать, какие эмоции вызывает у них продукт (для спонтанных покупок)

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

Например, чтобы увеличить продажи рыбного отдела:

  • Метафора: Вы найдете море рыбы на любой вкус.
  • Буквальное значение: В рыбном отделе большой ассортимент.

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

8. Поощряйте пользователей выкладывать изображения или видео

Благодаря видео (коллективное исследование под руководством профессора Кентуккийского университета Бэй Сюя) и фото (коллективное исследование под руководством профессора Тайваньского национального технологического университета И-Сю Чэна) отзывы становятся более убедительными.

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

Секция №2. Источник информации

9. Показывайте отзывы от постоянных клиентов

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

По этой причине отзывы постоянных покупателей оцениваются выше, чем экспертов (коллективное исследование преподавателей Гонконгского университета под руководством профессора Мэн-Сян Ли). Новые клиенты не олицетворяют себя с экспертами. Им ближе условный Иванов Иван Иванович.

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

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

Мы живем в мире, где поддельные отзывы может купить каждая компания. Например, я обратился в одно такое агентство, притворившись, что мне нужна хвалебная рекомендация для компании под названием Adnelok (вообще это моя фамилия наоборот). И вот что мне прислали:

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

Если по каким-то причинам вы не можете отобразить статус покупателя, поощряйте клиентов выкладывать селфи с продуктом ( исследование Яна, Чена и Тана, 2014).

11. Отображайте настоящие имена пользователей

Некоторые пользовательские имена не внушают доверия.

Разумеется, большинство окажутся вполне неплохими (например, ivanivanov). Но настоящие человеческие имена будут выглядеть гораздо более убедительными. Профессор Университета Суррея Сангвон Парк и маркетолог компании Beijing Blasacapital Чживэй Лю обнаружили прямую связь между реалистичностью имени и убедительностью отзыва.

12. Отображайте статистику пользователей

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

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

13. Позвольте пользователям подписываться друг на друга

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

Секция №3. Сортировка

14. Выделяйте один позитивный и один негативный отзыв


Это тактика Amazon. На странице продукта сервис выделяет один негативный и один позитивный обзор. Такому гиганту сложно не поверить, потому что кто-кто, а Amazon наверняка регулярно проводит A/B-тесты своего сайта. Кроме того, популярные сервисы собирают много данных. Они знают, что работает, а что нет.

Но почему это работает? Здесь используется тот же эффект, что и в пункте №4 — люди в большей степени доверяют отзывам, если там содержатся не только плюсы, но и минусы. Кроме того, негативный отзыв вызывает « эффект оплошности»:

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

— исследование Айн-Гар, Шив и Тормала, 2012 год

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

15. Сортируйте отзывы в зависимости от их полезности или оценки

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

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

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

16. Добавьте критерии для сортировки отзывов

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

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

Большинство пользователей не пользуются сортировкой. Однако, как выяснила профессор университета Твенте Нина Олешовски, существование этой опции повышает уверенность посетителей в достоверности рецензий.

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

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

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

Секция №4. Рейтинги

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

Большинство компаний стремятся получить максимально возможное количество звезд. Однако это не всегда продуктивно. В 2020 году группа исследователей под руководством профессора Евы Масловски из Амстердамского университета проанализировала данные о покупках в интернет-магазинах. Оказалось, что люди охотнее приобретают товары с умеренно высоким рейтингом (4-4,5 звезд из пяти), чем с высоким рейтингом (4,5-5 звезд из пяти).

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

19. Используйте более простые критерии оценки для нишевых продуктов

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

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

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

20. Показывайте различные критерии оценки продукта

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

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

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

21. Дайте пользователям возможность оценивать полезность каждого обзора

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

Или чтобы побуждать пользователей писать более полезные отзывы.

Кроме того, можно ввести дополнительные критерии оценки:

  • Была ли эта рецензия полезной? Да или нет.
  • Была ли она смешной? Да или нет.
  • Было ли ее легко читать? Да или нет.

Посмотрите, как это реализовано у сервиса Yelp:

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

22. Используйте микроразметку Schema.org, чтобы отзывы отображались в поисковой выборке

Schema.org — это словарь семантической разметки страницы. Благодаря появлению звезд в поисковой выдаче, вы можете улучшить процент переходов по ссылке (CTR) и улучшить положение страницы в рейтинге поисковых систем.

Секция №5. Работа с негативными отзывами

23. Позвольте пользователям комментировать отзывы других пользователей

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

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

24. Отвечайте на негативные отзывы

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

  • Отели получают на 60% больше бронирований через интернет (коллективное исследование под руководством профессора Харбинского технологического института Цян Е).
  • Общие рейтинги увеличиваются на 20% (исследование профессора Университета Куинс в Кингстоне Стюарта Макилроя).
  • Объем рецензий увеличивается на 17% (коллективное исследование под руководством профессора Денверского университета Карен Се).

25. Предотвращайте появление отзывов с ненормативной лексикой

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

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

26. Позвольте пользователям сообщать о появлении нецензурных отзывов

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

Responsive images

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

Требования: Предполагается, что вы уже знакомы с основами HTML и умеете добавлять статичные изображения на веб-страницу.
Цель: Узнать, как использовать такие элементы, как srcset и служит контейнером для одного или более элементов и одного элемента для обеспечения оптимальной версии изображения для различных размеров экрана.»>

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

Почему гибкие изображения?

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

Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:

  • Содержимому тега main задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остается на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.
  • Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) все равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.
  • Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изобаржения начинают сжиматься и остаются всегда внутри body, а не выступают за его пределы.

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

Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как art direction problem.

Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется resolution switching problem — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате пропускной способности канала — пользователи мобильных устройств особенно не хотят перегружать пропускной канал большим изображением для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько изображений в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к вебсайту.

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

Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше.

Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. Технологии отзывчивых изображений были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (resolution switching), или разные изображения с отдельными областями основного изображения (art direction).

— все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).

Как сделать изображения гибкими?

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

Разные разрешения: Разные размеры

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

Однако есть два новых атрибута — srcset and sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responsive.html (также смотри источник кода).

Атрибуты srcset и sizes кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:

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

  1. Название изображения ( elva-fairy-480w.jpg .)
  2. Пробел.
  3. Актуальная ширина картинкив пикселах ( 480w ) — заметьте, что здесь используется w вместо px , как вы могли ожидать. Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать Cmd + I , чтобы вывести информацию на экран).

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

  1. Медиа-условие ( (max-width:480px) ) — вы можете больше узнать об этом в CSS topic, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим «когда viewport width меньше или равен 480 пикселям».
  2. Пробел.
  3. Ширину слота (в оригинале «width of the slot»), занимаемую изображением, когда медиа-условие истинно. ( 440px )

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

Итак, с такими атрибутами, браузер сделает следующее:

  1. Посмотрит на ширину экрана устройства.
  2. Попытается определить подходящее медиа-условие из списка в атрибуте sizes .
  3. Посмотрит на размер слота к этому медиа-запросу.
  4. Загрузит наиболее подходящее изображение руководствуясь списком из srcset .

И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px , тогда будет загружено изображение elva-fairy-480w.jpg , так как свойство ширины ( 480w ) наиболее близко значение 440px . Условно, изоображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.

Старые брузеры, не поддерживающие эти возможности, просто проигнорируют их и возьму изображение по адресу из атрибута src .

Note: В элемента документа содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.»> вы найдёте строку : это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)

Useful developer tools

There are some useful developer tools in browsers to help with working out the necessary slot widths, etc, that you need to use. When I was working them out, I first loaded up the non-responsive version of my example ( not-responsive.html ), then went into Responsive Design View (Tools > Web Developer > Responsive Design View), which allows you to look at your web page layouts as if they were being viewed through a variety of different device screen sizes.

I set the viewport width to 320px then 480px; for each one I went into the DOM Inspector, clicked on the встраивает изображение в документ. Это замещаемый элемент.»> element we are interested in, then looked at its size in the Box Model view tab on the right hand side of the display. This should give you the inherent image widths you need.

Next, you can check whether the srcset is working by setting the viewport width to what you want (set it to a narrow width, for example), opening the Network Inspector (Tools > Web Developer > Network), then reloading the page. This should give you a list of the assets that were downloaded to make up the webpage, and here you can check which image file was chosen for download.

Resolution switching: Same size, different resolutions

If you’re supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax! You can find an example of what this looks like in srcset-resolutions.html (see also the source code):

In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):

In this case, sizes is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset . So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don’t need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the elva-fairy-640w.jpg image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.

Art direction

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The служит контейнером для одного или более элементов и одного элемента для обеспечения оптимальной версии изображения для различных размеров экрана.»>

element allows us to implement just this kind of solution.

Returning to our original not-responsive.html example, we have an image that badly needs art direction:


  • The elements include a media attribute that contains a media condition — as with the first srcset example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, If the viewport width is 799px wide or less, the first element’s image will be displayed. If the viewport width is 800px or more, it’ll be the second one.
  • The srcset attributes contain the path to the image to display. Note that just as we saw with above, can take a srcset attribute with multiple images referenced, and a sizes attribute too. So you could offer multiple images via a

element, but then also offer multiple resolutions of each one too. Realistically, you probably won’t want to do this kind of thing very often.
In all cases, you must provide an element, with src and alt , right before

, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second element in this example), and a fallback for browsers that don’t support the

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

Note: You should use the media attribute only in art direction scenarios; when you do use media , don’t also offer media conditions within the sizes attribute.

Why can’t we just do this using CSS or JavaScript?

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page’s CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset . You couldn’t for example load the встраивает изображение в документ. Это замещаемый элемент.»> element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

Use modern image formats boldly

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

  • Do not use the media attribute, unless you also need art direction.
  • In a element, you can only refer to images of the type declared in type .
  • As before, you’re welcome to use comma-separated lists with srcset and sizes , as needed.

Active learning: Implementing your own responsive images

For this active learning, we’re expecting you to be brave and go it alone . mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using

, and a resolution switching example that uses srcset .

  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like)
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)
  3. Use the

element to implement an art direction picture switcher!

  • Create multiple image files of different sizes, each showing the same picture.
  • Use srcset / size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport w >

    Note: Use the browser devtools to help work out what sizes you need, as mentioned above.

    Summary

    That’s a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we’ve been discussing here:

      Art direction: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in close for a mobile layout. This can be solved using the служит контейнером для одного или более элементов и одного элемента для обеспечения оптимальной версии изображения для различных размеров экрана.»>

    element.

  • Resolution switching: The problem whereby you want to serve smaller image files to narrow screen devices, as they don’t need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. This can be solved using vector graphics (SVG images), and the srcset and sizes attributes.
  • This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.

    H Правильное использование тега «picture» для растягивающих изображений (HTML5) в черновиках Из песочницы

    .collapse»>Содержание

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

    именно в таком дизайне.

    Итак, первая проблема

    Дни фиксированной ширины и точных пикселей для веб-дизайна позади и это хорошо. В наши дни широкоэкранных мониторов, интернет-телевизоров, планшетов разных размеров и смартфонов множество, от 320px до 7680px и больше в ширину. Каждый проект будет страдать если не будет автоматически подстраиваться под эти размеры.

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

    Так что же нам делать?

    Текущий, один из лучших способов

    Как правило, вы найдете следующее CSS строки в любом растягивающем сайте:

    В этом коде используется свойство max-width: 100%; указания которого обеспечит, что изображения никогда не выходят за пределы ширины родительского контейнера. Если родительский контейнер сжимается меньше ширины изображения, изображение будет сворачивать вместе с ней. Свойство height: auto; обеспечит нам правильное соотношение сторон изображения сохраняя исходное.

    Одно изображения подходит под любую ширину

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

    Новое решения

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

    • Результатов медиа запросов, высоты, ширины, ориентации
    • Плотности пикселей

    Это в свою очередь означает, что вы можете:

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

    Различные изображения изменяются, в зависимости от обстоятельств

    Как работать с

    являются:

      Открыть и закрыть тег

  • В этих тегах, вставить теги — элемент для каждого запроса, который необходимо запустить
  • Добавить media атрибут, содержащий свойства такие как высота окна просмотра, ширина, ориентация и т.д.
  • Добавить атрибут srcset — путь изображения для загрузки.
  • Можно добавить дополнительные пути к файлам в атрибут srcset , если вы хотите, обеспечить идеальное изображения для различных плотностей пикселей, например Retina дисплеев.
  • Добавить резервный элемент.
  • Вот простой пример, который проверяет, является ли ширина просмотра меньше, чем 768px, если так — загружает меньшее изображение:

    Хочу заметить, что синтаксис, используемый в атрибуте такой же, как в CSS запросах других медиа. Вы можете использовать несколько проверок, то есть вы можете запросить max-width , min-width , max-height , min-height , orientation и так далее.

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

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

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

    Использования

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

    В то же время, если вы не хотите ждать, но хотите использовать

    прямо сейчас. Можете использовать Picturefill 2.0 разработанный Filament Group.

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

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

    При этом сценарий загрузки

    элемента будет работать, как я объяснил, только с несколькими ограничениями.

    Полное руководство по иллюстрированию контента: от выбора картинок до оптимизации

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

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

    Зачем тексту визуальное дополнение

    Самая большая ошибка, которую можно совершить при иллюстрировании контента – добавить картинки чтобы «было красиво» и потому, что «все так делают».

    Основные функции иллюстраций таковы.

    Повышение вовлеченности пользователей

    Изображения делают текст удобнее для чтения. Если перед читателем стоит выбор – огромная текстовая «простыня» или визуально структурированный контент, то вероятнее он выберет второй вариант, поскольку его легче воспринимать. Если бы в своем блоге мы рассказывали о популярности Instagram Stories текстом, получилось бы менее понятно:

    Дополнение авторской мысли

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

    Воздействие на эмоции читателей

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

    Прежде чем иллюстрировать контент, задайте себе вопрос «Зачем?». Если картинка не имеет ясной цели, значит, она не нужна.

    На картинке слева мало понятно, как соотносятся лицо и искусственное яблоко, а вот на изображении справа показан описываемый объект:

    Когда отсутствие иллюстраций лучше их наличия

    Если изображение не релевантно контенту – это плохо. Но еще хуже шаблонные картинки. Вот лишь несколько примеров.

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

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

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

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

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

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

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

    Отличить хорошую иллюстрацию можно по следующим признакам:

    • Честность – изображение выглядит реально и жизненно. Фальшь на фото и картинках вызывает недоверие к тексту и распознается пользователями очень быстро. К примеру, фотостоковое изображение фермера в спецовке «с иголочки» и с белоснежной улыбкой вряд ли будет уместным в статье о труде сельхозработников где-то в российской глубинке.
    • Понятность – читателю ясно, что хотел сообщить автор посредством изображения. Допустим, портретное фото красивой девушки в тексте о процедурной косметологии может означать что угодно или не значить ничего. А вот по фото той же девушки в кабинете косметолога понятно, что речь пойдет о косметологических процедурах.
    • Конкретность – картинка поясняет, дополняет, визуализирует или выполняет иное полезное действие. Слишком общие и отвлеченные сюжеты – это как раз тот случай, когда картинка использована «чтобы была». Например, фото реального человека на сайте адвоката смотрится уместнее, чем ретро-интерьер:


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

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

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

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

    Как применять картинки с фотостоков

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

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

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

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

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

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

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

    Для бесплатного иллюстрирования контента подходят фото c лицензией Creative Commons. У нее есть 6 типов, у каждого – свои ограничения. Общим является необходимость указания авторства во всех случаях. Для коммерческого использования пригодны фото с лицензией:

    • CC Attribution (CC-BY) – допускается редактирование и изменение изображений;
    • CC Attribution — Share Alike (CC-BY-SA) – лицензия распространяется на весь контент, созданный на основе изображения;
    • CC Attribution — No Derivative Works (CC-BY-ND) – любое изменение изображения запрещено.

    Остальные 3 типа лицензии Creative Commons предусмотрены для некоммерческого использования. Целесообразнее избегать их применения, поскольку в спорных ситуациях может быть сложно доказать отсутствие выгоды от использования.

    Без указания авторства можно использовать только материалы с лицензией CC Zero (CC0), означающую передачу в свободное использование (общее достояние).

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

    Pixabay распространяет изображения по собственной лицензии и ссылка на условия опубликована рядом с фото:

    Уникальные изображения можно найти на платных фотостоках/фотобанках:

    Но и при покупке изображений нужно учитывать отличия лицензий:

    • Royalty Free – можно использовать только на условиях автора (количество раз использования, разрешение, срок использования), число продаж изображения автором не ограничено;
    • Extended Royalty Free – расширенная лицензия Royalty Free;
    • Right Managed – условия использования оговариваются при продаже;
    • Exclusive Buyout – покупатель получает эксклюзивное право использования, автор не может продать изображение кому-то еще;
    • Editorial – редакционные фото только для ознакомительных целей;
    • Rights-Ready license – изображение под проект.

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

    Где еще брать иллюстрации

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

    Собственные фотографии

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

    Посмотреть, как могут выглядеть фотографии, сделанные на телефон, можно на сайте Mobile Photography Awards:

    Скриншоты

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

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

    Рисунки

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

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

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

    Схемы

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

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

    Бизнес-план по открытию интернет-магазина выполнен в виде майнд-карты:

    Графики и диаграммы

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

    Инфографика

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

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

    Видео

    Подходящие видеоролики поищите на популярных видеохостингах:

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

    Найдите подходящее видео на YouTube, нажмите кнопку «Поделиться», выберите функцию «Встроить» и скопируйте код для вставки:

    Видеоанимация

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

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

    Gif-анимация

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

    Для создания гифки просто загрузите видео, изображения или укажите URL картинок:

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

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

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

    Давайте изображению правильное название

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

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

    Заполняйте атрибуты title и alt

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

    Используйте в атрибутах ключевые слова для пояснения содержания картинки роботам, что полезно для ранжирования. Оптимальный размер title – до 250 символов, alt – до 125 символов.

    Правильно выбирайте формат

    От формата зависит размер картинки по «весу»:

    • GIF – небольшой вес до 1 Мб, при сжатии качество сохраняется, доступна прозрачность и анимация, поддерживается всеми браузерами;
    • JPEG – вес до 1 Мб, качество при сжатии теряется, прозрачности и анимации нет, поддерживается всеми браузерами;
    • PNG – большой вес до 2 Мб, качество при сжатии сохраняется, анимации нет, прозрачность доступна, поддерживается всеми браузерами.

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

    Сжимайте картинки с заботой о качестве

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

    • выбрать формат JPEG;
    • изменить размер изображения;
    • снизить качество до 60-80 %.

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

    Чтобы отследить изменение скорости загрузки сайта, до и после сжатия картинок проверьте скорость загрузки страниц через Google PageSpeed Insights.

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

    Адаптируйте изображения к разным устройствам

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

    В зависимости от типа устройства браузер выберет и покажет подходящее изображение.

    Размещайте изображения на собственном хостинге

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

    Кроме того, картинка с другого сайта, вставленная по ссылке – это линк, который передает часть своего веса источнику. Поэтому лучше максимально оптимизировать картинку и поместить ее на свой сайт.

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

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

    1. Добавляйте иллюстрации, имеющие четкую цель.
    2. Используйте качественные изображения, релевантные контенту.
    3. Иллюстрируйте только самые важные мысли.
    4. Соблюдайте авторское право и не воруйте картинки.
    5. В зависимости от задачи выбирайте подходящие варианты иллюстрирования.
    6. Для каждой картинки придумайте название, заполните title и alt.
    7. Правильно выбирайте формат изображения, используйте сжатие и адаптацию.
    8. Все изображения сохраняйте в нужном размере на своем хостинге.

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

    Основные принципы «отзывчивого» веб-дизайна показали в GIF

    Стартап Froont (разрабатывает платформу для создания сайтов с «отзывчивым» дизайном) описал девять основных принципов «отзывчивого» веб-дизайна (responsive web design) в GIF-изображениях. Look At Me приводит советы разработчиков Froont. Стоит отметить, что «отзывчивым» веб-дизайном принято называть понятие, которое является частью адаптивного веб-дизайна (adaptive web design), но касается только макета страницы.

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

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

    Относительные величины. «Макет будет открываться на десктопах, мобильных и каких-то других устройствах. При этом плотность пикселей у них тоже может меняться. Поэтому нужно работать с гибкими единицами, то есть с процентами. Если вы задаёте для чего-то ширину 50 %, то оно будет занимать половину экрана на любом устройстве (или половину окна браузера)».

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

    Максимальные и минимальные величины. «Прекрасно, когда контент занимает всю ширину экрана, как, например, на мобильных устройствах. Но растягивать его по всей ширине экрана телевизора не имеет смысла. Здесь помогут максимальные и минимальные значения. Например, можно задать ширину 100 % и максимальную ширину 1000px. Тогда контент заполнит всю ширину экрана, но не превысит 1000px по ширине».

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

    Mobile first или desktop first. «Технически не такая большая разница: запускается проект на маленьком экране, а потом переносится на большой, или наоборот. Тем не менее mobile first создаёт дополнительные ограничения. Часто разработчики начинают делать две версии сразу, чтобы посмотреть, какая получается лучше».

    Подключаемые или системные шрифты. «Хотите иметь Futura или Didot на сайте? Используйте подключаемые шрифты — они будут выглядеть великолепно. Но каждый из них загружается отдельно, и чем больше их будет, тем больше времени уйдёт на загрузку страницы. А системные шрифты работают очень быстро. За исключением тех случаев, когда их нет у пользователя на устройстве».

    Растровые или векторные изображения. «В иконке много деталей? Тогда используйте растровое изображение. Если нет, то подумайте насчёт векторных. И те и другие имеют свои достоинства и недостатки. Однако помните о размере файла — все картинки для интернета должны оптимизироваться. Векторные изображения весят совсем мало, но старые браузеры их не поддерживают. Тем более, если в векторном файле очень много кривых, то он будет „тяжелее“ растрового».

    Мастер Йода рекомендует:  Как узнать сколько человек на сайте (PHP)
    Добавить комментарий