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

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

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

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

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

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

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

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

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

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

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

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

Вы заметите, что синтаксис, использованный в атрибуте 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>

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

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

Если вы хотите предоставлять версии изображений с различным разрешением для экранов с более высокой плотность, вы можете это сделать с помощью добавления дополнительных имен файлов атрибуту 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 сегодняшний день

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

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

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

<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>

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 с нуля

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

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

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

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

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

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

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

Атрибут srcset

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

Это разделенный запятыми список URL-адресов с шириной для каждого. Каждый элемент в списке выглядит так: «image.jpg 1000w,», что сообщает браузеру, что файл image.jpg имеет ширину 1000 пикселей.

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

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

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

Также ему будет известно, что если изображение будет отображаться с шириной 320 пикселей на retina-экране, ему следует выбрать ресурс шириной не менее 640 пикселей. Так что вам не придется беспокоиться о 1x и 2x ресурсах. Все, что вам нужно сделать, это предоставить хороший набор изображений, а браузер сделает все остальное.

Не уверены, какой размер изображения предоставить? Читайте дальше!

Атрибут sizes

Атрибут srcset работает отлично, но когда браузер читает HTML, он не знает, использовали ли вы CSS , чтобы масштабировать изображение, например, на 50% от ширины экрана.

Вот когда в игру вступает атрибут sizes. С его помощью мы даем браузеру подсказку о том, как будет отображаться изображение после применения CSS.

Атрибут sizes представляет собой список разделенных запятыми медиа условий с шириной для каждого. Каждый элемент в списке выглядит следующим образом: «(min-width: 1023px) 780px,», это говорит браузеру, что, когда область просмотра имеет ширину 1023 пикселя (или шире), изображение будет иметь ширину ровно 780 пикселей.

Вы также можете использовать относительную ширину, например, 50vw, при которой изображение будет составлять 50 процентов от ширины области просмотра. Вы даже можете использовать calc для более сложных ситуаций. Например, calc(50vw — 2rem) говорит, что изображение будет составлять 50 процентов от ширины области просмотра, минус 2rem, возможно, чтобы учесть некоторые отступы или границы.

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

Браузер будет проходить вниз по этому списку и применять первый элемент, который соответствует области просмотра. Так, если задан атрибут sizes:

(min-width: 1023px) 780px, (min-width: 675px) 620px, 100vw

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

Стандартный iPad в вертикальной ориентации имеет ширину 768 пикселей, поэтому браузер пропускает первый элемент, но выбирает второй, что говорит о том, что изображение будет иметь ширину 620 пикселей.

Пользователь на обычном мобильном устройстве не будет соответствовать ни одному из первых двух условий, что говорит о том, что изображение будет иметь 100% ширины области просмотра.

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

Как сделать картинку адаптивной

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

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

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

.wrapper img{
   width: 100%;
}

И действительно, в некоторых случая этим можно ограничиться. Этот трюк отлично работает, когда окно браузера становится меньше. Но что, если ширина контейнера, в котором лежит картинка, становится больше разрешения картинки? Правильно. Картинка растягивается по ширине контейнера, но качество оставляет желать лучшего. А что делать, если нужна поддержка разрешения 2048x1536px?

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

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

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

<div>
   <img src="img/small.jpg" alt="Картинка для примера 1">
   <img src="img/middle.jpg" alt="Картинка для примера 2">
   <img src="img/big.jpg" alt="Картинка для примера 3">
</div>

Вроде бы проблема решена. Но дело в том, что браузеры, для того, чтобы ускорить отображение страницы предзагружают картинки, которые прописаны в html до того, как начнет обрабатываться css. Может я не совсем правильно выразился (поправьте), но если провернуть такой трюк, то все картинки все равно будут загружены, вне зависимости от того, что прописано в css. А значит мы только усугубили положение для мобильных устройств. Теперь им придется грузить не одно, а несколько изображений.

В этом можно убедиться, открыв инструменты разработчика и заглянув во вкладку «Сеть».

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

В html 5 появился тег picture, который позволяет решить большинство проблем и создан именно для создания адаптивного (отзывчивого) дизайна. Его конструкция напоминает теги video и audio. Суть работы заключается в том, что внутри тега picture задаются несколько изображений под конкретные разрешения экрана. Выглядит это примерно так:

<picture>
    <source srcset="../img/small.jpg" media="(min-device-width:220px) and (max-device-width:319px)">
    <source srcset="../img/middle.jpg" media="(min-device-width:320px) and (max-device-width:480px)"> 
    <source srcset="../img/big.jpg" media="(min-device-width:481px) and (max-device-width:1920px)">
    <img srcset="../img/big.jpg" alt="Основное изображение"> 
</picture>

Особенность в том, что вместо src — используется srcset и применяется что-то похожее на медиазапросы. Маленькая картинка грузится при разрешении меньше 319px. Среднее изображение при разрешении от 320px до 480px и т.д.

Ознакомиться с поддержкой браузерами тега picture на текущий момент можно на этой странице.

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

Как видите ситуация на данный момент оставляет желать лучшего. Нет поддержки на IOS устройствах, на Macbook(ах) и на IE (Хотя, пользователей IE — не жалко, они должны страдать 🙂 ). Думаю, что все мы не готовы терять такое количество пользователей. Нет, неправильно выразился. Не терять, ведь наша основная картинка загрузится и корректно отобразится. Но все равно, хотелось бы не терять клиентов с техникой apple из-за долгой загрузки страницы, так как это, скорее всего, платежеспособная аудитория 🙂

Для того, чтобы использовать преимущества этого тега уже сейчас, нужно воспользоваться небольшим скриптом (между тегами head) picturefill.js.

   <script src="../js/picturefill.js" async></script>

Теперь все устройства должны поддерживать такую структуру верстки адаптивных картинок. Правда на Маке я не тестировал (не обзавелся пока).

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

Вот такой не хитрый способ. А как вы делаете адаптивными изображения? Поделитесь пожалуйста своими методами в комментариях. Спасибо.

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

От автора: Эта статья отображает лишь одно из многих решений проблемы адаптивных изображений. До выбора конкретного решения мы предлагаем вам рассмотреть разные подходы, включая эти два: Как избежать дублирования загрузки адаптивных изображений (How To Avoid Duplicate Downloads In Responsive Images ) и Выбор решения для адаптивных изображений (Choosing A Responsive Image Solution).

При разговорах о таких новых стандартах HTML5, как атрибут srcset и элемент picture, а также технологиях серверной стороны, таких как Адаптивный веб-дизайн +компоненты серверной стороны (Responsive Web Design + Server Side Components ) (RESS), простительно, если вы решите, что простые статические вебсайты сейчас не в состоянии поддерживать адаптивные изображения. Однако такое заключение может оказаться преждевременным. Фактически, существует легкий прямой способ доставки адаптивных изображений, поддерживаемых всеми современными веб-браузерами: фоновые изображения CSS.

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

В данной статье мы рассмотрим фоновый подход CSS в несколько этапов:

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

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

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

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

Исследуем ключевое свойство CSS background-image, которое дает возможность отвечать этим характеристикам.

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

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

И, наконец, опишем его проблемы, к которым не существует обходных путей.

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

Потребность в адаптивных изображениях

Адаптивные изображения – важная составляющая адаптивного веб-дизайна (RWD), дизайнерской стратегии, разработанной Итаном Маркоттом (Ethan Marcotte) для того, чтобы совладать с удивительной популярностью мобильных устройств для просмотра Сети. Итан признал, что предыдущая общепринятая практика — разработка отдельных вебсайтов для разных видов устройств — просто не смогла справиться с поразительным разнообразием устройств, применяемых пользователями для получения доступа к создаваемым нами вебсайтам.

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

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

Истинное соответствие контексту пользователя требует дизайна, который принял бы во внимание все аспекты его опыта взаимодействия, и зачастую сюда включаются и изображения. В качестве живого примера возьмите такой вебсайт, как contfont.net. У этого сайта, состоящего из единственной страницы, есть одно основное изображение и обычный набор HTML, таблиц стилей, шрифтов и файлов JavaScript.

Вебсайт великолепно смотрится на компьютерах с супервысоким разрешением экранов, потому что включает версию основного изображения в высоком разрешении. Доставка файла этого изображения, однако, обходится недешево; из размера 1940 × 1229 px после сжатия получается изображение в 446 KB.

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

На iPhone’е изображение 290 × 183 px размером 18 KB смотрится идентично изображению размером 452 KB и 1940 × 1229 px на MacBook Pro.

Что это означает для пользователя, просматривающего сайт, скажем, со смартфона предыдущего поколения? Для него изображение 290 × 183 px размером в 18 KB смотрится точно так же, как увеличенная версия. При отсутствии адаптивного подхода к изображениям вебсайт заставит пользователя скачать 429 KB дополнительных, абсолютно лишних данных. Такое превышение не просто непрактично; оно оказывает существенное влияние на время загрузки вебсайта. Возможно, пользователь смартфона заходит на сайт через обычное 3G-соединение на скорости 2 Mb/сек. Неподача адаптивного изображения увеличивает время загрузки с 1,3 секунд до целых 3 секунд, более чем вдвое!

Полноразмерному изображению для загрузки требуется 3,0 секунды через сеть 3G в сравнении с 1,3 секунды адаптивного изображения.

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

Определение окружения пользователя

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

Инструментом CSS, дающим нам такую информацию, является медиазапрос. Медиазапросы определяют набор свойств стилей CSS, применимых только к устройствам с определенными характеристиками. Изначально медиазапросы были ограничены медиатипами. Спецификация CSS определяет их большое количество, включая, например, braille (для Брайлевских устройств с тактильным откликом), speech (для синтезаторов речи), tty (только для устройств с моноширинным шрифтом, таких как телетайпы) и tv (для устройств телевизионного типа с низким разрешением и без возможности прокрутки). Сейчас два единственных медиатипа, поддерживаемых всеми браузерами – это print (для отпечатанного материала, разбитого на страницы) и screen (для экранов компьютеров).

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

Вот как медиазапросы могут помочь в решении дилеммы предыдущего раздела. У взятого в качестве примера 15-дюймового MacBook Pro ширина экрана равна 1440 px (здесь мы не принимаем во внимание наличие опции дисплея Retina). Для определения стилей, применимых к экранам такого размера (и более), можно написать себе такую таблицу стилей:

@media only screen and (min-width: 1440px) { /* стили для экранов размера MacBook Pro и более */ }

Любые определенные в этом блоке стили будут применяться, лишь когда пользователь заходит на веб-страницу с помощью устройства с размером экрана 1440 px. Однако тут кроется ловушка. Размер экрана не относится к аппаратному обеспечению устройства; скорее, он относится к области просмотра веб-браузера. Область просмотра – это размер окна браузера за вычетом всякого браузерного покрытия, такого как панели инструментов.

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

@media only screen and (min-width: 1200px) { /* стили для широких экранов */ }

Медиазапрос состоит из двух частей. Первая, only screen, означает, что стили не нужно применять к распечатанным копиям страницы или прочим нестандартным устройствам. (Ключевое слово only на самом деле не влияет на медиазапрос; оно находится там исключительно для по-настоящему старых браузеров, не поддерживающих свойства медиазапросов. Так как эти браузеры не понимают синтаксиса only, то они просто полностью игнорируют весь блок стилей.) Вторая часть запроса, min-width: 1200px, определяет минимальную ширину экрана, при которой будут применяться эти стили. Соединение этих частей – and – означает, что для применения стилей они обе должны возвращать true.

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

@media only screen and (max-width: 320px) { /* стили для узких экранов */ }

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

Спецификации свойств min-width и max-width облегчают определение ширины устройства пользователя. К сожалению, не так уж легко идентифицировать дисплей Retina. Разные браузеры пользуются для этого разными синтаксисами, так что приходится прибегать к вендорным префиксам. Еще сильнее ухудшает положение вещей дефект в синтаксисе многих версий Firefox, из-за которого для браузеров Mozilla приходится применять синтаксис и fixed, и broken. В настоящее время рекомендуемый запрос для дисплеев Retina выглядит следующим образом.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min—moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* стили для дисплеев типа Retina */ }

Со временем все браузеры начнут поддерживать стандартную нотацию dots per pixel (точек на пиксель) (dppx) и можно будет опустить вендорные префиксы в таблицах стилей.

Свойство фонового изображения CSS

Раз CSS способен надежно определять контекст пользователя, вы можете решить, что поддерживать адаптивные изображения легко. Одним из кажущихся вполне логичными подходов могла бы стать установка display: none для тех изображений, которые не нужно скачивать. Вот проба строго на основе размера экрана. (Для краткости мы пропускаем рассмотрение Retina.)

<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»utf-8″> <title></title> <style> img.smallscreen { display: none; } @media only screen and (max-width: 320px) { img { display: none; } img.smallscreen { display: inline; } } </style> </head> <body> <img src=»largeimage.jpg»> <img src=»smallimage.jpg> </body> </html>

Адаптивные изображения и видео на сайте — учебник 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.

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

Давайте отбросим лишнюю тягомотину, современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы 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%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

img {максимальная ширина: 100%; height: auto;}

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

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

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

Новое решение: тэг изображение

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

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

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

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

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

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

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

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

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

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

Основные шаги для работы с цифровых изображений это:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

IE9

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

Android 2.3

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

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

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

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

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

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

Автор: Кезз Брейси

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

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

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

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

PSD в HTML

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

создание с помощью атрибута srcset

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

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

Что такое адаптивные изображения?

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

Когда вы хотите, чтобы изображение отлично отображалось на экране разных физических размеров.К примеру, вам надо показать одно и то же изображение на 13.5 дюймовом ноутбуке и на 5 дюймовом экране смартфона (окно на весь экран).

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

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

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

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

Адаптивные блоки поддерживаются в большинстве современных браузеров, в том числе в Microsoft Edge (начиная с Windows Insider Build 10547). Поддержку свойства srcset в различных браузерах можно посмотреть здесь.

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

Существует способы сделать изображения адаптивными. Один из старых способов — с помощью скрипта (не рекомендуется). Но с ним связаны некоторые проблемы.Первая проблема — если изображение загружается через скрипт, но сам скрипт расположен ниже загружаемого изображения, то можно получить изображения два. Вторая проблема — если в разметке не прописано изображение, и оно загружается только через JS, то есть шанс, что изображение вообще не загружается, если в браузере отключен JS.

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

Атрибут srcset

Перед тем, как я объясню принцип работы атрибута, важно понять несколько терминов:

Соотношение логических и физических лиц на устройстве

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

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

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

Если приблизить картинку в браузере (Ctrl + Plus), число CSS пикселей для блока DIV не изменится, а вот количество физических пикселей увеличится. Т.е. увеличивается число физических пикселей на один CSS пиксель. Если вы хотите указать изображение или его часть с помощью метода соотношения логических и физических пикселей, вам понадобится атрибут srcset:

Дескриптор X в атрибуте srcset задает изображение соотношения логических и физических пикселей.

Значение 2 — используется изображение space-Needle-2x.jpg.

Значение 3 — используется изображение space-Need-3x.jpg.

Атрибут src используется для старых браузеров, которые не используются для новых атрибутов. Данный способ отлично работает. С помощью X Дескриптора вы получите абсолютно такое же изображение на устройствах с одинаковым использованием логических пикселей к физическим — даже если изображение отображается на 13,5-дюймовом ноутбуке и 5-дюймовом смартфоне.

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

Из кода следует, что ширина изображения первого 200px, второго 400px, 600px. Если ширина экрана пользователя составляет 150 CSS пикселей, то это приравнивается к X дескриптору:

(Не забывайте, что соотношение логических и физических изображений это всего лишь количество пикселей) устройство на один CSS пиксель)

Размеры атрибутов

Если вам нужно отобразить изображения разных размеров (разные высота и ширина) на различных экранах, тут вам поможет атрибут sizes вместе с дескриптором атрибута srcset. Еще раз рассмотрим пару примеров:

Пример 1

. Вы хотите, чтобы изображение занимало половину ширины области просмотра.Код:

Теперь браузер сам решит, какое изображение загрузить, установить на ширине окна и устройстве пикселей на устройстве.К примеру: если ширина составляет 500 пикселей CSS, изображение будет занимать 250 пикселей в ширину (50vw). То же самое можно получить таким способом:

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

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

srcset = «images / space-Need.jpg 0.8x, images / space-Need-2x.jpg 1.6x, images / space-Needle-hd.jpg 2.4x «

Для экранов 1.5x браузер загрузит изображение images / space-Need-2x. jpg, так как соотношение пикселей равно 1,6x (наиболее подходящее для экранов 1,5x).

Пример 2

Вы хотите, чтобы изображение занимало половину ширины области просмотра, если ширина больше или меньше 40em. , изображение должно занимать всю ширину области просмотра.Код:

Принцип схож с медиа запросами. Если область просмотра в ширину равна 39em, выражение (max-width: 40em) возвращает true , и выполняется 100vw.Изображение занимает всю ширину области просмотра. Т.е. если ширина окна составляет 500 пикселей CSS, то изображение будет 500 пикселей в ширину. Того же можно добиться и другим способом:

Похож на первый способ. Браузер определил, какое изображение больше подходит под заданный размер экрана . Если область ширины просмотра 41em, то выражение (max-width: 40em) обращается в false, выполняется 50vw. Следующим мы рассмотрим элемент изображения, но сначала вспомним все, что мы узнали

Тег изображение

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

<картинка>

Если в первом источнике медиа запрос в атрибуте media возвращает true, то при максимальной ширине просмотра в 20em загрузится изображение в соответствующей папке images / small. Сам по себе тег картинка ничего не отображает.Даже тег source отдельно от атрибута srcset не отображит. Тег источник должен содержать атрибут srcset и необязательные атрибуты размеры, медиа и тип. В конце обязательно вставьте тега изображение изображение img.

Выбор подходящего изображения можно делать и по поддерживаемым форматам в браузере. Такой способ отлично подходит, если какой-то формат отлично сохраняет четкость изображения. К примеру, формат JPEG-XR, имеющий меньший вес файла по сравнению с обычным JPG. Поддерживается в Microsoft Edge и IE9 +.Протестировать данный формат можно с помощью атрибута type в теге source:

<картинка>

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

Собираем все вместе

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

<картинка>

В этом примере вы используете тег изображения с двумя источниками.Далее атрибут sizes решает, какое изображение загрузить в зависимости от размера экрана. Принцип работы ничем не отличается от атрибута размеров. Т.е. если максимальная ширина 500px (от 0px до 500px), изображение займет область просмотра. Картинка выбирается в зависимости от соотношения пикселей. Но если ширина области просмотра больше 500px (но <= 700px, т.к. мы находимся в первом источнике), то изображение займет всего 1/10 часть области просмотра.

Схожим образом будет выбран второй источник в случае, если максимальная ширина составляет 1400px (т.е. ширина варьируется от 701px до 1400px). Атрибут размеры проверяет область просмотра. Если ее ширина составляет 701px-1000px, изображение займет всю область. Если же ширина находится в пределах от 1001px до 1400px, то изображение занимает половину ширины области просмотра. В качестве агентов всех случаев, я просто изменял размер окна. В мире сейчас на ваш сайт будут заходить с различных устройств. Вот именно тогда вы и почувствуете все мощь адаптивных изображений. Вот что у меня получилось:

Область просмотра окна в пределах от 1001px до 1400px: ширина изображения — половина от размера окна

Область просмотра окна в пределах от 701px до 1000px: ширина изображения — все окно

Область просмотра окна в пределах от 501px до 700px: ширина изображения — 1/10 окна

Область просмотра окна в пределах от 0px до 500px: ширина изображения — половина окна

у цели!

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

Автор: Саураб Киртани

Источник: http://www.sitepoint.com/

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

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

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

PSD в HTML

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

[Перевод] HTML5 Адаптивные изображения / Хабр

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

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

   
   
   <источник src = lores.png>
   
   

 

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

Тем не менее, в январе, редактор HTML5, Ян Хиксон (Ян Хиксон), написал:

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

Позже Эдвард О’Коннор (Эдвард О’Коннор) из Apple использует другой метод, использовать атрибут srcset для элемента img .Это другое аналогичное предложение нового свойства CSS image-set , которое уже добавлено в WebKit:

srcset = "foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
alt = "достойный альтернативный текст для foo.">

Значения «2х» и «6.5х» сообщают браузеру относительное разрешение; foo-hires.jpg в 2 раза больше оригинального изображения, а foo-superduperhires.jpg в 6.5 раз. Через пару дней это предложение было добавлено в спецификацию.

Между предложенным элементом изображение и атрибутом srcset есть два основных различия. Самым очевидным является то, что атрибут srcset используется в элементе img , который предназначен для использования. И это замечательно.

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

О’Коннор писал:

Почему я предлагаю коэффициент масштабирования, а не Media Queries? Медиа-запросы работают за счет данных User Agent’а, мы же обсуждаем взаимодействие между различными вариантами изображений. Так же, Пользовательский агент должен иметь возможность свободно выбирать вариант изображения, которое лучше всего подходит для текущего состояния, с учетом не только параметров заданные с помощью Media Queries, но и размеры заданные элементы img с помощью CSS, может даже и текущую масштабирования страницы .

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

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

srcset = "face-600-200-at-1.jpeg 600w 200h 1x,
face-600-200-at-2.jpeg 600w 200h 2x,
face-icon.png 200w 200h ">

Конечно же это может быть и должно быть исправлено. Дело не только в эстетике кода.

Вторая проблема состоит в том, что разработчики не желают лишиться возможности управления процессами. Это вопрос потери доносимого смысла визуального контента (читайте абзац «Заботится ли я о художественном руководстве?») И исламены что Apple не подумали об этом. Хотя сторонники srcset придерживаются противоположного мнения.

Источник: Адаптивные изображения HTML5: конец первого раунда

Полезные ссылки:
— Немного о холиваре между разработчиками
— Какое решение для создания адаптивных изображений следует использовать?

Адаптивные изображения для Retina дисплеев на HTML5

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

• Загрузка размером изображения 2х и установка значения высоты и ширины размером изображения 1x
• Использование библиотеки JavaScript (или своей собственной) для загрузки 2x изображения
• Использование атрибута HTML5 srcset
• Использование элемента HTML5 picture

Загружаем изображения в размере 2x

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

• Для использования графики высокой четкости, укажите img src.
• Установите ширину и ширину изображения не таким, как для Retina.

К примеру, изображение высокой четкости имеет размер 100 × 200 пикселей.Итак, используя CSS или атрибуты в HTML, укажите высоту и ширину изображения (100 × 200). А загрузите изображение, которое в два раза больше (200 × 400 пикселей).

HTML код будет таким:

Используем JavaScript

Есть так же другой вариант — использовать JavaScript для загрузки графики под retina после загрузки страницы. Для этого в свободном доступе есть несколько библиотек.Я решил использовать библиотеку retinajs. Я, кстати, отправил запрос на исправление ошибок, когда библиотека пыталась загрузить графику под сетчатку, в то время, когда я уже загружал ее через атрибут srcset (мы поговорим об этом позже).

Вкратце, наиболее распространенный подход — перебрать все изображения в DOM и попытаться загрузить изображение высокой четкости. Retinajs ищет аннотированные (имя файла + @ 2x) изображения на вашем сервере. После того, как Apple для iOS впервые применила это соглашение об именовании, оно стало стандартным.Если файл изображения лежит на вашем сервере (возвращает код состояния 200), то Retina изображение заменяется изображением без него. В два раза больше изображения на экране дисплея Retina.

И еще я не указал одну вещь: прежде чем что-либо делать, JavaScript должен сначала проверить, сидит ли пользователь с устройством на Retina. Нам не нужно пытаться загружать изображения под сетчатку без необходимости.

Это решение работает довольно хорошо, но не без изъянов:

• Браузер по-прежнему сначала загружает изображения не под Retina, хотя для пользователей с ней этого делать не нужно.
• Пользователи Retina могут заметить нечеткие изображения, прежде чем они будут заменены графикой Retina высокой четкости. Не то, что бы это бросается в глаза, но это может быть заметно.
• И конечно же, теперь нам нужно загрузить библиотеку JavaScript.Код часто довольно короткий, но все же накладки дополнительного времени.

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

Атрибут HTML5 srcset

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

Атрибут srcset позволяет вам указать список источников изображений, которые можно использовать на основе ширины и плотности пикселей устройства. Это действительно круто, и я очень рад сообщить, что Google Chrome уже реализовал это. Вы можете посмотреть, какие браузеры эту спецификацию на caniuse.com/srcset. Обратите внимание, что WebKit (механизм рендеринга для Safari) тоже реализовал ее, и он, вероятно, будет выпущен в Safari 8, который будет поставляться с OS X.

HTML код загрузки изображений для retina экранов:

Просто и красиво.

Для атрибута srcset тоже можно использовать список. Использование списка для srcset позволяет разработать изображения для src, что вместо src по умолчанию доступны и другие размеры. Используя флаг w, мы сообщаем браузеру, что доступны разные параметры ширины для одного и то же изображения.Параметр ширины используется аналогично тому, как работаем с CSS-свойствами max-width в медиа-запросах. Например, мы можем разрешить браузеру использовать среднее и большое изображение в зависимости от размеров изображения в окне просмотра:

В комбинации с атрибутом размеров, браузер может выбрать изображение, которое лучше всего для пользователя, на основе желаемого размера просмотра области просмотра (область просмотра) и доступных размеров изображения, предоставленных в атрибуте srcset.Также можно использовать медиа-запросы вместе с атрибутом sizes, чтобы установить размер области просмотра (viewport) на его ширины. Вот пример изображения при 50% ширины от области просмотра на настольных компьютерах и 100% на мобильных устройствах.

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

Элемент HTML5 изображение

И последний метод, о котором я вам расскажу, — это новый элемент <картинка>. Элемент picture использует тот же подход, что и элементы HTML5

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

<картинка>
   
   
   

 

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