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

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

Что делает этот атрибут?

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

<img src="low-res.jpg" srcset="high-res.jpg 2x">

Согласитесь, что данная разметка не слишком страшная. Говоря простым языком:

“Использование low-res.jpg в качестве источника для данного img с низким разрешением дисплея, и для любого браузера, который не понимает srcset атрибута. Используйте high-res.jpg в качестве источника для данного img, имеющим дисплей с высоким разрешением, для браузеров, которые понимают атрибут srcset”

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

Можно ли это сделать с помощью JavaScript?

На первый взгляд, srcset не делает ничего особенного, он всего лишь выбирает соответствующий источник из атрибута и организовывает перекачку контента img тега src. Перекачивание содержимого атрибута — это то, что мы делали благодаря JavaScript с незапамятных времен. Ну во всяком случае где-то с 90-х годов. Итак, что же мы можем получить?

Фактически, мы попытались применить этот подход для BostonGlobe.com, одного из ранних сайтов, который начал использование любого рода решений относительно “адаптивных изображений”. Благодаря все более агрессивной предварительной выборке в нескольких основных браузерах, изображения src запрашиваются задолго до того, как у нас появляется шанс применить любые пользовательские скрипты: мы бы в конечном итоге закончили тем, что сделали бы два запроса для каждого представляемого изображения. При этом смысл адаптивности будет нарушен. Я решил задокументировать некоторые попытки в другом месте, тем самым я хочу избавить вас от ненужных подробностей здесь.

можем ли мы сделать это с помощью CSS?

“Да” и “Нет”. Мы можем сделать это достаточно легко благодаря использованию фоновых изображений, используя комбинацию информационных запросов, связанных с показателем пиксельной плотности. Способ реализации srcset в WebKit очень похож на последнее image-set свойство, введенное в CSS. image-set позволяет указать список источников фонового изображения и разрешающую способность, что позволит браузеру принять решение о том, какое изображение будет наиболее подходящим — очень знакомый материал. До сих пор, мы никогда не работали в направлении не-презентационных изображений контента, однако теперь мы займемся именно этим.

Использование CSS для управления изображениями неэффективно по умолчанию, в частности с точки зрения сохранения разделения проблем. Это подход, который может быть эффективен в рамках быстрой демонстрации страницы, но быстро выходит из-под контроля в случае применения для производственного веб-сайта. Возможности CMS позволяют генерировать десятки стилей, полных фоновых изображений, что значительно усложняет работу разработчика. Однако, хуже всего то, что при отсутствии должного контроля это приведет к дополнительным запросам на таблицы стилей и изображения, которые может быть даже и не нужны пользователям. Кроме того, пользователи не смогут просматривать изображения путем использования вспомогательных технологий.

Наиболее подходящая вещь, которую мы нашли в CSS ориентированном подходе, позволяет обменивать источники изображений, которые основаны на значениях, установленных в атрибутах данных HTML. При этом используются некоторые CSS трюки, большая часть из которых является чисто теоретическими и никогда не сможет быть использована. Тем не менее, этот подход по-прежнему не учитывает двойную загрузку изображений с высоким и низким разрешением — с этой же проблемой мы столкнулись и при использовании JavaScript. Даже если подобная техника станет доступной для нас, нам по-прежнему придется сталкиваются с теми же проблемами, что и при использовании многих основанных на скриптах решений: попытка обойти неэкономные, избыточные запросы.

Какое влияние оказывается на пропускную способность?

Независимо от разрешения экрана, существует ряд …

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