L'optimisation des images

Dès le départ, il est bon de prendre soin des éléments qui peuvent être énormes et qui ne tiendraient pas sur les appareils mobiles.

On peut empêcher les images de s'afficher plus larges que la largeur de l'écran :

1img {
2  max-width: 100%;
3}

Quand une image fait 500px de large et que la taille de la tablette est de 767px, l'image s'affiche à sa taille d'origine. Quand une image fait 500px de large et que la taille du téléphone est de 320px, l'image s'affiche avec une largeur de 320px.

Une alternative à max-width, c'est max-height. Il existe aussi leurs équivalents : min-width et min-height.

Il vaut mieux ne pas fixer les hauteurs des sections et des div avec height, mais plutôt avec min-height. Quand on a trois colonnes dans une section, on cherchera à ce que l'une s'affiche en dessous de l'autre. Essaie de ne pas fixer de hauteur fixe pour le parent.

L'attribut srcset en HTML5 te permet de spécifier différentes versions d'une image pour différentes résolutions d'écran. Le navigateur choisira automatiquement l'image appropriée selon la taille de l'écran et la densité de pixels.

1<img  srcset="image-small.jpg 500w,
2             image-medium.jpg 1000w,
3             image-large.jpg 1500w"
4      src="image-medium.jpg" alt="Exemple d'image">

La balise <picture>

Avec la balise <picture>, on peut décider depuis le HTML quelle image charger pour une largeur donnée :

1<picture>
2  <source media="(min-width: 960px)" srcset="image-large.jpg">
3  <source media="(min-width: 575px)" srcset="image-medium.jpg">
4  <img src="image-small.jpg" alt="image">
5</picture>

Notre élément picture contient des éléments source avec l'attribut media et une règle de media queries (on en reparle dans un instant).

Pour la plage au-dessus de 960px, on affichera image-large.jpg. Pour la plage au-dessus de 575px, on affichera image-medium.jpg. La plage qui ne remplit pas les conditions ci-dessus se trouve en dessous de 575px : dans ce cas, on affichera image-small.jpg.

3. Compression et optimisation du format

Avant de téléverser des images sur la page, il est recommandé de les compresser. Il existe des outils et des services en ligne qui peuvent aider pour cette tâche. Le choix du bon format d'image, comme JPEG, PNG ou des formats plus récents comme WebP, peut aussi avoir un impact sur la taille du fichier.

Il faut savoir que les éléments vectoriels ne perdent pas en qualité lorsqu'on les redimensionne. Une petite icône sur une page peut être agrandie à la taille d'une publicité sur gratte-ciel. Quand on agrandit des images jpg, png (bitmap) à des tailles énormes, on voit des pixels apparents : img

Tâche : optimisation des images sur un site web

Dans cette tâche, tu vas apprendre à gérer efficacement les images sur un site web pour améliorer ses performances et sa responsivité. On va appliquer diverses techniques, comme l'utilisation de propriétés CSS, d'attributs HTML et de la balise <picture>, pour adapter les images à différents appareils et résolutions d'écran.

Étape 1 : créer une structure HTML de base

Crée un nouveau fichier HTML et ajoute la structure de base d'un document HTML. Ajoute plusieurs images dans différentes sections de la page.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lien vers le fichier CSS -->
7  <title>Optimisation des images</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Galerie d'images</h1>
12  </header>
13  <main class="main">
14    <section class="gallery">
15      <h2>Images avec l'attribut srcset</h2>
16      <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
17           src="image-medium.jpg" alt="Exemple d'image">
18    </section>
19    <section class="gallery">
20      <h2>Images utilisant la balise <picture></h2>
21      <picture>
22        <source media="(min-width: 960px)" srcset="image-large.jpg">
23        <source media="(min-width: 575px)" srcset="image-medium.jpg">
24        <img src="image-small.jpg" alt="Exemple d'image">
25      </picture>
26    </section>
27  </main>
28  <footer class="footer">
29    <p>&copy; 2023 Galerie d'images. Tous droits réservés.</p>
30  </footer>
31</body>
32</html>

Étape 2 : créer un fichier CSS

Ouvre ou crée un nouveau fichier CSS et enregistre-le sous le nom styles.css.

Étape 3 : mise en forme de base

Ajoute des styles de base pour les éléments .header, .main, .gallery et .footer.

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.main {
16  padding: 20px;
17}
18
19.gallery {
20  margin-bottom: 40px;
21}
22
23img {
24  max-width: 100%;
25  height: auto;
26}
27
28.footer {
29  background-color: #333;
30  color: #fff;
31  text-align: center;
32  padding: 10px;
33}

Étape 4 : ajouter la compression et l'optimisation du format des images

Avant de placer les images sur la page, compresse-les et enregistre-les dans des formats appropriés, comme JPEG, PNG ou WebP. Tu peux utiliser des outils en ligne, comme TinyPNG, ImageOptim ou Squoosh, pour optimiser la taille des fichiers image sans perte de qualité notable.

Exemples d'utilisation :

1. Attribut srcset :

1<img srcset="image-small.jpg 500w,
2             image-medium.jpg 1000w,
3             image-large.jpg 1500w"
4      src="image-medium.jpg" alt="Exemple d'image">

2. Balise <picture> :

1<picture>
2  <source media="(min-width: 960px)" srcset="image-large.jpg">
3  <source media="(min-width: 575px)" srcset="image-medium.jpg">
4  <img src="image-small.jpg" alt="Exemple d'image">
5</picture>

Étape 5 : ajouter des éléments vectoriels

Utilise des éléments vectoriels, comme le SVG, dès que possible, pour que les images soient redimensionnables sans perte de qualité. Ajoute un fichier SVG d'exemple à la section.

1<section class="gallery">
2  <h2>Image vectorielle SVG</h2>
3  <img src="example.svg" alt="Exemple d'image vectorielle">
4</section>

Fichier HTML (index.html) - version finale :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lien vers le fichier CSS -->
7  <title>Optimisation des images</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Galerie d'images</h1>
12  </header>
13  <main class="main">
14    <section class="gallery">
15      <h2>Images avec l'attribut srcset</h2>
16      <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
17           src="image-medium.jpg" alt="Exemple d'image">
18    </section>
19    <section class="gallery">
20      <h2>Images utilisant la balise <picture></h2>
21      <picture>
22        <source media="(min-width: 960px)" srcset="image-large.jpg">
23        <source media="(min-width: 575px)" srcset="image-medium.jpg">
24        <img src="image-small.jpg" alt="Exemple d'image">
25      </picture>
26    </section>
27    <section class="gallery">
28      <h2>Image vectorielle SVG</h2>
29      <img src="example.svg" alt="Exemple d'image vectorielle">
30    </section>
31  </main>
32  <footer class="footer">
33    <p>&copy; 2023 Galerie d'images. Tous droits réservés.</p>
34  </footer>
35</body>
36</html>

Fichier CSS (styles.css) - version finale :

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.main {
16  padding: 20px;
17}
18
19.gallery {
20  margin-bottom: 40px;
21}
22
23img {
24  max-width: 100%;
25  height: auto;
26}
27
28.footer {
29  background-color: #333;
30  color: #fff;
31  text-align: center;
32  padding: 10px;
33}

Tâche supplémentaire

1. Ajoute d'autres images à la galerie et expérimente avec différentes valeurs de srcset et <picture> pour voir comment la disposition des images change.
2. Teste tes compétences en ajoutant des images dans différents formats (JPEG, PNG, WebP) et vérifie comment cela affecte les performances de la page.
3. Ajoute différents styles aux images, par exemple en changeant les couleurs, les tailles de police et d'autres propriétés des éléments, pour mieux comprendre comment fonctionnent les différentes options CSS.
4. Ajoute des animations aux images pour ajouter de l'interactivité et une meilleure expérience utilisateur.