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

0PARTAGES

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
Citation Envoyé par kolodz  Voir le message
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é)

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