Voici les probl\u00e8mes que j’ai pu relever, a priori, en pensant \u00e0 l’int\u00e9gration d’images HD :<\/p>\n
- \n
- manque de moyens flexibles mis \u00e0 disposition des d\u00e9veloppeurs par les fabricants\n
- \n
- risque de devoir faire de la d\u00e9tection de user agent<\/em><\/li>\n
- maintenance du code plus complexe<\/li>\n<\/ul>\n<\/li>\n
- probl\u00e8me de poids des images\n
- \n
- sites plus lourds en mobilit\u00e9 (Retina sur iPhone4+, iPad, Mac Book)<\/li>\n
- surcharge des serveurs<\/li>\n<\/ul>\n<\/li>\n
- probl\u00e8me de maintenance du site\n
- \n
- d\u00e9veloppements plus longs<\/li>\n
- gestion des images et m\u00e9dias plus complexe<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Je ne dis pas que cette liste est exhaustive.<\/p>\n
Un design nickel chrome<\/h2>\n
Je n’ai pas mis de majuscule \u00e0 \u00ab\u00a0chrome\u00a0\u00bb dans le titre, mais j’aurais presque pu.<\/p>\n
Bref, blague \u00e0 part, il y a quelques semaines je vous parlais de l’arriv\u00e9e de
-webkit-image-set()<\/code> de mani\u00e8re assez concise par ce tweet :<\/p>\n\n
-webkit-image-set() on iOS6 and Safari 6 blogs.captechconsulting.com\/blog\/matt-kesl\u2026<\/a> #rwd<\/a> #wdfr<\/a> #wdstr<\/a><\/p>\n
— Geoffrey Crofte (@geoffrey_crofte) Octobre 17, 2012<\/a><\/p><\/blockquote>\n
Je vous propose un petit test de cette fonction. Puis nous irons un peu plus loin sur les \u00ab\u00a0images HTML\u00a0\u00bb.<\/p>\n
Pour des raisons d’adaptabilit\u00e9, il m’arrive de plus en plus de placer le logo sur un site web en
background<\/code> CSS, donc pas avec un \u00e9l\u00e9ment HTMLimg<\/code>.
\nCette technique me permet de proposer une image l\u00e9g\u00e8re pour les smartphones et une image plus complexe, grande (et souvent plus lourde) pour des formats plus larges.<\/p>\nDe plus si vous regardez un logo classique qui n’a pas subit d’adaptation pour un \u00e9cran Retina (ou autres HD), il va vous paraitre de moyenne qualit\u00e9.
\nAfin de proposer un logo pour Retina sans passer par une media queries, voici un code fonctionnel :<\/p>\nheader .logo {\r\n background-image: url(img\/not-supported.png);\r\n background-image: -webkit-image-set(url(img\/logo.png) 1x, url(img\/logo-2x.png) 2x);\r\n background-image: image-set(\"img\/logo.png\" 1x, \"img\/logo-2x.png\" 2x, \"img\/logo-awesome-res.png\" 1337dpi);\r\n}<\/code><\/pre>\nIci la nouvelle valeur de
background-image<\/code> permet de d\u00e9finir des images sous certaines conditions d\u00e9finies juste apr\u00e8s chacune des URL.<\/p>\nJ’ai volontairement pr\u00e9fix\u00e9 uniquement pour webkit car il semblerait que le support ne soit pas (encore) pr\u00e9vu pour les autres navigateurs.
\nLa troisi\u00e8me d\u00e9claration debackground-image<\/code> est faite d’apr\u00e8s le document en cours de r\u00e9daction du W3C<\/a> sur CSS4 Image. (1337dpi, c’est de l’humour ;))<\/p>\nCette syntaxe est compatible iOS6 Safari 6 et Chrome 23.
\nD’apr\u00e8s mes tests sous Chrome, seule une image est charg\u00e9e (chez moi la version \u00ab\u00a0logo.png\u00a0\u00bb).<\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/11\/schema-image-set-support-600x126.png\" "\\"\\"")
<\/a>Images pouvant appara\u00eetre dans la d\u00e9monstration (cliquer pour zoomer)<\/figcaption><\/figure>\n D\u00e9monstration en ligne<\/a><\/p>\n
Pourquoi
image-set<\/code> et pas media queries ?<\/h2>\nC’est une bonne question ! Et en regardant le support de image-set et celui des media queries, la question n’a que plus de force.
\nVoil\u00e0 quelques arguments en sa faveur :<\/p>\n- \n
- syntaxe courte<\/li>\n
- permet d’intervenir pr\u00e9cis\u00e9ment<\/li>\n
- permet de ne charger que la bonne image tout de suite (test\u00e9 sur Chrome 23), ce qui n’est pas toujours le cas avec media queries<\/li>\n
- est simplement fait pour \u00e7a, et pas autre chose<\/li>\n
- donne un outil en plus des media queries (c’est toujours bien de varier les armes)<\/li>\n<\/ul>\n
Qu’en est-il des \u00ab\u00a0images HTML\u00a0\u00bb<\/h2>\n
Un groupe de travail est actuellement en train de se tirer les cheveux pour proposer et pr\u00e9senter des solutions possibles pour les images adaptatives.
\nResponsiveImages.org<\/a><\/p>\nL’\u00e9l\u00e9ment
picture<\/code><\/h3>\nCet \u00e9l\u00e9ment peut, \u00e0 l’image de l’\u00e9l\u00e9ment
video<\/code>, accueillir diff\u00e9rentes sources.
\nCes sources sont utilis\u00e9es si la condition d\u00e9finie par l’attributmedia<\/code> est respect\u00e9e.<\/p>\n<picture alt=\"Texte pertinent\">\r\n <source src=\"image-small.jpg\">\r\n <source media=\"(min-width: 20em)\" src=\"image-mid.jpg\">\r\n <source media=\"(min-width: 40em)\" src=\"image-large.jpg\">\r\n <img src=\"image-fallback.jpg\">\r\n<\/picture><\/code><\/pre>\nLa source peut accueillir l’attribut media qui permet de pr\u00e9ciser une requ\u00eate.
\nC’est une media queries, vous pouvez donc effectuer une requ\u00eate sur la largeur du viewport, la r\u00e9solution du device, etc.
\nL’attributalt<\/code> de l’image est port\u00e9 par l’\u00e9l\u00e9mentpicture<\/code> et une alternative pour les navigateurs ne supportant pas cette sp\u00e9cification est propos\u00e9e gr\u00e2ce \u00e0 l’\u00e9l\u00e9mentimg<\/code> ins\u00e9r\u00e9 danspicture<\/code>.<\/p>\nL’attribut
srcset<\/code><\/h3>\nCet attribut vient accompagner l’\u00e9l\u00e9ment
img<\/code> et son attributsrc<\/code> et permet de charger conditionnellement des images.<\/p>\n<img\r\n src=\"image-small.jpg\"\r\n srcset=\"image-mid.jpg 300w, image-large.jpg 2x\"><\/code><\/pre>\nIci nous avons une image pr\u00e9vue pour les navigateurs qui ne comprennent pas l’attribut
srcset<\/code> (via l’attributsrc<\/code>), puis deux images diff\u00e9rentes utilis\u00e9es selon la condition300w<\/code> pour la premi\u00e8re (image-mid.jpg<\/code>) ou2x<\/code>, qui correspond \u00e0 du HD Retina, pour la seconde (image-large.jpg<\/code>).<\/p>\nCette syntaxe est partiellement compatible depuis Chrome 34, mais est encore ignor\u00e9e par les autres navigateurs. Et l\u00e0 o\u00f9 Chrome fait bien son boulot, c’est que seule l’image concern\u00e9e est charg\u00e9e. C’est \u00e0 dire que l’image en
src<\/code> est ignor\u00e9e si l’un des crit\u00e8res desrcset<\/code> correspond.<\/p>\nTest et d\u00e9monstration de
srcset<\/code><\/a><\/p>\nEn pratique, il serait possible de d\u00e9finir l’attribut
srcset<\/code> sur une source de l’\u00e9l\u00e9mentpicture<\/code> \u00e9galement :<\/p>\n<picture>\r\n <source src=\"big.jpg\">\r\n <source media=\"(max-width: 640px)\" srcset=\"small.jpg 1x, small-hd.jpg 2x\">\r\n <img src=\"fallback.jpg\" alt=\"\">\r\n<\/picture><\/pre>\n<\/code>
\nsrcset<\/code> n'intervient ici que pour ajouter une condition et une nouvelle source \u00e0 la premi\u00e8re condition d\u00e9finie par l'attributmedia<\/code>.<\/p>\n<update>22\/08\/2013<\/strong> : WebKit supporte d\u00e9sormais la syntaxe
srcset<\/code> (source<\/a>)<\/update>
\n<update>09\/04\/2014<\/strong> : Chrome 34+ supporte d\u00e9sormais la syntaxesrcset<\/code> (source<\/a>), partiellement tout du moins<\/update><\/p>\nMais encore…<\/h2>\n
Pour ceux qui aiment les choses longues, dures et en anglais, voici un peu de lecture :
\nHTML Proposals - Responsive images<\/a><\/p>\nSinon il existe aussi une solution partielle avec ce plugin jQuery :
\njQuery Responsive img<\/a>
\nPlugin a surveiller puisqu'une prochaine version pourrait supporter la HD.<\/p>\nEnjoy !<\/p>\n
\nSources et liens utiles<\/h2>\n
- \n
- Responsive images for HTML5 - Adobe blogs<\/a><\/li>\n
- Un article plus complet sur Picture<\/a><\/li>\n
- Safari 6 and Chrome 21 add image-set to support retina images<\/a><\/li>\n
- On Apple\u2019s Lack Of Adaptive Image Support In WebKit<\/a><\/li>\n
- Documentation du W3C<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Retina, ou la haute d\u00e9finition de mani\u00e8re plus g\u00e9n\u00e9rale pour les images de nos sites web pose un probl\u00e8me relatif. En effet depuis la sortie du premier Mac Book Pro \u00e0 \u00e9cran Retina (et avant pour certain), la question qui revient le plus souvent est : doit-on boycotter Retina, ou au contraire y accorder de l’importance ?<\/p>\n","protected":false},"author":4,"featured_media":3225,"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":[17,12],"tags":[523,533,256,536,535,403,519,534,520],"coauthors":[],"class_list":["post-3124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-veille-technologique","tag-css4","tag-hd","tag-image","tag-image-set","tag-picture","tag-responsive","tag-retina","tag-srcset","tag-webkit"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3124","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=3124"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3124\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3225"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3124"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Un article plus complet sur Picture<\/a><\/li>\n
- Responsive images for HTML5 - Adobe blogs<\/a><\/li>\n
- risque de devoir faire de la d\u00e9tection de user agent<\/em><\/li>\n