Средства Bootstrap для оформления изображений
В этой статье познакомимся с классами фреймворка Bootstrap 3 и 4, предназначенными для оформления изображений.
Класс для придания изображениям гибкости
Так как Bootstrap предназначен для создания адаптивных сайтов, то изображения при построении такой сетки не должны выходить за пределы своего блока (элемента, в который каждое из них помещено).
Чтобы сделать изображения гибкими к ним нужно добавить специальные классы этого фреймворка:
После этого, размеры изображения будут уменьшаться, если его ширина будет больше ширины элемента, в котором оно находится.
При необходимости можно не добавлять этот класс к каждому изображению, а выполнить это с помощью CSS. Для этого нужно в свой файл CSS внести одно из следующих CSS-правил:
Если необходимо сделать не все изображения на странице гибкими, а только те, которые расположены в определённом блоке, то в этом случае это необходимо определить с помощью CSS-селекторов:
При необходимости изображениям можно задать определённый размер. Осуществляется это с помощью стандартных атрибутов width и height :
При таком сценарии изображение останется гибким, т.е. его размеры не будут превышать максимальной ширины блока, в котором оно находится.
Классы для изменения формы изображения и задания тени
Кроме этого, в Bootstrap 4 ещё имеются классы, с помощью которых вы можете добавить к изображению тень.
Классы для выравнивания изображений
Изменить положение изображения в Bootstrap можно с помощью утилитных классов:
Варианты оформления изображений
В этом разделе рассмотрим примеры оформления изображений с помощью CSS.
1. Пример, в котором показано как можно разместить текст поверх изображения.
В этом примере для размещения текста поверх изображения используется техника совместного использования относительного и абсолютного позиционирования. Познакомиться с методами позиционирования элементов в CSS можно в этой статье.
5. Пример, в котором показана CSS3 техника для установки фонового изображения на весь экран.
6. Пример, в котором элементу установим фоновое изображение.
Изображение применять в качестве фона рекомендуется только в том случае, если оно не является частью контента, а используется только для оформления.
Комментарии:
Смысл данной технологии (Client Hints) заключается в том, чтобы послать серверу в составе запросов для получения изображений дополнительную информацию (DPR, Width, Viewport-Width — т.е. плотность пикселей экрана, его ширину и ширину viewport). Добавляется Client Hints в браузер легко посредством вставки в раздел head следующего тега:
После этого браузер в заголовочную информацию запроса для каждой картинки будет включать эти данные. Но это действие пока делает только браузер Chrome.
Самое сложное — это сервер. Получив такой запрос на сервере, вы должны его как-то обработать. Иначе в Client Hints не будет смысла. Т.е. необходимо написать серверный скрипт, который например, будет искать подходящую картинку по этим параметрам, и отдавать её клиенту (браузеру). А если картинки с нужными параметрами нет, то, например, её генерировать из исходного файла.
Т.е. как-то так. Жертвуя одним (процессорным временем и дисковым пространством) — вы получаете взамен что-то другое, в данном случае более быструю загрузку изображений (т.к. они будут отдаваться сервером в более оптимальном разрешении).
Но можно получить и обратный эффект (более долгую отдачу страниц), например, если вы используете виртуальный хостинг и процессор «слабенький» (или нагружен сильно).
Простой подход к работе с отзывчивыми изображениями
Вывод отзывчивых изображений предусматривает применение достаточно сложной логики. Сюда, кроме прочего, входит определение того, изображение какого размера будет выведено, а также выяснение того, работает ли пользователь с экраном высокого разрешения. К счастью, браузеры лучше, чем люди, умеют определять то, какие именно изображения лучше всего подходят каждому конкретному пользователю. Всё, что нам нужно — это дать им некоторые подсказки. Атрибут srcset даёт браузеру список графических ресурсов, из которых он может выбирать наиболее подходящее изображение. Атрибут sizes позволяет сообщить браузеру о том, изображение какого размера нужно показать в том или ином случае.
И, кстати, пользуясь отзывчивыми изображениями можно не беспокоиться о браузерной поддержке этой технологии. Интересующие нас атрибуты пользуются прекрасной поддержкой браузеров. И, кроме того, в нашем распоряжении имеется резервный механизм, предназначенный для старых браузеров вроде IE11.
Как тег «общается» с браузером
Вот как тег сообщает браузеру о том, какое изображение нужно выбрать.
«Разговор» тега и браузера
Здесь тег сообщает браузеру следующее: «При таком размере экрана я буду выводиться в примерно следующем размере (указывает на атрибут sizes ). Можешь взять любое из этих изображений, которые имеют следующую ширину (указывает на атрибут srcset ). Поэтому, пожалуйста, выбери то изображение, которое сейчас подходит лучше всего».
Атрибут srcset
Атрибут srcset даёт браузеру набор графических ресурсов, из которых он может выбирать самый подходящий. Здесь же находятся сведения о размере каждого из предлагаемых изображений.
Описывая набор изображений таким способом, мы сообщаем браузеру следующее: «Я даю тебе список изображений и доверяю тебе выбор самого подходящего».
Браузер выберет наилучшее изображение, руководствуясь сложным набором критериев, в которые входит то, изображение какого размера выводится у пользователя, то, каков текущий размер области просмотра, и то, имеется ли у пользователя дисплей высокого разрешения.
Браузер достаточно интеллектуален для того чтобы знать, что на настольном дисплее низкого разрешения, в том случае, если ширина выводимого изображения составляет 800 пикселей, нужно выбрать из списка то изображение, ширина которого составляет, как минимум, 800 пикселей.
Браузер, кроме того, знает о том, что если изображение шириной 320 пикселей выводится на дисплее высокого разрешения, нужно выбрать файл изображения, которое имеет в ширину, как минимум, 640 пикселей. В результате нам не нужно беспокоиться об 1x- и 2x-графических ресурсах. Всё, что нужно сделать — это дать браузеру хороший набор изображений и позволить ему делать своё дело.
Как описывать изображения, подходящие для разных экранов?
Атрибут sizes
Атрибут srcset — это прекрасный инструмент. Но когда браузер читает HTML-код страницы, он не знает о том, используется ли, например, CSS-стиль, который устанавливает размер изображения в 50% от ширины экрана.
В атрибуте sizes содержится список медиа-условий, разделённых запятыми. Медиа-условия — это подмножество медиа-запросов. Тут нельзя указывать тип среды, к которой применимо условие ( print или screen ), но можно использовать медиа-запросы, относящиеся к ширине области просмотра.
Последний элемент списка не снабжён медиа-условием. Если внести в список ширину и не указать медиа-условие, соответствующее значение будет рассматриваться как значение, используемое по умолчанию, то есть — в том случае, если ни одно из других условий не выполняется.
Браузер будет просматривать этот список сверху вниз и остановится на первом подходящем элементе, соответствующем ширине области просмотра.
Предположим, что в атрибуте sizes находится следующее:
Вот что будет происходить в разных ситуациях:
Как готовить список изображений, из которых браузер будет выбирать наиболее подходящее?
Атрибут src
Вопросы и ответы
▍Как генерировать наборы изображений?
Изображения можно генерировать разными способами: вручную, с использованием инструмента для создания отзывчивых изображений, с применением соответствующих возможностей CDN.
Для того чтобы создать изображения вручную, нужно открыть исходное изображение в Photoshop (или в другом редакторе, которым вы пользуетесь) и экспортировать его во всех необходимых размерах.
Это может потребовать достаточно много времени, поэтому у вас может возникнуть желание автоматизировать эту работу, воспользовавшись соответствующим инструментом. Среди подобных инструментов мне больше всего нравится Responsive Image Breakpoints Generator от Cloudinary. При работе с этим инструментом достаточно передать ему изображение, после чего он автоматически создаст его варианты разных размеров. Тут можно настроить количество генерируемых изображений. После того, как изображения готовы, их можно загрузить и использовать в проекте.
Ещё один вариант поддержки отзывчивых изображений заключается в том, чтобы использовать для их хостинга соответствующую CDN. Например — Cloudinary или imgix. Используя подобный сервис, на CDN загружают изображение в наивысшем имеющемся разрешении. Затем можно запрашивать версии изображения разных размеров, пользуясь URL-параметрами. При этом вам не придётся заботиться об изменении размеров изображения: достаточно сообщить CDN о том, в каком размере вы собираетесь выводить соответствующее изображение.
Вот список сервисов и проектов, которыми можно воспользоваться для создания вариантов изображений разных размеров.
▍Изображения каких размеров следует предоставлять браузеру?
Хороший вопрос! Если вы дадите браузеру слишком много графических ресурсов, то вы попросту впустую потратите время и силы на их создание. Если же ресурсов будет слишком мало — это будет означать, что вы принуждаете пользователей вашего сайта к загрузке изображений, размеры которых больше, чем им нужно.
Стандартный набор размеров изображений шириной от 320 до 2560 пикселей
Однако использование стандартного набора ресурсов — это всегда менее эффективно, чем применение собственного набора, учитывающего особенности проекта. В данном случае, хотя перед нами — вполне логичная последовательность, в ней наблюдается прогрессивное увеличение размеров файлов, так как, если ширина (и, соответственно, высота) изображения увеличивается вдвое, то количество пикселей этого изображения увеличивается в четыре раза. В результате, если вам приходится использовать стандартный набор размеров изображений, то вам, возможно, следует выбрать такой набор, в котором будет меньше вариантов изображений маленьких размеров и больше вариантов больших размеров.
▍Какие значения следует вносить в атрибут sizes?
Иногда это определяется шириной самого изображения:
В данном случае имеются два фиксированных варианта размера изображения. Этот факт может найти прямое отражение в атрибуте sizes :
Однако часто оказывается так, что размеры изображений настраиваются гибко. Нередко изображения наследуют размеры от своих контейнеров:
Как видите, настройка атрибута sizes сильно зависит от особенностей конкретного макета. Обычно я строю работу, начиная с исследования изображений в инструментах разработчика браузера и выясняя то, какие параметры влияют на размер изображений.
▍Как проверить правильность настройки отзывчивых изображений?
Легко представить себе то, что тестирование правильности настройки отзывчивых изображений может быть сложным и длительным делом. Но, к нашему счастью, существует инструмент, упрощающий решение подобных задач. Это — Responsive Image Linter.
Это — букмарклет, который можно добавить в браузер и использовать на собственном сайте. Когда его вызывают, он автоматически сканирует страницу, используя для тестирования изображений различные размеры области просмотра и плотность пикселей экрана.
Затем он выводит отчёт, содержащий сведения обо всех изображениях страницы, и о том, правильно ли организовано управление их размерами. Если при испытании страницы что-то пойдёт не так — вам об этом сообщат и даже дадут совет по устранению проблемы.
Итоги
Как видите, комбинация атрибутов srcset и sizes даёт огромные возможности. Настраивая эти два атрибута, вы сообщаете браузеру о ширине изображений, которые нужно использовать при определённой ширине области просмотра, и даёте список графических ресурсов, из которых браузер выбирает тот, который считает наиболее подходящим.
Если при работе с изображениями вам нужно решать более сложные задачи — знайте, что существуют средства и для решения таких задач. Скажем, это нечто вроде использования современных графических форматов наподобие WebP, или отправка клиенту разных изображений, зависящих от размеров экрана. Если вы хотите углубиться в работу с отзывчивыми изображениями — взгляните на этот материал.
Уважаемые читатели! Пользуетесь ли вы отзывчивыми изображениями в своих проектах?
Полное руководство по отзывчивым изображениям!
Sep 24, 2019 · 10 min read
Отзывчивым можно назвать то изображение, размер которого меняется в зависимости от разрешения экрана. Концепция отзывчивых изображений появилась благодаря необходимости решать такие задачи, как, например, показ разных изображений на разных девайсах. И выражается этот подход в том числе в гибком переключении между размерами, типами изображений и прочего. Спецификация отзывчивых изображений была создана только после того, как появился адаптивный дизайн.
Со временем появилось множество с п особов реализации отзывчивых изображений, расширяя инструментарий фронтенд-разработчиков. Это так же сделало использование отзывчивых изображений довольно сложным. Вот почему я решил погрузится в эту тему только недавно, несмотря на то, что сама технология существует довольно давно. И именно из-за этой сложности я понимал, что в каждом прочитанном мною источнике чего-то не хватает, не показана вся картина ( каламбур).
После прочтения и изучения множества источников я решил написать собственное руководство, в котором я, надеюсь, собрал все способы реализации отзывчивых изображений. Здесь собрана вся информация, нужная для понимания этой технологии, что делает эту статью Полным руководством по отзывчивым изображениям.
Короткое введение в экраны повышенной плотности
Перед тем как погрузится во все методы использования отзывчивых изображений нужно разобраться с важной концепцией пикселя в вебе. Мы привыкли думать, что на мобильных девайсах картинки должны быть меньше потому что ширина экрана девайса меньше. Но это не всегда так.
Существует разница между разрешением в CSS и разрешением экрана:
На сегодняшний день разница между этими понятиями встречается на всех мобильных устройствах и на некоторых экранах компьютеров.
Пример:
Разрешения на Samsung Galaxy S10:
Это означает, что если, например, у вас есть место под картинку в 300 пикселей шириной, то вы можете в этом месте загрузить картинку размером в 4 раза больше (1200 пикселей в ширину) и в результате получите действительно более чёткое изображение!
Мы привыкли думать, что на мобильных девайсах картинки должны быть меньше потому что ширина экрана девайса меньше. Но это не всегда так.
Но будьте осторожны: показывая большее изображение вы платите цену. Большие изображения грузятся медленнее, а на мобильных девайсах этот эффект усиливается, поскольку скорость мобильного интернета довольно ограничена. Поэтому вы каждый раз должны взвешивать все «за» и «против» и решать, где чёткость изображения действительно стоит того, чтобы замедлить скорость загрузки страницы.
В этой статье я опишу восемь методов реализации отзывчивого дизайна. Первые два используют элемент с атрибутом srcset ; следующие два используют элемент
Причина наличия такого большого количества методов в том, что существует несколько проблем, которые призван решать отзывчивый дизайн: показ меньших изображений на меньших экранах; использование преимуществ плотности экранов; изменение фокуса изображений на разных разрешениях; использование типов файлов, которые не поддерживаются всеми браузерами.
Теперь можем перейти непосредственно к методам отзывчивых изображений:
Метод описания плотности экрана
Этот метод подходит для изображений, размер которых фиксирован на экранах повышенной плотности. Это значит, что на некоторых экранах для изображений с размером 200 пикселей в CSS/HTML мы можем загрузить картинку в 600 пикселей — или большего размера— потому что на экранах повышенной плотности оно будет давать лучший визуальный результат.
Внимание! Идентификатор плотности экрана будет выбирать картинку в зависимости от плотности пикселей, а не от фактического размера изображения.
Рекомендуется по прежнему использовать стандартный атрибут src для фоллбэка в браузерах, не поддерживающих srcset (IE и Opera mini).
Метод описания ширины и атрибут sizes
Этот метод подходит для изображений, ширина которых изменяется в зависимости от размера области просмотра и точками останова. Этот приём наиболее распространен на адаптивных сайтах.
Атрибут srcset с описанием ширины
В этом методе мы прописываем атрибут srcset с набором картинок и указанием, на каких ширинах каждая из них должна показываться (мы должны указывать ширину потому что браузер не «знает» фактический размер картинки). В случаях, когда этот подход используется без атрибута sizes он опирается на предположениях браузера, что ширина картинки должна заполнять ширину области просмотра.
Этот метод немного напоминает тот, что мы обсудили выше, с описанием плотности экрана, в котором мы тоже использовали атрибут srcset с набором картинок и условиями их показа. Но они отличаются тем, что теперь мы будем определять какую картинку показывать в зависимости от её ширины, а не от плотности экрана. То есть мы используем описание ширина (ширины картинки, которая нам необходима), но не описываем плотность экрана. Но эти понятия связаны для экранов с повышенной плотностью.
Примечание: даже при условии, что мы описываем ширину, а не плотность экрана, браузер всё равно принимает во внимание экраны повышенной плотности.
Атрибут sizes
Атрибут sizes это набор медиавыражений с размерами картинки для каждого условия. ( Примечание: количество медиавыражений не обязательно должно быть равно количеству картинок, как вы увидите в следующем примере). В конце списка мы должны указать значение ширины без медиавыражения в качестве фоллбэка.
Пример со сложным условием:
На простом адаптивном сайте размеры обычно имеют только одно условие и фоллбэк, а в srcset будут указаны несколько комбинаций размеров и ширин изображения:
После того, как вы отдали браузеру массив картинок и настоящий размер картинок в CSS при помощи медиавыражений, браузер выберет нужную картинку с учётом всех этих условий. И не беспокойтесь, на экранах повышенной плотности браузер при выборе картинки будет опираться на реальное соотношение пикселей на устройстве.
Элемент
До сих пор мы говорили только об элементе и в большинстве случаев этого будет достаточно потому что элемент с атрибутами srcset и sizes покроет большую часть задач. Но элемент
даёт дополнительные возможности для реализации отзывчивых изображений. В следующих двух методах пойдёт речь о более сложных случаях:
Метод с
для изменения направления изображения
Метод изменения направления это способ показывать картинки с разными соотношениями сторон или с разными точками фокуса на разных девайсах. Внутри элемента
мы можем загружать картинки с разных путей в зависимости от CSS ширины экрана устройства. Таким образом вы можете выбирать одно и то же изображение, но нарезанное по-разному, и тем самым фокусироваться на важной части изображения на небольших экранах.
Как работает метод изменения направления?
Полный HTML пример:
Известный пример с Котиком от Google. Они сделали его, когда поддержка элемента
Адаптивные изображения
| Требования: | Предполагается, что вы уже знакомы с основами HTML и умеете добавлять статичные изображения на веб-страницу. |
|---|---|
| Цель: | Узнать, как использовать такие элементы, как srcset и чтобы обеспечить работу гибких изображения на веб-сайтах. |
Почему адаптивные изображения?
Какую проблему мы пытаемся решить адаптивными изображениями? Давайте рассмотрим типичный сценарий. Обычный веб-сайт может содержать изображение в заголовке, для улучшения визуального восприятия пользователем, а также несколько изображений в контенте под ним. Вы, вероятно, захотите, чтобы изображение в заголовке занимало всю ширину окна, а изображения в контенте размещались где-то внутри колонки с контентом. Давайте посмотрим на следующий простой пример:
Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:
Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном – шапка внизу выглядит нормально, но теперь она занимает значительную высоту экрана; первое изображение в контенте напротив, выглядит ужасно – при таком размере едва можно рассмотреть людей!
Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как art direction problem.
Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется resolution switching problem — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.
Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.
Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше.
Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. Технологии отзывчивых изображений были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (resolution switching), или разные изображения с отдельными областями основного изображения (art direction).
Примечание: Новые возможности обсуждаются в статье — srcset / sizes /
— все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).
Как сделать изображения отзывчивыми?
Разные разрешения: Разные размеры
Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент обычно позволяет указать только один путь к файлу:
Однако есть два новых атрибута — srcset and sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responsive.html (также смотри источник кода).
Атрибуты srcset и sizes кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:
srcset включает названия изображений, среди которых браузер выберет нужное и их размеры. Перед каждой запятой части значения в таком порядке:
sizes определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:
Итак, с такими атрибутами, браузер сделает следующее:
Note: В описании элемента вы найдёте строку : это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)
Полезные инструменты разработчика
Есть несколько полезных браузерных инструментов разработчика, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера ( not-responsive.html ), затем открывал Responsive Design View (Tools > Web Developer > Responsive Design View), который позволяем взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.
Я устанавливал viewport width на 320px, затем на 480px; для каждой я обращался к DOM Inspector, кликал по элементу в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения
А дальше вы можете проверить работает ли srcset если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (Tools > Web Developer > Network) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.
Переключения разрешений: Одинаковый размер, разные разрешения
Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дескриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):
В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):
Художественное оформление
Подводя итоги, проблема художественного оформления заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент
позволяет нам применять именно такое решение.
Возвращаясь к нашему оригинальному примеру not-responsive.html, мы имеем изображение которое очень нуждается в художественном оформлении:
Давайте исправим это при помощи элемента
, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент ) или браузер не поддерживает элемент
Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:
Почему это нельзя сделать посредством CSS и JavaScript?
Смело используйте современные форматы изображений
Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.
Активное обучение: реализация собственных адаптивных изображений
Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя
Примечание: Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.
