« Responsive Images » : afficher des tailles d'images qui varient avec les écrans
Le W3C publie un nouveau projet de spécification HTML
Le 2012-08-31 14:13:20, par Gordon Fowler, Expert éminent sénior
L’heure est au « Responsive » pour le développement de sites Web. Après le Responsive Design – qui fait varier le nombre de colonnes et modifie les contenus à afficher en fonction de la taille de la fenêtre – voici le HTML Responsive Images Extension.
Ce projet du W3C vise à normaliser la manière d’afficher des tailles d’images différentes en fonction de la taille de la fenêtre de navigation et de la résolution de l’écran.
Concrètement, faire télécharger des images HD en très grand format via des réseaux internet mobiles pour des smartphones de moins de 3.5 pouces n’a aucun sens. Inversement, envoyer des images de le taille d’un timbre-poste sur des écrans larges de PC de bureau est également un contre-sens.
L’idée est donc de définir, pour une seule et même illustration, un jeu d’images avec des tailles et des résolutions différentes. La bonne image « qui va bien » sera envoyée en fonction du terminal et des paramètres d’affichage du navigateur.
Le code HTML associé se présente sous cette forme :
Les deux premières lignes fonctionnent de la même manière.
Source media définit une largeur minimale pour laquelle les images appelées dans la balise pourront être affichées. Puis srceset propose deux images, une pour une faible résolution (large-1.jpg, dans la première ligne) et une pour une haute résolution (large-2.jpg).
Si la fenêtre est trop petite (< 45em mais >18em), ce sont des images de tailles moyennes que le site affichera (med-1.jpg ou med-2.jpg, dans la deuxième ligne).
Si l’affichage ne remplit aucune de ces conditions, un premier fallback permet d’afficher une image minimale par défaut (small-1.jpg ou small-2.jpg).
Enfin, la dernière ligne est un deuxième fallback pour les navigateurs qui ne supportent pas cette spécification. Ce qui, aujourd’hui, est le cas de tous les navigateurs puisqu’il s'agit des premiers jets d’un projet mené par le Responsive Images Community Group, sous l’égide du W3C (et du représentant de Microsoft dans l’institution, Adrian Bateman. Bateman avec un e).
Une des applications éventuelles pour les développeurs pourrait être de mixer cette technique avec des images vectorielles - qui peuvent être agrandies et rapetissées à l'infini - pour affiner les designs Webs.
En attendant, le premier draft du HTML Responsive Images Extension est consultable depuis aujourd’hui sur cette page officielle.
Et vous ?
Ce projet de « Responsive Images » est-il d’après-vous une bonne idée à suivre pour améliorer le design des pages Web ? Ou y a-t-il des moyens de le faire sans passer par une nouvelle spécification ?
Ce projet du W3C vise à normaliser la manière d’afficher des tailles d’images différentes en fonction de la taille de la fenêtre de navigation et de la résolution de l’écran.
Concrètement, faire télécharger des images HD en très grand format via des réseaux internet mobiles pour des smartphones de moins de 3.5 pouces n’a aucun sens. Inversement, envoyer des images de le taille d’un timbre-poste sur des écrans larges de PC de bureau est également un contre-sens.
L’idée est donc de définir, pour une seule et même illustration, un jeu d’images avec des tailles et des résolutions différentes. La bonne image « qui va bien » sera envoyée en fonction du terminal et des paramètres d’affichage du navigateur.
Le code HTML associé se présente sous cette forme :
<picture alt="">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg">
</picture>
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg">
</picture>
Source media définit une largeur minimale pour laquelle les images appelées dans la balise pourront être affichées. Puis srceset propose deux images, une pour une faible résolution (large-1.jpg, dans la première ligne) et une pour une haute résolution (large-2.jpg).
Si la fenêtre est trop petite (< 45em mais >18em), ce sont des images de tailles moyennes que le site affichera (med-1.jpg ou med-2.jpg, dans la deuxième ligne).
Si l’affichage ne remplit aucune de ces conditions, un premier fallback permet d’afficher une image minimale par défaut (small-1.jpg ou small-2.jpg).
Enfin, la dernière ligne est un deuxième fallback pour les navigateurs qui ne supportent pas cette spécification. Ce qui, aujourd’hui, est le cas de tous les navigateurs puisqu’il s'agit des premiers jets d’un projet mené par le Responsive Images Community Group, sous l’égide du W3C (et du représentant de Microsoft dans l’institution, Adrian Bateman. Bateman avec un e).
Une des applications éventuelles pour les développeurs pourrait être de mixer cette technique avec des images vectorielles - qui peuvent être agrandies et rapetissées à l'infini - pour affiner les designs Webs.
En attendant, le premier draft du HTML Responsive Images Extension est consultable depuis aujourd’hui sur cette page officielle.
Et vous ?
-
Le Vendangeur MasquéNouveau Candidat au ClubPrenons le cas de l'iPad: quand une application demande la résolution de l'écran ou une page web au navigateur, on lui répondra toujours 1024x768, même si en réalité l'écran a 2048x1536 pixels.
Faut donc en fait imaginer qu'il s'agit d'unités relatives et non de pixels physiques, un peu comme quand on utilise des pourcentages pour dimensionner ses balises.
Pareil pour le viewport sur l'iPhone: on le fixe à 320px de large peut importe ensuite si l'écran peut faire le double.
C'est pour ça qu'une machine Retina ne fait pas exploser la mise en page d'un site ou l'affichage d'une application non adaptée.
En fait le seul truc qui change c'est la résolution des images, d'où l'article de dev.com et celui que j'ai donné en lien.
Pour ce qui est du texte ou des formes géométriques en CSS/SVG, tout ça est vectoriel donc n'a normalement pas à être adapté.le 03/09/2012 à 9:28 -
HayaxxMembre du ClubL'idée est intéressante, mais je bloque un peu sur srcset...
Pourquoi séparer des valeurs par une virgule, au lieu de définir plusieurs attributs ?
On perd en cohérence et en clarté. Une définition sous cette forme me paraîtrait plus logique :Code : <source media="(min-width: 45em)" low="large-1.jpg 1x" high="large-2.jpg 2x">
le 31/08/2012 à 16:23 -
Le Vendangeur MasquéNouveau Candidat au ClubEn fait le but de ces nouvelles balises n'a pas qu'à voir avec les dimensions de l'écran mais aussi sa densité de pixel.
À l'heure où les écrans Retina (et les qui-ne-s'appelent-pas-comme-ça-mais-qui-font-pareil) commencent à se répandre chez les consommateurs, il devient en effet plus que nécessaire de s'en préoccuper.
D'ailleurs pour info un écran Retina ne renvoie pas un nombre de 'em' ou de 'px' supérieur à un écran classique. Il n'y a donc aucun besoin de revoir la mise en page proprement dite de son site pour s'y adapter. La seule chose à revoir c'est les images.
Ce qu'on peut voir aujourd'hui est intéressant mais ne concerne que les images illustrant un site (comme la photo de Tata Yvette), mais pas les images inclues dans les CSS et servant à la mise en page du site proprement dite.
Pour cela c'est dommage que l'article n'évoque pas 'image-set' qui fait partit des propositions d'Edward O'Connor d'Apple pour le CSS4.
Image-set a l'avantage d'être déjà disponible (avec le préfixe -webkit-) sous Safari 6 et Chrome 21, donc cela répond déjà concrètement à une problématique, alors que l'extension HTML responsive image en est encore dans les lymbes.
Un article pour ceux qui veulent approfondir le sujet:
http://blog.cloudfour.com/safari-6-a...retina-images/le 02/09/2012 à 9:33 -
Le Vendangeur MasquéNouveau Candidat au ClubPour ce qui est des CSS la solution du webkit fonctionne déjà. Donc quelqu'un qui veut "retiniser" son site peut aujourd'hui le faire.
Sur un navigateur pas adapté ça affichera les images en résolution 1x habituelle. Donc ça n'entraîne pas d'incompatibilité.
Bien sûr tous les navigateurs ne gèrent pas ça, mais sur les machines gérant le Retina Webkit est soit largement majoritaire (sous OS X), soit le seul en piste (iOS).
D'ailleurs ce n'est pas une autre approche de Responsive Web Design ? Qui gère aussi ce problème.
Exemple:
http://www.responsinator.com/?url=bostonglobe.com[/QUOTE]
Intéressant ton lien, mais j'ai remarqué deux choses:
1/ Il y a une erreur dans le rendu iPhone: si on affiche un site non-adapté (pas de version mobile) sur ce smartphone il sera par défaut dézoomé pour rentrer dans l'écran. Responsinator ne le fait pas (mais probablement ne peut il pas le faire).
2/ Responsinator n'offre pas les versions Retina. Mais ça c'est normal puisque justement le viewport n'est pas censé changer et que le webkit renvoi toujours la même dimension d'écran, Retina ou pas.le 03/09/2012 à 9:50 -
McBennyNouveau membre du ClubPourquoi mixer cette technique avec du vectoriel ? L'intérêt du vectoriel est précisément de s'adapter à n'importe quelle taille avec la même image, donc la gestion de sources différentes en rapport avec un espace disponible est tout à fait hors sujet.
Enfin il me semble.le 07/09/2012 à 11:46 -
MuchosMembre expertC'est un brouillon très intéressant pour l'usage prévue (les responsive images) mais… bien trop brouillon
La syntaxe n'est pas très claire et il y a trop d'attributs et de balises qui se répètent ("source", "src", "srcset" oO).
Pour ma part, je pressens une refonte possible de la balise <img /> calquée sur <audio> et <video>. Mais n'était-ce pas le rôle naturellement dévolu à <figure> ?le 31/08/2012 à 14:58 -
MuchosMembre expert@V1cent : ta solution est pratique, mais elle exige des scripts qui sont autant de charges supplémentaires.
Le "mieux", ce serait un format d'image vectorielle adaptée aux images complexes, photoréalistes. Et accessoirement, commencer à abandonner jpg pour le weble 31/08/2012 à 15:20 -
camus3Membre éprouvéma solution aujourd'hui : transmettre la résolution au serveur, la garder en session et choisir des images adaptées.
ce serait quand même mieux comme ça
Les media query n'ont jamais été une veritable solution pour adapter le poids de la page au client qui la demande.le 31/08/2012 à 15:50 -
FreemMembre émériteFormat vectoriel ==> calcul ==> consommation électrique.
Web moderne ==> mobile ==> batterie ==> énergie limitée.
Puis bon, jpeg en vector? Je me demande bien comment un truc pareil pourrait se faire... Sur de grosses images, même une tour risquerait d'en chier.
D'un autre côté, vectoriel ==> moins lourd à télécharger. Ca serait d'ailleurs pas mal de lâcher png et gif pour svg, avant de vouloir lâcher jpeg.le 31/08/2012 à 15:57 -
ukarroumFutur Membre du ClubJe pense que c'est une excellente idée
à condition que les navigateurs utilisés la prend en chargele 01/09/2012 à 19:50