В понедельник мы опубликовали

статьи о Picturefill 2.0 ¹ , идеально polyfill для чувствительных изображений.Today’ сек статья дополняет Тима Wright’ сек статью и объясняет, как именно мы можем использовать предстоящую < picture> элемент и srcset с простыми откаты для старых браузеров.Там не нет оснований ждать реагировать images ² ;мы можем на самом деле есть их Очень, очень soon ³ . — Эд .

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

– Джон Аллсопп, Дао веб-Design ⁴

Images ⁵ являются some ⁶ от most ⁷ important ⁸ pieces ⁹ из information ¹⁰ на web ¹¹ , но через веб в 25 годаИстория, они не были очень хорошо адаптируются вообще.Все о них упорно исправлено: их размер, формат и урожай, весь набор в камне одного src .

HTML авторы начали по-настоящему почувствовать эти ограничения, когда экраны с высоким разрешением и отзывчивые макеты попали в Интернет, как один-два удара.Авторы — желая их изображения выглядят четкими в огромных макетов и высоким разрешением экранов — начал посылать все больше и больше источников для всех;Средний размер файла изображения Ballooned ¹² ;очень умные люди называли Адаптивный веб-дизайн " unworkably slow ¹³ " .

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

Это скоро изменится .

Последняя спецификация <picture> element ¹⁴ является результатом years ¹⁵ ( лет ! ¹⁶ ) дискуссии о том, как можно сделать в виде адаптироваться.Это дает авторам семантические способы для группирования нескольких версий одного и того же изображения, каждая версия, имеющих технические характеристики, которые делают его более или менее пригодны для конкретного пользователя.Новая спецификация добилась широкого консенсуса и реализуется в Chrome, Opera и Firefox (! Может быть, даже Internet Explorer ¹⁷ ), поскольку я печатаю .

Время начать изучать этот материал сейчас

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

1. Наши изображения должны быть в состоянии оказать решительно на различных device-pixel-ratio с.Мы хотим, экраны с высоким разрешением, чтобы получить изображения с высоким разрешением, но мы не хотим, чтобы отправлять эти изображения для пользователей, которые не видят всех этих дополнительных пикселей.Давайте назовем это device-pixel-ratio прецедентов .
2. Если наша макет жидкости (т.е. реагировать), то наши образы должны хлюпать и растягиваться, чтобы соответствовать его.Мы будем называть этот вариант использования жидкости изображений .
3. Обратите внимание, что эти два варианта использования тесно связаны: Чтобы решить, как мы будем хотим, чтобы наши изображения будет доступна в нескольких разрешениях, так что они эффективно масштабировать.Мы будем называть решения обеих проблем одновременно переменного размера, использование изображения case
4. Иногда мы хотим, чтобы адаптировать наши изображения таким образом, что выходят за рамки простого масштабирования.Мы, возможно, захотите, чтобы обрезать изображения или даже тонко изменять их содержимое.Мы называем это использование арт-направление случай .
5. Наконец, различные браузеры поддерживают разные форматы изображений.Мы могли быЧтобы отправить фантазии новый формат, например, WebP в браузерах, которые могут оказать, и вернуться к старый добрый формате JPEG в браузерах, которые этого не делают.Мы называем это тип переключения случай использования .

Новый <picture> спецификация включает в себя функции для всех этих случаев.Давайте посмотрим на них по одному .

Реорганизация изображения в различных разрешениях относительно легко, однако, загрузки различных изображений (и только их) в зависимости от user’ с Разрешение довольно сложно.Ну, не больше.( Изображение credit ¹⁸ )

device-pixel-ratio Использование Case

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

Скажите, у нас есть два варианта изображения:

• small.jpg (320 × 240 пикселей)
• large.jpg (640 × 480 пикселей)

Мы хотим послать large.jpg только для пользователей с высоким разрешением экрана.Использование srcset, мы бы отметить нашу изображения следующим образом:

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />

srcset атрибут принимает разделенный запятыми список изображений URL-адресов, каждый из которых x дескриптор с указанием device-pixel-ratio, что этот файл предназначен для .

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

Текучей И переменного размера, использование изображения Cases

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

Предзагрузка Изображение, по словам Стива Соудерс, “ Самая большая браузеры улучшение производительности, когда-либо made ¹⁹ .” Изображения часто тяжелые элементы на странице;загружая их как можно скорее в интересах каждого.Таким образом, первое, что браузер будет делать с странице сканировать HTML для изображения URL-адресов и начать загружать их.Браузер делает это задолго до того, построил DOM, загруженной внешний CSS или нарисовал макет.Решение использовать жидкость образ дело является сложным, то;мы должны браузер, чтобы выбрать источник, прежде чем он знает, оказывается размера изображения .

Что браузер знать, на все времена среды это оказание in: размер окна просмотра, разрешение экрана пользователя, что-товещи.Мы используем эту информацию, когда мы используем медиа запросы, которые специально подобраны наши макеты соответствии с конкретными среды просмотра .

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

²²
Работа с отзывчивых изображений оказалось настоящим кошмаром.Лучший способ обеспечить браузер с подробной информацией о его среда, просто сказав браузер оказана размер изображения.Вид очевидно, на самом деле.( Изображение credit ²³ )

Как оказывается out ²⁴ , это плохая идея.В то время как это технически выполнимо, расчета Media Queries необходимые утомительно и чревато ошибками.Лучше идея заключается в том, чтобы просто сказать браузеру оказанное размер image!

Как только мы говорим браузеру, количество пикселей needs (через новый атрибут, sizes) и сколько пикселей каждый из источников has (через w дескрипторов в srcset), сборИсточник становится тривиальным.Браузер выбирает наименьшее источник, который будет по-прежнему выглядеть достаточно четкие течение контейнера .

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

• large.jpg (1024 × 768 пикселей)
• medium.jpg (640 × 480 пикселей)
• small.jpg (320 × 240 пикселей)

И мы хотим, чтобы поместить их в гибкой сетки — сетка, которая начинается в одном столбце, но переключается на три колонки в больших окнах проекций, как this ²⁵ :

²⁶
реагировать пример сетки.( Смотрите demo ²⁷ )

Вот как мы отмечать его:

<img srcset="large.jpg  1024w,
      medium.jpg 640w,
      small.jpg  320w"
   sizes="(min-width: 36em) 33.3vw,
      100vw"
   src="small.jpg"
   alt="A rad wolf" />

Мы используем srcset раз, но вместо x дескрипторов, мы крепления w дескрипторов наших источников.Они описывают фактическую ширину, в пикселях, указанного файла.Так что, если вы “Сохранить для Web …” в 1024 × 768 пикселей, то размечать, что источник в srcset как 1024w .

Вы заметите, что мы указав только изображения widths.Почему бы не высота, тоже?Изображения в нашей макет ширина ограниченными;их ширина устанавливаются явным образом CSS, но их высота не являются.Подавляющее большинство отвечающих изображений в дикой природе ширина ограниченными, тоже, так что спецификация держит вещи простые, имея дело только в ширину.Есть некоторые good ²⁸ reasons ²⁹ для включения высот, тоже — но еще не .

Итак, вот w в srcset, который описывает, сколько пикселей каждый из наших источников has.Затем, sizes атрибут.sizes атрибут сообщает браузеру, как количество пикселей needs описывая окончательный визуализированную ширину нашего изображения.Подумайте о sizes как способ дать браузеру немного информации о макете страницы немного раньше времени, так что он может выбрать источник, прежде чем он разбирается, оказываемых любой из CSS страницу в .

Мы делаем это путем передачи браузеру CSS length ³⁰ которая описывает визуализированную ширину изображения.Длина CSS может быть как абсолютным (например, 99px или 16em) или отношению к viewport ³¹ (33.3vw, как в нашем примере).Это “по отношению к видовом” часть, что позволяет получать изображения, чтобы продемонстрировать .

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

sizes="33.3vw"

Наш пример не совсем так просто.Наша схема имеет точку останова на 36 EMS.Когда окно просмотра уже, чем 36 EMS, изменения планировки.Ниже этой точки останова, изображение заполнит 100% ширины окна просмотра.Как нам закодировать эту информацию в нашей sizes? Атрибута

Мы делаем это путем спаривания медиа запросы с длинами:

sizes="(min-width: 36em) 33.3vw,
   100vw"

Это его формат:

sizes="[media query] [length],
   [media query] [length],
   etc…
   [default length]"

Браузеру идет над каждым запросом СМИдо тех пор, пока не найдет ту, которая соответствует, а затем использует парные длину соответствие запроса.Если нет запросов СМИ матч, то браузер использует длину “по умолчанию”, то есть любой длины он сталкивается, что не имеет парного запроса .

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

Чудесно, sizes и w в srcset также дать браузеру достаточно информации, чтобы адаптировать изображение к различным device-pixel-ratio с.Преобразование длины CSS, мы даем его в sizes к CSS пикселей;и, помноженной на пользователя device-pixel-ratio, браузер знает количество пикселей устройства, необходимую для заполнения — No Matter What пользователя device-pixel-ratio является .

Таким образом, в то время как пример в нашей device-pixel-ratio прецедента работает только для фиксированной ширины изображения и охватывает …

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