Préparer une image avant publication

Redimensionnez à la taille à laquelle l'image sera réellement affichée, au plus au double pour les écrans haute densité. Recadrez à la forme dont la mise en page a besoin, plutôt que de laisser le navigateur l'écraser. Compressez jusqu'à l'apparition des premiers artefacts, puis reculez d'un cran. Retirez les métadonnées en dernier. L'ordre compte : chaque étape après la première travaille sur beaucoup moins de pixels.

Les dimensions d'abord

Le nombre de pixels croît avec le carré de la largeur : une différence modeste de dimensions représente donc une différence énorme de données. Une image stockée en 4000 pixels de large et montrée dans une colonne de 800 pixels transporte environ vingt-cinq fois les données nécessaires, et aucun réglage de qualité ne rattrape cela.

Pour choisir une largeur cible, mesurez la plus grande largeur à laquelle l'image est rendue dans la mise en page, pas la plus grande largeur de l'écran. Une carte dans une grille à trois colonnes ne fera peut-être jamais plus de 380 pixels de large. Si un même fichier sert à plusieurs endroits, dimensionnez-le pour le plus grand.

Pixels de l'appareil, pixels CSS et le mythe du DPI

Un pixel CSS est une unité de mise en page, pas un point physique. Le rapport de pixels de l'appareil indique combien de pixels physiques l'écran peint par pixel CSS : 1 sur les moniteurs anciens, 2 sur la plupart des téléphones et portables modernes, 3 sur certains téléphones. Une colonne de 800 pixels CSS à un rapport de 2 est peinte avec 1600 pixels physiques, ce qui explique qu'une image dimensionnée à sa largeur CSS paraisse molle.

La règle pratique est 2x. Exportez au double de la largeur d'affichage et laissez le navigateur réduire. Passer à 3x coûte 125 % de données de plus pour une différence que peu de gens voient à une distance de lecture normale.

Le DPI et le PPI stockés dans un fichier n'ont aucune importance pour le web. Ce sont un simple nombre d'en-tête indiquant à quelle taille physique le fichier devrait s'imprimer, et les navigateurs l'ignorent totalement.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Exporter en « 300 DPI » n'ajoute aucun pixel et ne change aucune donnée d'image.

Ce que fait le rééchantillonnage

Réduire signifie que de nombreux pixels source deviennent un seul. Un détail plus fin que la nouvelle grille ne peut pas être représenté, et si le rééchantillonneur prélève trop peu de pixels source au lieu de faire la moyenne sur toute la surface, ce détail se replie en fausses trames : diagonales crénelées et moirés sur des textures répétitives fines, comme une chemise rayée ou un tableau aux bordures d'un pixel. Une bonne réduction moyenne chaque pixel contributeur, et demande en général un peu d'accentuation ensuite.

Agrandir ne crée aucun détail. L'interpolation ne fait que deviner des valeurs entre des pixels qui existent déjà, si bien que le résultat est mou ou en escaliers. Les agrandisseurs à apprentissage automatique inventent à la place un détail plausible, ce qui n'est pas la même chose que le récupérer.

Proportions : recadrer, encadrer ou étirer

Le recadrage garde le sujet à sa bonne échelle et jette les bords ; c'est le choix par défaut approprié. L'encadrement conserve tout le cadre mais ajoute des bandes et impose de choisir leur couleur ; il gagne sa place quand rien ne peut être coupé, comme pour une œuvre ou un schéma. L'étirement déforme, et l'œil le repère immédiatement sur les visages, les cercles et les caractères.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Quand un même fichier apparaît sous plusieurs formes, raisonnez en zone de sécurité : la région qui survit à tous les recadrages. Une bannière en 16:9 coupe le haut et le bas, une tuile en 1:1 et une carte en 4:5 coupent les côtés, si bien que ce que toutes conservent est une bande passant par le centre. Gardez-y le sujet et tout texte éventuel, sinon un visage placé près du bord d'une photo en paysage se fait décapiter par le recadrage carré.

Trouver le réglage de qualité

Un chiffre de qualité n'est le pourcentage de rien du tout, et les échelles ne sont pas comparables d'un encodeur à l'autre. JPEG 80, WebP 80 et AVIF 80 sont trois réglages sans rapport entre eux.

La méthode est la même pour tous. Exportez à quelques réglages, regardez le résultat à la taille à laquelle il sera montré, et repérez où les artefacts affleurent en premier : les dégradés doux comme les ciels, qui se strient et se marbrent ; les contours francs et le texte, qui sonnent. Trouvez le point où les dégâts deviennent visibles, reculez d'un cran, arrêtez.

Un chiffre fixe unique est mauvais pour toutes les images, car c'est le contenu qui décide de ce que l'on peut jeter : une photographie bruitée et texturée a besoin de plus de bits pour survivre, alors qu'une illustration en aplats s'effondre à un réglage dont une photo chargée ne s'aperçoit même pas.

Détourages, bords doux et halos

Supprimer l'arrière-plan est justifié quand l'image doit se poser sur plus d'une couleur de fond, ou chevaucher d'autres éléments : photos de produits, logos, une personne intégrée à une mise en page. C'est une erreur là où la frontière est réellement fine, comme pour des cheveux, du feuillage ou du verre, car un mauvais cache a plus mauvaise allure qu'un rectangle assumé.

Un bord dur est binaire, chaque pixel étant entièrement opaque ou entièrement transparent, ce qui convient aux graphiques en aplats mais forme des marches sur tout ce qui est photographique. Un cache doux autorise une opacité fractionnaire : un pixel peut être à 40 % sujet, ce qui est la seule façon d'obtenir des cheveux corrects.

Le halo vient des pixels de la frontière. Le flou de l'objectif et l'anticrénelage ont déjà mêlé la couleur du sujet à celle de l'ancien arrière-plan, si bien que chacun de ces pixels contient :

observed = alpha * foreground + (1 - alpha) * background

La suppression d'arrière-plan ne calcule que l'alpha. La couleur restée dans ces pixels est encore contaminée : un sujet découpé d'une prise en studio blanc emporte donc une frange pâle, invisible sur une page blanche et évidente sur une page sombre. Un vrai matage résout aussi la couleur du premier plan, ce qui apparaît sous les noms de défrangeage ou de décontamination des couleurs. À défaut, resserrez le cache vers l'intérieur d'une fraction de pixel et adoucissez-le de nouveau.

Rotation et métadonnées

Une image droite dans un programme et couchée dans un autre, c'est presque toujours l'orientation EXIF. Les appareils photo stockent l'image du capteur sans rotation et ajoutent une étiquette indiquant comment la tourner. Un logiciel qui lit l'étiquette l'affiche correctement ; un logiciel qui l'ignore, dont beaucoup de bibliothèques d'images et de générateurs de vignettes, affiche les pixels bruts sur le côté.

Le remède consiste à inscrire la rotation dans les pixels et à mettre l'étiquette à 1 ou à la retirer. Une rotation par pas de 90 degrés réorganise les pixels sans les rééchantillonner. Méfiez-vous de la double rotation : des pixels déjà tournés, une étiquette toujours posée, et tout visualiseur conforme les tourne une seconde fois.

Retirer les métadonnées est une mesure de confidentialité, pas du rangement. Les blocs EXIF, IPTC et XMP transportent couramment des coordonnées GPS précises à quelques mètres, l'heure de prise de vue, la marque, le modèle et le numéro de série de l'appareil, le nom du propriétaire, et parfois une vignette intégrée montrant encore l'image avant son recadrage. Une photo prise chez soi et publiée intacte publie une adresse personnelle.

Retirez-les en dernier, à une exception près : le profil colorimétrique ICC se trouve à côté de ces métadonnées, et le supprimer d'une image à gamut étendu laisse des nombres qui seront lus comme du sRGB, ce qui donne des couleurs fades ou sursaturées. Convertissez d'abord en sRGB, puis retirez tout le reste.