{"id":3611,"date":"2013-08-27T20:08:29","date_gmt":"2013-08-27T18:08:29","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3611"},"modified":"2013-08-27T20:08:29","modified_gmt":"2013-08-27T18:08:29","slug":"webkit-support-attribut-html5-srcset","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/webkit-support-attribut-html5-srcset","title":{"rendered":"Webkit annonce son support de l’attribut srcset"},"content":{"rendered":"

La probl\u00e9matique se pose depuis maintenant quelques temps concernant l’affichage d’image optimis\u00e9e pour nos diff\u00e9rents terminaux : qu’ils proposent une dimension d’\u00e9cran plus petite ou une densit\u00e9 de pixels plus grande (HD). Cette probl\u00e9matique est en cours de travaux, et Webkit vient d’annoncer le support d’une des solutions envisag\u00e9es.<\/p>\n

Qu’est-ce que l’attribut srcset<\/code><\/h2>\n

Comme j’aime bien vous tenir inform\u00e9s des choses qui peuvent \u00eatre bien utiles pour vous, j’avais d\u00e9j\u00e0 \u00e9crit un article sur les solutions d’images responsives et s’adaptant aux terminaux cibles<\/a>. Je vous le mentionne donc pour rappel. Il ne traite pas uniquement de srcset<\/code>, mais traite \u00e9galement des diff\u00e9rentes solutions en cours de travaux dans le groupe de travail de ResponsiveImages.org<\/a>.<\/p>\n

Pour r\u00e9sumer, srcset<\/code> est donc un nouvel attribut de l’\u00e9l\u00e9ment HTML img<\/code> proposant une syntaxe particuli\u00e8re permettant de d\u00e9finir les sources d’images en fonction des terminaux cibl\u00e9s.
\nPrenons un exemple de code simple :<\/p>\n

<img\r\n    src=\"image-classique.jpg\"\r\n    srcset=\"image-medium.jpg 300w, image-haute-resolution.jpg 2x\"><\/code><\/pre>\n
La syntaxe impl\u00e9ment\u00e9e par Webkit respecte celle propos\u00e9e par le groupe de travail cit\u00e9 pr\u00e9c\u00e9demment. La valeur de l’attribut accueil donc plusieurs couples <image crit\u00e8res> s\u00e9par\u00e9s par une virgule \u00e0 chaque nouvelle ressource image propos\u00e9e. Il est possible de combiner les crit\u00e8res pour une m\u00eame image, comme suit :<\/p>\n
<img\r\n    src=\"image-small.jpg\"\r\n    srcset=\"image-mid-hd.jpg 300w 2x\"><\/code><\/pre>\n
O\u00f9 300w<\/code> et 2x<\/code> sont deux conditions qui doivent \u00eatre r\u00e9unies pour charger l’image \u00ab\u00a0image-mid-hd.jpg<\/code>\u00ab\u00a0.<\/p>\n
Qu’est-ce que ce support va changer<\/h2>\n
Webkit a annonc\u00e9 le support de cet attribut<\/a> le 12 ao\u00fbt dernier. C’est une bonne nouvelle pour les int\u00e9grateurs soucieux de proposer aux visiteurs des images adapt\u00e9es \u00e0 leurs appareils, que ce soit par commodit\u00e9 ou pour l’optimisation des ressources serveur (ou les deux).
\nLa prise en charge par Webkit de cet attribut va permettre de proposer de vraies solutions \u00ab\u00a0HTML\u00a0\u00bb \u00e0 la probl\u00e9matique des sources multiples d’images sans avoir besoin de passer par des solutions full JavaScript qui sont parfois partielles.<\/p>\n
C’\u00e9tait un rapide brief sur la nouvelle solution d’int\u00e9gration d’images responsives, et j’esp\u00e8re pouvoir vous en faire encore quelques unes avec l’arriv\u00e9e probable de picture<\/code>, \u00e9quivalent de video<\/code> mais pour les images.<\/p>\n","protected":false},"excerpt":{"rendered":"
La probl\u00e9matique se pose depuis maintenant quelques temps concernant l’affichage d’image optimis\u00e9e pour nos diff\u00e9rents terminaux : qu’ils proposent une dimension d’\u00e9cran plus petite ou une densit\u00e9 de pixels plus grande (HD). Cette probl\u00e9matique est en cours de travaux, et Webkit vient d’annoncer le support d’une des solutions envisag\u00e9es.<\/p>\n","protected":false},"author":4,"featured_media":3614,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[12],"tags":[16,256,535,403,534],"coauthors":[],"class_list":["post-3611","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-technologique","tag-html5","tag-image","tag-picture","tag-responsive","tag-srcset"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3611"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3611\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3614"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3611"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}