Сегодня я дам вам новую пищу для размышления об аспекте адаптивного веб-дизайна ( RWD ), который сейчас очень популярен: адаптивные изображения. RWD не новая тема, но ее подход не всегда прост и свободен от подводных камней. Особенно, когда речь идет об изображениях, есть много нерешенных вопросов.
Вступление
При разработке веб-сайта мы можем столкнуться с рядом трудностей в управлении изображениями. Принимая во внимание первостепенную необходимость их плавного и правильного отображения на самых разных устройствах, эти трудности могут включать:
- Правильная оптимизация и снижение веса;
- Внимание к ненужной трате пропускной способности (все мы знаем, что скорость загрузки сайта является одним из основных факторов успеха или неудачи нашего собственного сайта);
- Соответствующее разрешение для используемого устройства.
Для решения первой проблемы такие инструменты, как TinyPNG и JPEGmini, могут помочь уменьшить вес изображений и оптимизировать их.
Что касается второй проблемы, в нескольких случаях у нас была возможность протестировать огромный потенциал медийных запросов . Благодаря им у нас есть простой способ решить проблему фоновых изображений, то есть тех, которые мы показываем с помощью правила CSS background-image . Однако, учитывая, что это решение нельзя применить к изображениям, показанным с помощью <img> , как мы можем решить третью и последнюю проблему и установить правильное разрешение изображения для устройства, которое мы используем для посещения веб-сайта?
В этом случае на помощь приходят два предложенных решения: элемент <picture> и атрибут srcset тега <img> .
В этой статье я дам вам общий обзор атрибута srcset , а элемент <picture> будет темой следующей статьи.
Атрибут srcset
Какое основное преимущество мы можем получить от использования этого атрибута? Благодаря этому веб-разработчики могут ориентировать пользователей на дисплеи с высоким разрешением с источником изображений с высоким разрешением или на различные типы экранов с другими версиями изображений. В первом случае пользователи на дисплеях с более низкой плотностью пикселей не будут обременены расточительными расходами на пропускную способность при загрузке бесполезного массивного изображения с высоким разрешением, в то время как последний может наслаждаться мощью своего экрана. Во второй ситуации мы можем указать другое изображение для экрана разных размеров, чтобы изображение было более сфокусировано на устройстве пользователя.
srcset атрибут srcset позволяет нам указать список источников для изображения, которые будут доставляться на основе плотности пикселей или размера экрана пользователя. Таким образом, мы можем сказать, что реализация атрибута srcset — это хороший способ предоставить браузеру набор «предложений» о правильном поведении, которое должно быть с определенным типом изображения. Тем самым мы улучшаем загрузку нашей страницы и опыт наших пользователей.
Теперь давайте посмотрим на основные характеристики этого атрибута, условия, которые необходимо указать, чтобы он работал, и способ его реализации в нашем коде.
Как заявляет W3C, атрибут srcset позволяет авторам в компактной форме предоставлять несколько вариантов одного и того же изображения с различным разрешением или для разных размеров области просмотра.
Пользовательские агенты могут сделать свой выбор ресурса перед извлечением любого из ресурсов, таким образом избегая множественных загрузок ресурса и связанных проблем производительности в средах с ограниченной пропускной способностью.
srcset включает в себя последовательность значений, разделенных запятыми, которые, с одной стороны, указывают URL-адрес изображения, а с другой — условия, при которых изображение будет отображаться. Среди этих условий мы можем найти плотность пикселей, ширину области просмотра или их обоих. Очень интересным моментом является то, что браузер, основываясь на некоторых эвристических или пользовательских настройках, может интерпретировать то, что лучше всего для пользователя во время посещения страницы, и выбирать, выбирать ли изображение с более низким или высоким разрешением.
Создайте в своем мобильном браузере настройку, позволяющую запрашивать изображения с высоким разрешением, например, только при подключении к WiFi, или настройку браузера вручную, позволяющую запрашивать изображения с низким разрешением только при слабом соединении.
Синтаксис кода следующий:
<img src="small-photo.jpg" srcset="big-photo.jpg 2x" />
Этот короткий фрагмент кода просит браузер показать изображение с именем small-photo.jpg если только устройство не имеет дисплея с высоким разрешением (плотность пикселей 2x, как у Retina). Обратите внимание, что другая фотография будет отображаться, только если браузер понимает, как обрабатывать атрибут. Браузеры, которые не могут правильно интерпретировать атрибут, просто проигнорируют его и покажут запасное изображение, которое вы ранее указали в атрибуте src .
Как уже отмечалось, этот атрибут не только хорош для плотности. В тех ситуациях, когда он имеет дело с шириной экрана, мы можем представить его как своего рода эквивалент свойства max-width медиазапросов. Чтобы извлечь из этого пользу, вы должны указать количество пикселей, за которым следует w (например, 600 Вт ). Чтобы лучше понять этот случай, давайте посмотрим на другой пример с красивым снимком «Осень в Москве» с сайта Sxc.hv , размеры которого составляют 1368 × 700, а вес (после оптимизации) 389Kb:
Исходя из того, что мы уже обсуждали, в чем преимущество того, что пользователь, путешествующий по Интернету со своего смартфона, может загрузить изображение, размер которого больше (а затем и больше), чем у его устройства? Кроме того, пожалуйста, помните об ограничениях мобильной связи, что является серьезной проблемой, поскольку изображение замедляет загрузку вашей страницы, и это может привести к тому, что ваши пользователи покинут ваш веб-сайт (очевидно, первое, чего следует избегать). Сказав это, вы можете подумать о том же изображении, но меньшем по размеру (400 × 225) и весу (~ 40 Кб), как показано ниже.
Невероятно, как мы можем позволить пользователям сэкономить пропускную способность и улучшить их работу с помощью лишь небольшой проницательности:
<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x" />
Этот фрагмент использует изображение low-density-photo.jpg качестве запасного low-density-photo.jpg и указывает список изображений для определенного числа различных условий: small-photo.jpg будет использоваться для устройств с шириной экрана, меньшей или равной 480px, большой big-photo.jpg для устройств с шириной экрана меньше или равной 1024p и последней, high-density-photo.jpg , для устройств с шириной экрана меньше или равной 1024px и дисплеем с высоким разрешением.
Теперь у меня есть несколько менее хороших новостей для вас. Единственными браузерами, которые поддерживают srcset, являются WebKit. На самом деле, поскольку Chrome перешел на движок Blink, мы должны уточнить, что Chrome его больше не поддерживает.
Кроме того, вы не можете установить изображение на основе максимальной ширины экрана устройства, потому что в реализованном предложении не указана эта возможность. Вопрос немного сложен, поэтому постоянно проверяйте наличие обновлений и читайте больше о его спецификациях и способах реализации этой техники в ваших проектах.
Проект редакции спецификации W3C для srcset был выпущен только сегодня, 2 декабря. Он включает в себя несколько хороших и понятных примеров использования этого атрибута.
Будучи проектом редактора, мы также можем сказать, что это немного приближает принятие атрибута, давая всем браузерам мотивацию принимать и уважать использование атрибута srcset. Мы можем только надеяться.
Выводы
В этой статье мы описали, как атрибут srcset может помочь разработчикам лучше управлять изображениями своих веб-сайтов. Тем не менее, как мы видели, поддержка среди браузеров отсутствует, но мы надеемся и уверены, что эта проблема будет решена очень скоро.
В следующей статье я srcset атрибут srcset с элементом <picture> , чтобы увидеть, как он складывается.