IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

« 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

218PARTAGES

6  0 
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 ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de Le Vendangeur Masqué
Nouveau Candidat au Club https://www.developpez.com
Le 03/09/2012 à 9:28
Citation Envoyé par rambc Voir le message
Peux-tu préciser un peu ?
Prenons 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é.
2  0 
Avatar de 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">
1  0 
Avatar de 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/
1  0 
Avatar de Le Vendangeur Masqué
Nouveau Candidat au Club https://www.developpez.com
Le 03/09/2012 à 9:50
1  0 
Avatar de McBenny
Nouveau membre du Club https://www.developpez.com
Le 07/09/2012 à 11:46
Pourquoi 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.
1  0 
Avatar de 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> ?
0  0 
Avatar de 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
0  0 
Avatar de 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.
0  0 
Avatar de 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.
0  0 
Avatar de 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
0  0