...

воскресенье, 18 августа 2013 г.

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

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

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


image


Возможно, вы знаете, что 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, а следовательно загрузится стандартная картинка:

image

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

image


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

image


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. Замечания по переводу присылайте в личку.


This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: 'You Say What You Like, Because They Like What You Say' - http://www.medialens.org/index.php/alerts/alert-archive/alerts-2013/731-you-say-what-you-like-because-they-like-what-you-say.html


Комментариев нет:

Отправить комментарий