Руководство по WebKit-атрибуту srcset в тэге img

Свободный движок WebKit теперь поддерживает srcset атрибут изображений, IMG элементов (официальная спецификация от W3C). Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей. Также важно отметить о наличие изящного решения для браузеров, которые еще не поддерживают данный функционал.

Обратите внимание, в необходимости использовать последние ночные сборки WebKit.


Возможно, вы знаете, что WebKit поддерживает -webkit-image-set CSS функцию чуть более года (Safari начиная с 6 версии и Google Chrome начиная с 21 версии). С помощью данной функции появилась возможность задавать в css-свойствах изображения в зависимости от разрешения экрана, или другого устройства воспроизведения, каждое с модификатором 1х, 2х.

.class {
  /* задаем фоновое изображение, если браузер не поддерживает image-set */
  background-image: url(image-set-not-supported.png);
  /* задаем фоновые изображения, для различных разрешений */
  background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x);
}

Это позволит браузеру выбрать наилучший вариант для конкретного устройства пользователя. Прежде, для поддержки больших картинок у вас было несколько путей развития, каждый с определенными недостатками. Вы могли дублировать CSS код. Вы могли использовать JavaScript для запроса (window.devicePixelRatio) количества точек на px. (device pixel ratio) и обновлять картинки после загрузки страницы. Или вы могли всегда отдавать большие картинки, тем самым заставляя некоторых пользователей грузить лишнее. И если вам необходимы были картинки с разными разрешениями приходилось уточнять связанные CSS свойства, такие как background-size как часть border-image. Это раздражало.

К счастью, -webkit-image-set позволяет написать вам одно простое правило, тем самым заставив браузер самому определять более подходящую картинку и как следствие её и загружать.

Srcset атрибут очень похож на -webkit-image-set. В самом деле, можно подумать об атрибуте как об эквивалентной функции CSS. Аналогично списку картинок в -webkit-image-set, вы добавляете новый атрибут srcset к вашим графическим элементам. Поддерживается обратная совместимость, браузеры не поддерживающие srcset, игнорируют его и продолжают использовать src. А вся прелесть в том, что браузерный движок глянет на srcset и сам определит наилучшую картинку к загрузке. В большинстве случаев вам необходимо написать вот так:

<img src="normal-image.jpg" srcset="better-image.jpg 2x">

Обратили внимание на “2x” после “better-image.jpg”? Это говорит браузеру, что для экранов устройств с devicePixelRatio = 2 и более, необходимо использовать better-image.jpg взамен normal-image.jpg. И если экран устройства не «ретина», браузер обратится к атрибуту src. Вы также можете задавать значение 1х атрибута srcset, как в примере ниже.

Srcset атрибут

Ниже приведено изображение — img элемент с обоими атрибутами: src и srcset. Существует стиль устанавливающий размер картинки в 400x400px. В браузерах без поддержки srcset, будет использоваться значение src, а следовательно загрузится стандартная картинка:


На обычных экранах будет загружаться вариант 1х srcset атрибута:


На ретина дисплеях будет загружаться вариант 2х srcset атрибута:


HTML код примера:

<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x">

Больше об srcset можно прочитать в официальной спецификации. Обратите внимание, что на данный момент только WebKit поддерживает «коэффициенты разрешений» — 1x, 2x, 3x. Как и любой новый функционал, WebKit может содержать ошибки, поэтому будьте бдительны. В частности, вы должны убедиться, что WebKit загружает минимальные ресурсы для страницы, потому что это одна из целей этой функции.

Особая благодарность членам сообщества WebKit Romain Perier и Yoav Weiss которые внесли важный вклад (r153624, r153733) в развитие данного функционала.

P.S. Замечания по переводу присылайте в личку.