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

За последний четыре years ¹ (да, это было около четырех лет), мы видели много перестановок изображений в отзывчивого дизайна.Из спокойные дни в обстановке max-width: 100% (абсолютный минимум вы должны делать), чтобы более полнофункциональные реализации JavaScript, такие как Picturefill и Zurb в data-interchange метода, мы потратили много времени спиннинг наши колеса, стучать НАШИруководители и кричать на стене.Я рад сказать, что наш неутомимый путешествие подходит к концу.W3C и браузера производители получили намек .

Государство ответного Images

В поисках Святого Грааля служения правильный образ для пользователя, наше отношение к создателей браузера до сих пор в значительной степени был «Забудьте вы — мы будем делать это сами.” Я не буду, конечно, не исключение.Мы были так внимательны к отзывчивых изображений и подвергались все догадки и испытаний, которые обычно не обнародованы, что мы получили нетерпение (справедливо) и сделал это с JavaScript .

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

Это действительно не дело с изображениями.Как новый тег ухудшения изображения?img тег настолько широко, что я не мог даже найти, когда W3C рекомендовала его в качестве стандарта, кроме небольшой справки в HTML 4.01 specification ² .Замена или даже расширения на img тега будет, как говорят Фрэнк Синатра носить бейсболку вместо Fedora — Вы получите несколько снизились .

Ресурсов Problems

Как реагировать дизайн вырос в популярности, и как средства массовой информации, через которые пользователи потребляют информация стала неуправляемой, мы медленно понял, что img само по себе не собирается сокращать горчицу.Мы начали задавать вопросы, как: “Какой размер экрана пользователя на?” И “Что плотность пикселей на экране?” Эти вопросы топливе наши методы изображения, пока мы не поняли, что размер экрана и плотность пикселей не имеют абсолютно никакого отношения к суммеширина полосы пропускания, чтобы служить огромную высокой четкости изображения .

RICG начал работать на picture элемента, разделяя свою работу с W3C по пути .

Решения получил довольно сложным.Обсуждение picture элемента началась, и группа называется ответная изображений появились сообщество группы (RICG).RICG начал работать на picture элемента, разделяя свою работу с W3C по пути.Результат привел нас к сегодняшнему дню, и это обсуждение все прогрессе, который был достигнут .

Введение srcset

Поскольку большая часть сообщества реагировать-изображения был на борту с picture элементом и с нетерпением жду этого, потому что из великих polyfills, таких как Picturefill, он пошел вперед и выпустила хорошо продуманной и конкретизированы отъезда документ, определяющийто, что называется srcset, который является продолжением стандарта img тега.Да, я знаю, — он чувствует, как он пришел из ниоткуда.Это было также супер-сложный и чрезмерно ограничивает, ограничивая вас значений (подразумеваемых) пиксельных и с помощью microsyntax, что не позволит масштабируемости с медиа запросов в будущем.К счастью, синтаксис созрел в то, что мы имеем сегодня, что довольно надежная рекомендация .

Недавно Андрей Кларк сказал, что лучше когда он tweeted __14 | | 3__13 “Посмотрел на отзывчивым изображения srcset & размеры атрибуты впервые.Вот это да, это сложнее “

<img alt="dog" src="dog.jpg" srcset="dog-HD.jpg 2x, dog-narrow.jpg 300w, dog-narrow-HD.jpg 600w 2x">  

Мы видим три аргумента в srcset.Первый путь изображения.Второй дает информацию браузера о естественной ширины источников, так что он знает, какой ресурс, чтобы служить пользователю (на основе предпочтений пользователя и перекрестных ссылок с в sizes attribute ⁴ – Я сказал вам, что это сложнее).Последняя часть задает необязательный соотношение пикселей (2x В этом примере определяет образ высокой четкости) .

Одна вещь мне действительно нравится в srcset, что спецификация заявляет, что браузер должен содержать предпочтения изображений распределения для определенных ситуациях пропускной способности.Это означает, что вы не должны беспокоиться о отбывает 2x изображение на экран высокой четкости, если это устройство на Cruddy 3G связи.Предпочтения пользователя должна взять на себя, и браузер будет выбрать подходящий образ, чтобы служить .

Подготовка к pictureElement

После долгих жаловаться нашей новой странной другу, srcset, RICG продолжал работать на picture элемент, который наконец-то мастеринг сцепление с производителями браузеров … Ну, то есть, с Chrome.Предлагаемый синтаксис picture элемент может выглядеть знакомы, потому что мы видели его в основном в первой версии Picturefill, и это не в отличие от, как <audio> и <video> отмечены на .

<picture>
  <source media="(min-width: 600px)" srcset="large-1.jpg, large-2.jpg 2x">
  <img alt="A fat dog" src="small-1.jpg">
</picture>  

Как вы можете видеть, source тег в picture элемента, наряду с нормальным img тегов.Так же, как мы видели, с src 13 ~ в |, img является запасной.В source тега, у нас есть то, что выглядит как СМИ запроса, наряду с srcset атрибута, который содержит те же самые аргументы изображения источника и пиксель-плотность, как и раньше.Это, кажется, как хороший чистый способ популяризации отзывчивые изображения;мы обычно знакомы с синтаксисом, поэтому он должен быть легко принят .

Браузер Support

Атрибут был | ~ 13 поддерживается в Chrome ⁵ начиная с версии 34. На момент написания, она не поддерживается в другом месте.Mozilla, кажется, работает на реализацию (пальцы скрещенными).Internet Explorer нигде в поле зрения .

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

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

Введение Picturefill 2.0

Picturefill 2.0 ⁶ был недавно выпущен как бета, и это вполне большой скачок от версии 1. RICG действительно направлена ​​на создание одна остановка решение для гибкой images.Задача в том, чтобы создать сценарий, который позволяет, разработчик, использовать любую комбинацию из решений в настоящее время стандартизированы, без вздутие живота его до того, что не использует это вовсе бы более легкий .

Представьте себе, polyfilling изображение, как правило, принимать по 2 секунд, чтобы загрузить с помощью файла JavaScript, что занимает 10 секунд, чтобы загрузить — это не имело бы смысла.Picturefill 2.0 позволяет избежать этого, следуя спецификации очень близко (с некоторыми преднамеренного упущения, которые мы обсудим в немного) и позволяя использовать либо srcset 10 ~ или | или комбинацию двух .

⁷
Picturefill это реагировать подход изображения, который имитирует предложенную элемент изображения, используя div ы.( Более version ⁸ )

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров