Developpez.com

Télécharger gratuitement le magazine des développeurs, le bimestriel des développeurs avec une sélection des meilleurs tutoriels

« Responsive Images » : afficher des tailles d'images qui varient avec les écrans
Le W3C publie un nouveau projet de spécification HTML

Le , 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 :

<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>

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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Muchos Muchos - Membre expert https://www.developpez.com
le 31/08/2012 à 14:58
C'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> ?
Avatar de v1cent v1cent - Membre éclairé https://www.developpez.com
le 31/08/2012 à 15:07
très bien !

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
Avatar de Muchos Muchos - Membre expert https://www.developpez.com
le 31/08/2012 à 15:20
@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 web
Avatar de camus3 camus3 - Membre éprouvé https://www.developpez.com
le 31/08/2012 à 15:50
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

Autant utiliser un webservice avec un cache , et basculer sur une version mobile plus légère selon l'user-agent. Comment détectes tu la résolution sans javascript ?
Les media query n'ont jamais été une veritable solution pour adapter le poids de la page au client qui la demande.
Avatar de Freem Freem - Membre émérite https://www.developpez.com
le 31/08/2012 à 15:57
Format 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.
Avatar de Hayaxx Hayaxx - Membre du Club https://www.developpez.com
le 31/08/2012 à 16:23
L'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 : Sélectionner tout
<source media="(min-width: 45em)" low="large-1.jpg 1x" high="large-2.jpg 2x">
Avatar de ukarroum ukarroum - Futur Membre du Club https://www.developpez.com
le 01/09/2012 à 19:50
Je pense que c'est une excellente idée
à condition que les navigateurs utilisés la prend en charge
Avatar de Le Vendangeur Masqué Le Vendangeur Masqué - Nouveau Candidat au Club https://www.developpez.com
le 02/09/2012 à 9:33
Citation Envoyé par Gordon Fowler  Voir le message
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.

En 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/
Avatar de kolodz kolodz - Modérateur https://www.developpez.com
le 02/09/2012 à 22:12
Même si je trouve l'idée intéressante et à développer. Le temps que cela soit mise en place...

Il est probable que la bande passante sur les terminaux mobiles soit beaucoup moins problématique.
Que le problème de la résolution des images ai une autre parade mise en place...

HTML5 et CSS3 se sont pas encore un standard au niveau des sites lamda.
(balises header/footer/section/article/nav pratiquement jamais utilisé)

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
Avatar de rambc rambc - Membre expérimenté https://www.developpez.com
le 03/09/2012 à 8:32
Citation Envoyé par Le Vendangeur Masqué  Voir le message
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.

Peux-tu préciser un peu ?
Offres d'emploi IT
Data scientist senior H/F
Safran - Ile de France - Magny-les-Hameaux (Saclay)
Architecte électronique de puissance expérimenté H/F
Safran - Ile de France - Villaroche - Réau
Architecte sécurité des systèmes d'information embarqués H/F
Safran - Ile de France - 100 rue de Paris 91300 MASSY

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil