CodeGym /Cours Java /Frontend SELF FR /Images adaptatives

Images adaptatives

Frontend SELF FR

Niveau 25 , Leçon 4

Disponible

5.1 L'attribut srcset

Les images adaptatives jouent un rôle crucial dans la création de pages web réactives et optimisées. Elles permettent de charger des images de différentes tailles et résolutions en fonction de l'appareil et des conditions de visualisation, ce qui améliore les performances et la convivialité. Les principaux outils pour intégrer des images adaptatives en HTML sont les attributs srcset et sizes.

L'attribut srcset est utilisé pour spécifier différentes sources d'image avec diverses tailles ou résolutions. Le navigateur sélectionne l'image la plus appropriée en fonction de l'appareil de l'utilisateur.

Syntaxe:

    
      <img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">

Où :

src: indique le chemin de l'image par défaut
srcset: contient une liste d'images et leurs caractéristiques, séparées par des virgules
1x, 2x: indiquent le facteur d'échelle (par exemple, 1x pour la résolution standard et 2x pour les appareils à haute densité de pixels)

Exemple d'utilisation de srcset:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemple d'utilisation de srcset</title>
        </head>
        <body>
          <img
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            alt="Image adaptative exemple">
        </body>
      </html>

Explication du code:

src="images/default.jpg": indique l'image par défaut
srcset: contient une liste d'images avec leur largeur en pixels (480w, 800w, 1200w). Le navigateur choisit l'image la plus appropriée selon la largeur de la fenêtre

5.2 L'attribut sizes

L'attribut sizes est utilisé en combinaison avec srcset pour indiquer la largeur de l'image dans différentes conditions d'affichage. Cela permet au navigateur de choisir plus précisément l'image appropriée.

Syntaxe:

HTML

    
      <img src="default.jpg"
      srcset="image1.jpg 480w, image2.jpg 800w"
      sizes="(max-width: 600px) 480px, 800px"
      alt="Example Image">

Où :

sizes: contient une liste de conditions d'affichage et les largeurs d'image correspondantes
(max-width: 600px) 480px: si la largeur de la fenêtre est inférieure ou égale à 600px, utiliser une image de largeur 480px
800px: dans tous les autres cas, utiliser une image de largeur 800px

Exemple d'utilisation de sizes:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemple d'utilisation de sizes</title>
          <style>
            .responsive-img {
              width: 100%;
              max-width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
        <img
          class="responsive-img"
          src="images/default.jpg"
          srcset="images/image-small.jpg 480w,
            images/image-medium.jpg 800w,
            images/image-large.jpg 1200w"
          sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
          alt="Image adaptative exemple">
        </body>
      </html>

Explication du code:

sizes définit la largeur de l'image pour différentes conditions d'affichage :

Si la largeur de la fenêtre est inférieure ou égale à 600px, utiliser une image de largeur 480px
Si la largeur de la fenêtre est inférieure ou égale à 900px, utiliser une image de largeur 800px
Dans tous les autres cas, utiliser une image de largeur 1200px

5.3 Images adaptatives

Image adaptative pour différentes tailles d'écran

Créons un exemple où l'image s'adapte à différentes tailles d'écran en utilisant les attributs srcset et sizes.

Exemple:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Image adaptative</title>
          <style>
            .responsive-img {
              width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
          <img
            class="responsive-img"
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
            alt="Image adaptative exemple">
        </body>
      </html>

Explication du code:

src="images/default.jpg": indique l'image par défaut
srcset: définit trois versions de l'image avec différentes largeurs (480w, 800w, 1200w)
sizes: définit la largeur de l'image pour différentes conditions :
- jusqu'à 600px — utiliser une image de largeur 480px
- jusqu'à 900px — utiliser une image de largeur 800px
- au-delà de 900px — utiliser une image de largeur 1200px
.responsive-img: une classe CSS qui définit la largeur de l'image à 100% et une hauteur automatique, pour qu'elle occupe l'espace disponible tout en conservant ses proportions

Précédent Leçon précédente

Suivant Leçon suivante

Commentaires

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION