Préparer ses images pour le web

1Partir de la largeur d'affichage, pas de la source

La question n'est jamais « quelle taille fait mon image », mais « quelle largeur occupe-t-elle à l'écran, au maximum ».

Mesure-la :

Ouvre [URL]. Pour chaque image de la page, rends-moi un tableau : source,
largeur affichee en px, largeur intrinseque du fichier, poids du fichier.
Signale celles dont la largeur intrinseque depasse le double de la largeur
affichee.

La règle de dimensionnement tient en une ligne : le fichier doit faire environ deux fois la largeur d'affichage maximale, pour couvrir les écrans à haute densité. Au-delà, tu payes des pixels que personne ne voit.

2Choisir le format

La documentation de Next.js donne un ordre de grandeur utile : l'AVIF prend généralement environ 50 % de temps d'encodage en plus que le WebP, pour un poids environ 20 % inférieur. C'est aussi pour ça que la valeur par défaut de l'option formats du composant Image est ['image/webp'], l'AVIF devant être activé explicitement.

3Traiter par lot

La bibliothèque sharp fait le travail en quelques lignes. Ses méthodes de sortie sont toFile, toBuffer et toUint8Array, et les formats s'appellent par leur nom : webp(), avif(), jpeg(), png().

npm install sharp

import { readdir } from "node:fs/promises";
import path from "node:path";
import sharp from "sharp";

const source = "./images-sources";
const sortie = "./public/images";
const largeurs = [600, 1200, 1800];

for (const fichier of await readdir(source)) {
  const nom = path.parse(fichier).name;
  for (const largeur of largeurs) {
    await sharp(path.join(source, fichier))
      .resize({ width: largeur })
      .webp({ quality: 80 })
      .toFile(path.join(sortie, `${nom}-${largeur}.webp`));
  }
}

Sur la qualité : sharp documente le paramètre quality comme un entier de 1 à 100, avec 80 par défaut pour le JPEG et le WebP, et 50 pour l'AVIF. Descendre sous 70 se voit sur les aplats et les dégradés ; monter au-dessus de 85 ne gagne presque rien de visible et alourdit nettement.

4Poser les attributs qui comptent

Quatre attributs de l'élément img, et un cinquième conditionnel.

• width et height : les dimensions intrinsèques. Elles réservent la place avant le chargement et évitent que la page saute pendant qu'elle se charge.
• loading="lazy" : diffère le chargement jusqu'à l'approche de la zone visible. Les valeurs sont lazy et eager, eager étant la valeur par défaut.
• srcset et sizes : la liste des variantes disponibles et la largeur qu'occupera l'image selon la mise en page, pour que le navigateur choisisse le bon fichier.
• alt : toujours présent.

<img
  src="/images/atelier-1200.webp"
  srcset="/images/atelier-600.webp 600w,
          /images/atelier-1200.webp 1200w,
          /images/atelier-1800.webp 1800w"
  sizes="(max-width: 768px) 100vw, 800px"
  width="1200"
  height="800"
  loading="lazy"
  alt="Deux personnes devant un ecran, en train de relire du code"
/>

5Écrire les textes alternatifs

C'est la partie où un agent aide beaucoup et décide mal. Il produit vite une description correcte du contenu visuel, mais il ne connaît pas le rôle de l'image dans ta page.

Trois cas, trois réponses :

1. L'image porte de l'information. Décris ce qui compte, dans le contexte. Pour une photo de produit : la matière et la couleur, pas « photo de produit ».
2. L'image est décorative. Mets alt="". C'est un attribut vide, présent : il indique explicitement au lecteur d'écran de passer. Un attribut alt absent est un autre problème, l'outil lit alors souvent le nom du fichier.
3. L'image est aussi un lien ou un bouton. Le texte alternatif décrit la destination, pas l'image. Pour un logo qui ramène à l'accueil : « Accueil », pas « Logo de l'entreprise ».

Pour chaque image de [DOSSIER], propose un texte alternatif en francais,
de moins de 125 caracteres, decrivant ce qui est visible sans commencer par
« image de » ou « photo de ». Rends-moi un tableau fichier / proposition.
Je relirai chaque ligne.

La dernière phrase n'est pas de la politesse. Une description plausible mais fausse est pire qu'une description absente, parce qu'elle est invérifiable par la personne qui l'entend.