CSS3
Appliquer aux images
Aujourd'hui, de nombreux navigateurs gère le redimensionnement des images.
Pour qu'une image s'adapte à la largeur de son bloc, écrivez :
img {width:100%;}ou
img {max-width:100%;}
Cela concerne uniquement les images qui sont originellement suffisamment large pour être élargies dans une grande fenêtre. Cela signifie que cela ne concerne pas les icônes, mais plutôt les images illustratives ou celles destinées à une image de fond.
Définir les tailles extrêmes
Avec max-width on définira la taille maximale que l'on accepte pour l'image et avec min-width sa taille minimale. Width devient alors la taille par défaut utilisée entre ces deux extrêmes.
Ainsi si on commence avec :
img {width:100%;}Cette valeur force l'image à s'adapter à la largeur de son contenant. Dans le cas d'une image plus petite que son contenant, cette solution n'est donc pas du tout adaptée. Le mieux sera donc de cumuler width et max-width pour profiter du meilleur de chaque selon les navigateurs.
img { width:100%; max-width:600px; }
Dans ce cas, la valeur de la propriété max-width est souvent égale à la dimension de l'image en pixel et n'est donc plus exprimée en pourcentage comme précédemment
img { width:100%; max-width:600px;min-width:300px; }
min-width viendra stipuler que l'image ne devra plus être adaptée en dessous d'une taille de 300px, ce qui peut être utile dans le cas de schémas ou graphiques qui nécessitent une bonne lisibilité qui serait mise en danger par la réduction trop forte de la taille d'affichage à l'écran.
Les navigateurs et système d'exploitation à problèmes
Ces propriétés min-width et max-width ne fonctionne pas avec les vieux navigateurs comme Internet Explorer 6 et les versions précédentes de ce navigateur. Il faudra alors systématiquement utiliser width en complément.
Des artefacts sur l'image sont visibles avec les versions antérieures des navigateurs tournant sur Windows 7, et cela peut importe les navigateurs (Internet Explorer, Firefox etc).
Vous devez alors vous tourner vers des filtres et des scripts en javascript.
Le poids des images
En responsif plus que dans tout autre type de conception il faudra faire particulièrement attention au poids des images. En effet, la tentation est forte d'utiliser la même image pour les différentes tailles d'écran malgré le fait que celles-ci seront adaptée et redimensionnée dynamiquement.
Par exemple, sur ce site, les propriétés de l'image affichée montre qu'elle fait 1200px de large alors que l'affichage est définir à 320. L'image pèse à elle seule 1,296 Mo, ce qui est énorme si on pense en terme de temps de téléchargement 3G voire, comme souvent, Edge.
