Image Responsive

Image responsive

Lorsque la taille d'écran diminue, il faut absolument éviter l'apparition d'un ascenseur horizontal qui perturberait à coup sûr l'utilisateur.

Pour permettre aux images de s'adapter à la taille écran tout en conservant leurs proportions, il suffit de spécifier les styles :

img {
    /* largeur maximale de l'image est celle de son élément parent */
    max-width: 100%;
    /* hauteur s'adapte à la largeur */
    height: auto;
}

Image variable en HTML5

Lorsqu'une image est redimensionnée par le navigateur, la qualité de celle-ci peut être dégradée. Dans certains cas, il est nécessaire de maintenir une résolution optimale des images pour s'assurer de leur lisibilité (graphes, ...) ou de l'image marketing (logos, ...).

Dans ces cas-là, il faut alors utiliser un logiciel de traitement d'images (Photoshop, Gimp, ...) et créer une image différente par mode de rendu (mobile, tablette, écran large,...).

La sélection de l'image au chargement de la page est gérée grâce à la balise <picture>.

<picture>
  <source srcset="images/policier-large.jpg" media="screen and (min-width: 800px)">
  <source srcset="images/policier.jpg">
  <img src="images/policier.jpg" alt="Policier">
</picture>

L'attribut srcset est obligatoire, il définit la source de l'image. L'attribut media spécifie la media query pour indiquer au navigateur quel image prendre en compte en fonction du media. Si plusieurs images respectent les critères, c'est la première qui est choisie.

Le navigateur ne charge les différentes versions des images que si les critères de l'attribut media sont vérifiés; ce qui évite le téléchargement inutile des autres images.