HTML : afficher des tailles d’images différentes en fonction des écrans
HTML : afficher des tailles d’images différentes en fonction des écrans
Le W3C publie un projet de spécification pour des « Responsive Images »
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 :
Citation:
<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 ?
:fleche: 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 ?
Exemple 2 avec balise img
Voici un deuxième exemple, si pour les besoins du référencement et de l'accessibilité, une balise img est nécessaire:
html:
Code:
1
2
3
4
|
<div id="test">
<img src="small-1.jpg" alt="Mon alt pour le référencement et l'accessibilité">
</div> |
css:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
#test{
height:40px;
width:40px;
}
@media all and (max-width: 17em) {
#test{
background-image: url(small-1.jpg);
background-image: -webkit-image-set(url(small-1.jpg) 1x,
url(small-2.jpg) 2x);
}
#test img{
display:none;
}
}
@media all and (min-width: 18em) {
#test{
background-image: url(med-1.jpg);
background-image: -webkit-image-set(url(med-1.jpg) 1x,
url(med-2.jpg) 2x);
height:70px;
width:70px;
}
#test img{
display:none;
}
}
@media all and (min-width: 45em) {
#test{
background-image: url(large-1.jpg);
background-image: -webkit-image-set(url(large-1.jpg) 1x,
url(large-2.jpg) 2x);
height:120px;
width:120px;
}
#test img{
display:none;
}
} |
@+
BPiero
