wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Css адаптивные изображения: Responsive Images in CSS | CSS-Tricks

alexxlab
No Comments

Содержание

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

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

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

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

img {
  width: 100%;
  height: auto;
}

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

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

HTML:

<div>
  <img src="image01.jpg" />
</div>

CSS:

div.container {
  width: 96%;
  max-width: 960px;
  margin: 0 auto; /* центрируем основной контейнер */
}
img {
  width: 100%; /* ширина картинки */
  height: auto; /* высота картинки */
}

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

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

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

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

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
</div>

CSS:

img {
  width: 48%;
  display: inline-block;
}

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

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

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
  <img src="image03.jpg" />
</div>

CSS:

img {
  width: 32%;
  display: inline-block;
}

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

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

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
  <img src="image03.jpg" />
  <img src="image04.jpg" />
</div>

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:

.container {
  width: 100%;
}
img {
  width: 100%;
}

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

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

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

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

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

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


<img src="https://goo.gl/PAuNsb" alt="baobab" />

<!-- атрибуты width и height необходимо убрать -->

<img src="https://goo.gl/PAuNsb" alt="baobab" />

 

В таблицу стилей добавьте следующую запись:


img {
	max-width: 100%;
}

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

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


img {
	max-width: 50%;
}

Адаптивные видео

Чтобы сделать адаптивными теги <video>, а также <embed> и <object>, добавьте для них такой же CSS-код, как и для изображений. Желательно перечислить сразу все селекторы:


img, video, embed, object {
	max-width: 100%;
}

Адаптивные iframe

Дела обстоят сложнее, если вы встраиваете видео через тег <iframe>. Тогда вышеописанный метод здесь не работает. Придется прибегнуть либо к помощи JavaScript, либо использовать более хитрый CSS-код.

Если вы выбрали второй вариант, вам понадобится поместить тег <iframe> в дополнительный контейнер <div>. Например:


<div>
	<iframe src="video_url" allowfullscreen></iframe>
</div>

Затем добавьте следующий код CSS:


.video {
	height: 0;
	position: relative;
	padding-bottom: 56.25%;
}
.video iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

Как вы заметили, в коде присутствует свойство padding-bottom со странным значением 56.25%. Что это означает? Значение padding-bottom, указанное в процентах, считается относительно ширины блока. Число 56.25 мы получили, определив соотношение сторон встраиваемого видео (16:9) и разделив число короткой стороны на число длинной стороны, после чего умножив результат на 100:

Если вы собираетесь встраивать видео с другим соотношением сторон, скажем, 4:3, то для определения подходящего значения padding-bottom проделайте ту же процедуру:

Данный метод используется и в фреймворке Bootstrap.

Далее в учебнике: знакомство с Flexbox.

Responsive images — Изучение веб-разработки

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

Почему адаптивные изображения?

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

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

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

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

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

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

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

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

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

Примечание: Новые возможности обсуждаются в статье — srcset/sizes/<picture> — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).

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

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

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

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

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

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

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
    
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Атрибуты 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) или значение относительно окна просмотра (vw), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.

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

  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: В элемента документа <head> вы найдёте строку <meta name="viewport" content="width=device-width">: это заставляет мобильные браузеры адаптировать их реальный 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, кликал по элементу <img> в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения

А дальше вы можете проверить работает ли srcset если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (Tools > Web Developer > Network) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.

Переключения разрешений: Одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дисриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называмое CSS-пикселями):

img {
  width: 320px;
}

В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответсвтует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg. 640px изображение имеет размер 93KB, тогда так 320px изображение — всего 39KB.

Художественное оформление

Подводя итоги, проблема художественного оформления заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент <picture> позволяет нам применять именно такое решение.

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

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">

Давайте исправим это при помощи элемента <picture>! Так же как <video> и <audio>, элемент <picture> это обертка содержащая некоторое количество элементов <source> которые предоставляют браузеру выбор нескольких разных источников, в сопровождаении крайне важного элемента <img>. Код responsive.html выглядит так:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
  • Элемент <source> принимает атрибут media, который содержит медиа-условие; при помощи этих условий опредяется, какое изображение будет выведено. В данном случае, если ширина viewport’a составит 799px или меньше, будет выведено изображение первого элемента <source>. Если ширина составит 800px и более — второго.
  • Атрибут srcset содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <img> выше, <source> может принимать атрибуты srcset и sizes с несколько предопределенными изображниями. Так вы можете не только поместить группу изображений внутри элемента <picture>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.
  • Вы всегда должны использовать элемент <img>, с src и alt, прямо перед </picture>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <source>) или браузер не поддерживает элемент <picture>.

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

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

Почему это нельзя сделать посредством CSS и JavaScript?

Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главные парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решeния, как srcset. Например, вы не могли бы загрузить элемент <img>, потом определить ширину viewport’а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.

Смело используйте современные форматы изображений

Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удается сохранять высокое качество при малом размере файла. Тем не менее, бразуеры поддерживают их не полностью.

<picture> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута type, бразуер сразу определит файлы такого типа как неподдерживаемые:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
  • Не используйте атрибут media, если вам не нужно художественное оформление.
  • В элементе <source> можно указывать путь к изображениям только того типа, который указан в type.
  • Как и в предыдущих примерах, при необходимости вы можете использовать srcset and sizes.

Активное обучение: реализация собственных адаптивных изображений

Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя <picture> и srcset.

  1. Напишите простую HTML-разметку.
  2. Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактороа, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
  3. Используйте элемент <picture> для работы с художественно оформленной картинкой.
  4. Обозначьте несколько разных размеров для этой картикни.
  5. Используйте srcset/size для описания переключения при смене размеров viewport’а

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

Заключение

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

  • Художественное оформление: Проблема,при которой вы хотите использовать обрезанные изображения для различных макетов — например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение,показывающее увеличенный основной объект, для мобильного макета.Всё это может быть решено с помощью <picture> элемента.
  • Переключение разрешений: Проблема,при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях , а также дополнительно,что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью.Эту проблему можно решить с помощью векторной графики (SVG изображений), и srcset и sizes атрибуты.

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

Посмотрите так же

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


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


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

		
 <img {
  width: 100%;
  height: auto;
}>

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


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

HTML:

	
 <div>
   <img src="image01.jpg" />
 </div>

CSS:

		
div.container {
  width: 96%;
  max-width: 960px;
  margin: 0 auto; /* центрируем основной контейнер */
}
img {
  width: 100%; /* ширина картинки */
  height: auto; /* высота картинки */
}


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

Использование тэга HTML5 picture для адаптивных изображений

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

 

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

Во-первых, сама проблема

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

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

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

Нынешнее, самое распространенное решение

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

img { max-width: 100%; height: auto;}

img {    max-width: 100%;    height: auto;}

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

Одно «резиновое» изображение для всех устройств

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

Новое решение: тэг picture

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

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

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

Плотность пикселей

Что означает, что вы можете:

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

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

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

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

Как работает элемент picture?

Основные шаги для работы с элементом picture это:

Создание открывающих и закрывающих тэгов picture.

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

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

Добавьте атрибут srcset с соответствующим именем файла изображения для загрузки.

Добавьте дополнительные имена файлов вашему srcset атрибуту, если вы хотите поддерживать экраны с высокой плотностью пикселей, например Ретина.

Добавьте элемент img в качестве запасного варианта.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<picture> <source srcset=»smaller.jpg» media=»(max-width: 768px)»> <source srcset=»default.jpg»> <img srcset=»default.jpg» alt=»My default image»></picture>

<picture>    <source srcset=»smaller.jpg» media=»(max-width: 768px)»>    <source srcset=»default.jpg»>    <img srcset=»default.jpg» alt=»My default image»></picture>

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

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

<picture> <source srcset=»smaller_landscape.jpg» media=»(max-width: 40em) and (orientation: landscape)»> <source srcset=»smaller_portrait.jpg» media=»(max-width: 40em) and (orientation: portrait)»> <source srcset=»default_landscape.jpg» media=»(min-width: 40em) and (orientation: landscape)»> <source srcset=»default_portrait.jpg» media=»(min-width: 40em) and (orientation: portrait)»> <img srcset=»default_landscape.jpg» alt=»My default image»></picture>

<picture>    <source srcset=»smaller_landscape.jpg» media=»(max-width: 40em) and (orientation: landscape)»>    <source srcset=»smaller_portrait.jpg» media=»(max-width: 40em) and (orientation: portrait)»>    <source srcset=»default_landscape.jpg» media=»(min-width: 40em) and (orientation: landscape)»>    <source srcset=»default_portrait.jpg» media=»(min-width: 40em) and (orientation: portrait)»>    <img srcset=»default_landscape.jpg» alt=»My default image»></picture>

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

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

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

<picture> <source srcset=»smaller.jpg, smaller_retina.jpg 2x» media=»(max-width: 768px)»> <source srcset=»default.jpg, default_retina.jpg 2x»> <img srcset=»default.jpg, default_retina.jpg 2x» alt=»My default image»></picture>

<picture>    <source srcset=»smaller.jpg, smaller_retina.jpg 2x» media=»(max-width: 768px)»>    <source srcset=»default.jpg, default_retina.jpg 2x»>    <img srcset=»default.jpg, default_retina.jpg 2x» alt=»My default image»></picture>

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

Использование picture сегодняшний день

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

Пока что, вам не нужно ждать, если вы хотите начать использовать picture прямо сейчас. Вам всего лишь нужно использовать Picturefill 2.0 — полизаполнение предоставляемое разработчиками из Filament Group.

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

<script src=»picturefill.js»></script>

<script src=»picturefill.js»></script>

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

Ограничения Picturefill

IE9

Picturefill отлично работает в других версиях IE, однако IE9 не распознает элементы source, которые завернуты в тэги picture. Чтобы обойти это, условно оберните элементы source в тэги video, что сделает их видимыми для IE9, например:

<picture> <!—[if IE 9]><video><![endif]—> <source srcset=»smaller.jpg» media=»(max-width: 768px)»> <source srcset=»default.jpg»> <!—[if IE 9]></video><![endif]—> <img srcset=»default.jpg» alt=»My default image»></picture>

<picture>    <!—[if IE 9]><video><![endif]—>    <source srcset=»smaller.jpg» media=»(max-width: 768px)»>    <source srcset=»default.jpg»>    <!—[if IE 9]></video><![endif]—>    <img srcset=»default.jpg» alt=»My default image»></picture>

Android 2.3

Также как IE9, Android 2.3 не видит элементы source внутри тэгов picture. Однако, он распознает атрибут srcset, когда тот присваивается обычному тэгу img. Убедитесь в том, что вы включаете запасной элемент img с дефолтным именем файла в атрибуте srcset для Android 2.3 или любого другого браузера со схожей проблемой.

Требуется JavaScript и родная поддержка медиа запросов

Так как это решение реализовано на JavaScript, соответственно, оно нуждается в JavaScript для корректной работы в браузере. Picturefill 2.0 не предоставляет решений для “no-js”, потому что в противном случае, множество изображений стало бы появляться на страницах, когда родная поддержка будет реализована. Однако, вы можете использовать Picturefill 1.2 если возможность “no-js” важна для вас.

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

Возможны дополнительные HTTP запросы

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

Автор: Kezz Bracey

Источник: http://webdesign.tutsplus.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

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

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

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

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

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

Адаптивное изображение Bootstrap 3

При разработке сайта с использованием boostrap 3 картинки в верстке мы можем сделать адаптивными добавив им css класс .img-responsive. Этот класс добавляет следующие плавила max-width: 100%;, height: auto; и display: block;. Ширина будет все время равна ширине родительского блока, а высота автоматической чтобы сохранить пропорции изображения.

<img src="..." alt="Responsive image">

Адаптивное изображение в html

Это возможно будущий стандарт адаптивных изображений. Новый элемент <picture> позволяет устанавливать несколько источников изображений, а также breakpoint, с помощью которых определяется необходимая версия изображения:

<picture>
  <source srcset="large-1.jpg 1x, large-2.jpg 2x" media="(min-width: 45em)" />
  <source srcset="med-1.jpg 1x, med-2.jpg 2x" media="(min-width: 18em)" />
</picture>

Заключение

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

Если же вам не нравятся предложенные выше предложения, тогда можно дождаться официального релиза свойств элементов <picture>.

 

Адаптивное фоновое изображение на CSS

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 Адаптивное фоновое изображение на CSS 	
</head>
<body>


        
 Адаптивное фоновое изображение на CSS 

        
Это изображение всегда будет иметь 100% ширину так как его контейнер не имеет значения максимальной ширины (max-width)

    	

</body>
</html>

Затем в стилях мы присваиваем к нашему контейнеру #fon_img наше фоновое изображение с заданной высотой, а так же выставим background-size: cover;, чтобы картинка растягивалась на всю ширину экрана.

CSS

Не забываем задавать префиксы для других браузеров -webkit-background-size: cover;
-moz-background-size: cover;, -o-background-size:  cover; , чтобы наше изображение корректно отображалось. После всего этого добавляем наши медиа запросы, с помощью которых мы будем изменять высоту фоновой картинки для разных устройств.
CSS
    @media(max-width:1016px){
        #fon_img{
             height:600px;
       }
    }
    @media(max-width:768px){
        #fon_img{
             height:400px;
       }
    }
    @media(max-width:480px){
        #fon_img{
             height:250px;
       }
    }	

Теперь высота изображения будет всегда подстраивается под используемое  устройство. С помощью таких медиа запросов можно изменить шрифт для заголовка или цвет шрифта, ну и все что вам пожелается.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
 Адаптивное фоновое изображение на CSS 	
</head>
<body>

        
 Адаптивное фоновое изображение на CSS 

        
Это изображение всегда будет иметь 100% ширину, так как его контейнер не имеет значения максимальной ширины (max-width)

    	

</body>
</html>

Мы рассмотрели все варианты использования адаптивных изображений, которые можно использовать при адаптивной верстке. Конечно, еще много тонкостей осталось не рассказанными, но со временем, во время работы, вы их сами поймете, а это все лишь базовые основы, с помощью которых уже можно создать абсолютно адаптивный сайт.
 Адаптивные изображения — Изучение веб-разработки 
 В данной статье мы изучим концепцию гибких (адаптивных) изображений — таких, которые отлично на устройствах с сильно отличающимися размерами экрана, разрешениями и другими характеристиками — и рассмотрим инструменты, которые имеются в HTML для их реализации. Адаптивные изображения — только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему CSS.
 Почему адаптивные изображения? 
 Какую проблему мы пытаемся решить адаптивными изображениями? Давайте рассмотрим типичный сценарий.Обычный веб-сайт может содержать изображение в заголовке, для улучшения визуального восприятия пользователя, а также несколько изображений в контенте под ним. Вы, вероятно, захотите, чтобы изображение в заголовке занимало всю ширину окна, а изображения в контенте размещались где-то внутри колонки с контентом. Давайте посмотрим на следующий простой пример:
 Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:
  •  Содержимому тега  основная  задана максимальная ширина 1200 пикселей. При этом окно остается на 1200 пикселей и центрирует себя в доступном пространстве. Если окно ниже этой ширины, устанавливается в 100% от ширины экрана.
  •  Изображение в шапке всегда будет оставаться в центре тега заголовок вне зависимости от ширины. Важные детали в центре изображения (люди) все равно будут видны.Все, что выходит за пределы границ экрана будет скрыто. Высота шапки 200 пикселей.
  •  Изображение в содержимом заданы так, что если ширина кузова становится меньше чем ширина, то изображения начинают действовать и остаются всегда внутри кузова и не выступают за его пределы.
 Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном; первое изображение в контенте напротив, ужасно, такое ужасно можно рассмотреть людей!
 Было бы намного лучше показывать версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком языке, возможно, что-то среднее между обрезанным и оригинальным изображениями для экрана средней ширины, таких как планшеты — это известно как  Проблема художественного направления .
 Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется  проблема переключения разрешения  — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторное изображение, растровое изображение становится зернистым и выглядит как оригинальное, если оно отображается в размере большем, чем оригинальное (тогда как новое изображение нет).В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.
 Сложность в том, что для некоторых устройств с большим разрешением требуется изображения большего размера, чтобы четче отображалось.По сути всё одна задача в разных условиях.
 Можно предположить, что изображения могли бы решить эти проблемы. В какой-то степени это так. У них вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера больше.
 Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов — единственные устройства для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решений. Технологии отзывчивых изображений  были реализованы недавно для решения проблем, указанных выше. Они позволяют предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (, разрешение переключения ), или разные изображения с отдельными областями основного изображения ( арт-направление ).
  Примечание : Новые возможности обсуждаются в статье —  srcset / sizes /   — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).
 Как сделать изображения отзывчивыми? 
 В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML   . Как показано на примере выше — изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. CSS больше подходит для адаптивного дизайна чем HTML, об этом поговорим в следующем модуле CSS.
 Разные разрешения: Разные размеры 
 Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно указать одно и то же изображение, но разных размеров.Посмотрите на вторую картинку в примере. Стандартный элемент    обычно позволяет указать только один путь к файлу:
 Эльва в костюме феи 
 Однако есть два новых атрибута —  srcset  и  размеров  — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responseive.html (также смотри источник кода).
 Эльва в костюме феи 
 Атрибуты  srcset  и  размеры  кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:
   srcset   включает названия изображений, среди которых браузер выберет нужное и их размеры.  Перед каждой запятой части значения в таком порядке:
  1.  Название изображения ( elva-fairy-480w.jpg .)
  2.  Пробел.
  3.   Актуальная ширина вместо картинки   в пикселах  ( 480w ) — заметьте, что здесь используется  w   px , как вы предполагали. Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать  Cmd  +  I , чтобы вывести информацию на экран).
   sizes   определяет параметры медиа-выражения (например, ширину экрана) и указывает настройку ширину изображения, когда определенное медиа-выражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:
  1.   Медиа-условие  ( (max-width: 480px) ) — вы можете больше узнать в этой теме CSS, но сейчас давайте скажем, что медиа-условие возможное состояние экрана.В этом случае мы говорим «когда ширина области просмотра меньше или равно 480 пикселей».
  2.  Пробел.
  3.   Ширину слота  (в оригинале «ширина прорези»), занимаемую изображение, когда медиа-условие. ( 440 пикселей )
  Примечание : Для ширины слота, вы можете указать абсолютные значения ( px ,  em ) или значение окна просмотра ( vw ), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условий — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно.Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.
 Итак, с такими атрибутами, браузер сделает следующее:
  1.  Посмотрит на ширину экрана устройства.
  2.  Попытается определить подходящее медиа-условие в атрибуте  sizes .
  3.  Посмотрит на размер слота к этому медиа-запросу.
  4.  Загрузит изображение из списка из  srcset , которое имеет тот же размер, что и выбранный слот, или, если такое нет, то первое изображение, которое больше размера выбранного слота.
 И это всё! На текущий момент, если поддерживающий браузер с шириной окна просмотра 480px загрузит страницу, медиа-условие  (max-width: 480px)  будет истинно, следовательно, будет выбран слот  440px , тогда будет загружено изображение  elva-fairy-480w.jpg , так как свойство ширины ( 480w ) наиболее близкое значение  440px . Условно, изоображение 800px занимает на диске 128 КБ, в то время как версия в 480px только 63 КБ — экономия в 65 КБ.Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.
 Старые брузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута  src .
  Примечание : В элементе документа   вы найдёте строку  : это заставляет мобильные браузеры адаптировать их реальный размер окна просмотра для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своей ширины окна просмотра, вместо этого они загружают страницу в увеличенную ширину окна просмотра, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне.Мы расскажем вам об этом больше в будущем модуле.)
 Полезные инструменты разработчика 
 Есть несколько полезных браузерных инструментов разработчика, чтобы помочь с определением необходимой длины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я загружал фиксированную версию моего примера ( not-responseive.html ), открывал Представление адаптивного дизайна (Инструменты > Веб-разработчик> Представление отзывчивого дизайна ), который позволяет взглянуть на макет вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.
 Я устанавливал ширину окна просмотра на 320px, затем на 480px; для я обращался к DOM Inspector, кликал по каждому элементу   , в котором мы добавляем, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам широкую ширину изображения
 А дальше вы можете проверить работает ли  srcset , если установить значение ширины окна просмотра таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (инструменты > Web Developer> Network ) и перезагрузить страницу.Это должно быть загружено, чтобы составить (собрать) веб-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.
 Переключения разрешений: Одинаковый размер, разные разрешение 
 Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете выбрать изображение с подходящим разрешением с использованием  srcset  с x-дисриптором и без  размеров  — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolution.html (смотрите также исходный код):
 Эльва в костюме феи
 
 В данном примере, к изображению CSS таким образом, оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):
 img {
  ширина: 320 пикселей;
} 
 В этом случае нет необходимости в размере   — браузер просто определяет в каком разрешении дисплея и предлагает наиболее подходящее изображение в соответствии с  srcset .Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного / низкого разрешения, когда один пиксель устройства представляет (соответсвтует) каждый CSS-пиксель, то будет загружено изображение  elva-fairy-320w.jpg  (применен x1, то есть вам не надо его Вход). Если устройство имеет высокое разрешение, в два пикселя на каждый CSS-пиксель или более, то будет загружено изображение  elva-fairy-640w.jpg . 640px изображение имеет размер 93KB, тогда так 320px изображение — всего 39KB.
 Художественное оформление 
 Подводя итоги,  проблема художественного оформления  заключается в желании изменить отображаемое изображение, чтобы оно соответствовало разным размерам изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком, просматриваемым в браузере на настольном компьютере, при просмотре веб-сайта в другом браузере он уменьшается; он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть.Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой отображается в увеличении (в приближении). Элемент  <картинка>  позволяет нам применять именно такое решение.
 Возвращаясь к нашему оригинальному примеру not-responseive.html, мы имеем изображение которое очень нуждается в художественном оформлении:
 Крис стоит, держа свою дочь Эльву 
 Давайте исправим это при помощи элемента  <картинка> ! Так же как  и  , элемент    это обертка содержащая некоторое количество элементов  которые используют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента    .Код responseive.html выглядит так:
 <картинка>
  

Крис стоит, держа свою дочь Эльву

 
  •  Элемент  <источник>  принимает атрибут  media , который содержит медиа-условие; при помощи этих условий опредяется, какое изображение будет выведено.В данном случае, если ширина viewport’a составит 799px или меньше, будет выведено изображение первого элемента . Если ширина составит 800px и более — второго.
  •  Атрибут  srcset  содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере    выше,  может принимать атрибуты  srcset  и  размеров  с несколькими предопределенными изображниями. Так вы можете не поместить группу изображений внутри элемента  <изображение> , но и предписаний для каждого из них.В реальности вы вряд ли захотите заниматься этим очень часто.
  •  Вы всегда должны использовать элемент   , с  src  и  alt , прямо перед   , иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент  <источник>)  или браузер не поддерживает элемент  <изображение> .
 Этот код позволяет нам выводить отзывчивое изображение и на узком экране, как показано ниже:
  Примечание : Вам следует использовать атрибут  media  только при художественном оформлении; Когда вы используете  media , не применяйте медиа-условия с атрибутом  размеров .
 Почему это нельзя сделать посредством CSS и JavaScript? 
 Когда браузер начинает загружать страницу, он начинает загружать изображения до того, как главные парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому необходимы такие решeния, как  srcset . Например, вы не могли загрузить элемент   , затем определить ширину viewport’а при помощи JavaScript и динамически изменить изображение.Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.
 Смело используйте современные форматы изображений 
 Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), удается достичь высокого качества при малом размере файла. Тем не менее, бразуеры их не полностью.
    позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута , тип , сразу определить файлы такого типа как неподдерживаемые:
 <картинка>
  
  
  правильная пирамида, построенная из четырех равносторонних треугольников

 
  •  Не используйте атрибут  media , если вам не нужно художественное оформление.
  •  В элементе  <источник>  можно указывать путь к изображению того типа, который указан в  type .
  •  Как и в предыдущих примерах, при необходимости вы можете использовать  srcset  и  размеров .
 Активное обучение: реализация собственных адаптивных изображений 
 Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя    и  srcset .
  1.  Напишите простую HTML-разметку.
  2.  Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, затем обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
  3.  Используйте элемент  <картинка>  для работы с художественно оформленной картинкой.
  4.  Обозначьте несколько разных размеров для этой картикни.
  5.  Используйте  srcset / size  для описания переключения при смене размеров viewport’а
  Примечание : Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.
 Заключение 
 Это все для отзывчивых изображений — мы надеемся, вам понравилось играть с этими новыми технологиями.Напомним, что мы здесь обсуждали различные проблемы:
  •   Художественное оформление : Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов — например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета.    элемента.
  •   Переключение разрешений : Проблема, которую вы хотите использовать для использования файлов изображений большого размера на устройствах с узким экраном, поскольку они не нужны огромные изображения, как на настольных дисплеях, а также, что вы хотите использовать изображения разного разрешения для экрана с высокой / низкой плотностью.Эту проблему можно решить с помощью векторной графики (SVG изображений), и  srcset  и  размеров  атрибуты.
 Это так же подводит нас к окончанию целого модуля «Мультимедия и встраивание»! Единственное, что вам осталось сделать перед тем, как двигаться раньше — это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь.
 Посмотрите так же 
 .
 Создание отзывчивых изображений (отзывчивых изображений) с помощью CSS 
 Существует много техник по созданию отзывчивых изображений. Они отличаются по сложности и браузерной поддержке. 
 Пример сложного создания отзывчивых изображений — это использование атрибута srcset, который требует нескольких изображений и больше использует разметки, а также он опирается на новый HTML-атрибут, который не имеет хорошей поддержки вне современных браузеров.
 Но в данной статье мы разберем метод, который, наоборот, основан на свойствах CSS ширины и высоты.А это означает, что данный метод будет работать во всех браузерах и на всех устройствах. Однако, для этого потребуется, чтобы дизайн веб-макета был «резиновым» / отзывчивым.
 В данной обучающей статье вы можете использовать несколько вариантов реализации восприятия изображений, но основной смысл будет и тем же: используя CSS, задавать изображения выраженное в процентах (или с использованием любых относительных единиц измерения, например, EMS), свойства ширины, а для свойств height указывать значение auto.
 img {
  ширина: 100%;
  высота: авто;
}
 
 Простое отзывчивое изображение 
 Давайте начнем с базового примера. У нас есть элемент div, который выступает в качестве контейнера для элемента img.
  HTML 
 

  


 
 Значение свойства ширины у контейнера выставлено на 96%, т.е. у него присутствуют левые и правые отступы (маржа).Также ему задано свойство max-width в значении 960px, чтобы макет не был слишком широким на больших экранах. Элемент img, внутри контейнера, имеет свойство width со значением 100%, чтобы его ширина всегда равнялась ширине контейнера, независимо от размеров области (область просмотра). Таким образом изображение становится отзывчивым. Свойство height имеет значение auto, чтобы изображение масштабировалось пропорционально.
  CSS 
 div.container {
  ширина: 96%;
  максимальная ширина: 960 пикселей;
  маржа: 0 авто; / * чтобы отцентрировать контейнер * /
}
img {
  ширина: 100%;
  высота: авто;
}
 
 Обратите внимание на то, что элемент img будет отзывчивым даже в том случае, если для него указаны фиксированные параметры через атрибуты в HTML разметке (т.е. ширина = »960 ″ высота =» 640 ″). Это замечательно, т.к. Эта техника подходит для поддержки и обслуживания контента, для которого заданы фиксированные размеры в HTML.
 Отзывчивые изображения и колонки 
 Иногда нам хочется, чтобы изображения были рядом друг с другом в колонках. Например, в галереях часто используются сетки для отображения превью изображений. Чтобы создать отзывчивые изображения в колонках, нам нужно только уменьшить значение CSS-свойства width и установить для элементов img свойство display со значением inline-block.Давайте рассмотрим пару вариантов макета: двухколоночный и трехколоночный макет сми изображения.
 Двухколоночный отзывчивый макет с изображениями 
 Для подобного макета мы можем установить свойство CSS шириной со значением 48% или, грубо говоря, половиной ширины контейнера. Причина, по которой мы не указываем 50%, заключается в том, чтобы оставить место под внешние отступы.
  HTML 
 

  
  


 
  CSS 
 img {
  ширина: 48%;
  дисплей: встроенный блок;
}
 
 Трехколоночный отзывчивый макет сми изображения 
 Для данного макета идея был прежней, т.е. мы просто выставляем для свойства значение ширины равное одной третьей ширины контейнера: 32%.
  HTML 
 





 
  CSS 
 .three-columns {
  ширина: 32%;
  дисплей: встроенный блок;
}
 
 Изображения с условными переходами 
 Наличие нескольких условных переходов для отзывчивых изображений — это хорошая идея, т.к. если изображения будут слишком маленькими, колонки просто «схлопнуться». А чтобы это произошло, нам потребуются медиа-запросы. В следующем примере изображения будут в одну колонку на смартфоне, в две колонки — на планшете и в колонках четыре — на больших экранах.
  HTML 
 






 
  CSS 
 / * Для устройств с небольшим экраном (например, смартфоны) * /
img {
  максимальная ширина: 100%;
  дисплей: встроенный блок;
}
/ * Для устройств со средним экраном (например, планшеты) * /
@media (min-width: 420 пикселей) {
  img {
    максимальная ширина: 48%;
  }
}
/ * Для устройств с большим экраном (например, настольные компьютеры) * /
@media (min-width: 760 пикселей) {
  img {
    максимальная ширина: 24%;
  }
}
 
  На заметку:  Будет хорошо, если вы выставите подходящие медиа-запросы для каждого дизайна, над которыми вы работаете.В нашем демо-примере вышеприведенные медиа-запросы отлично работают для данного макета, но все может быть по-другому с другими макетами.
 Полноэкранные отзывчивые изображения 
 Чтобы создать изображения, которые всегда будут занимать 100% области просмотра, нам нужно просто убрать свойство max-width (со значением 960px) и задать для него свойство width со значением 100%.
 контейнер {
ширина: 100%;
}
img {
ширина: 100%;
} 
 Предупреждение 
 Несмотря на то, что техника создания отзывчивых изображений является простой и хорошей браузерной поддержкой, ее недостаток заключается в том, что мы всегда работаем с исходными размерами изображений.Это означает, что большие изображения с высоким разрешением загружаются даже у тех пользователей, которые используют небольшое мобильное устройство, на котором все установлено полностью прелести полноэкранных изображений.
 Если вы хотите опционально подгружать для пользователей разные версии одного изображения (например, небольшое изображение для мобильных устройств, а большое — для настольных компьютеров), чтобы улучшить мобильный веба, познакомьтесь с атрибутом srcset и / или изображения.Если вы предпочитаете использование полифиллов (polyfill), чтобы обеспечить поддержку в текущей версиих браузеров, обратите внимание на полифилл Скотта Джела (Скотт Джел) под названием Picturefill. 
   Источник  
.
No related posts.
 Share :
  •  
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *