Redimensionnement d'image pour le web et l'email

Le redimensionnement d'images pour le web et l'email est sans doute la façon la plus courante de partager des photos numériques. Particulièrement pour la présentation web, pouvoir conserver une netteté sans artefact dans une image réduite est critique — mais peut s'avérer problématique. Contrairement à l'agrandissement où les contours crénelés posent problème, la réduction produit l'artefact d'aliasing inverse : le moiré. La prévalence du moiré dépend largement du type d'interpolateur, bien que certaines images y soient bien plus sensibles. Ce tutoriel compare différentes approches pour redimensionner une image pour le web et l'email, et fait des recommandations basées sur leurs résultats.

Contexte : Artefacts de moiré

Le moiré (prononcé « moré ») est un autre type d'artefact d'aliasing, mais qui survient lors de la réduction d'une image. Il apparaît dans les images à textures fines proches de la limite de résolution. Ces textures dépassent la résolution une fois réduites, donc l'image ne les enregistre que sélectivement selon un motif répétitif :

Notez comme ce motif n'a pas de sens physique dans l'image car ces lignes ne correspondent pas à la direction des bardeaux de toit. Les images à motifs géométriques fins sont les plus à risque : tuiles de toit, briques et boiseries lointaines, grilles métalliques, etc.

Adoucissement induit par la réduction

En plus des artefacts de moiré, une image réduite peut aussi devenir significativement moins nette. Les algorithmes d'interpolation qui préservent le mieux la netteté sont plus sensibles au moiré, tandis que ceux qui l'évitent produisent généralement un résultat plus mou. C'est malheureusement un compromis inévitable dans le redimensionnement.

L'un des meilleurs moyens de contrer cela est d'appliquer un masque flou de suivi après le redimensionnement — même si l'original avait déjà été accentué. Survolez l'image ci-dessus pour voir comment cela peut récupérer la netteté perdue.

Comparaison des performances d'interpolation

Par exemple : quand une image est réduite à 50 % de sa taille originale, il est impossible d'afficher du détail qui avait une résolution d'un seul pixel. Si du détail est affiché, ce n'est pas réel et doit être un artefact de l'interpolateur.

Avec ce concept, un test a été conçu pour évaluer à la fois la résolution maximale et le degré de moiré que chaque interpolateur produit lors de la réduction. Il amplifie ces artefacts pour un scénario typique : redimensionner une image d'appareil photo à une résolution web/email gérable de 25 % de sa taille originale.

L'image de test (ci-dessous) a été conçue pour que la résolution des rayures augmente progressivement en s'éloignant du centre. Quand l'image est réduite, toutes les rayures au-delà d'une certaine distance du centre ne devraient plus être résolvables. Les interpolateurs qui montrent du détail jusqu'à la limite théorique (cadre pointillé rouge ci-dessous) préservent le maximum de détail, tandis que ceux qui montrent du détail hors de cette limite ajoutent des motifs qui n'existent pas (moiré).

*Image de test modifiée pour l'affichage ;
l'image réelle est 800x800 pixels et les rayures s'étendent à la résolution max à cette taille.
**Bicubique = réglage par défaut dans Adobe Photoshop CS & CS2
Graphique de test conçu dans un article BBC et implémenté sur www.worldserver.com/turk/opensource/ ;
tous diagrammes et code personnalisé ci-dessus faits dans Matlab pour cet usage.

Les algorithmes sinc et lanczos donnent les meilleurs résultats ; ils résolvent le détail jusqu'à la limite théorique maximale (cadre rouge), tout en maintenant le minimum d'artefacts au-delà. Le bicubique Photoshop arrive deuxième, avec des motifs de moiré visibles bien hors du cadre. Notez aussi comme le bicubique ne montre pas autant de détail et contraste juste à l'intérieur du cadre rouge. 6 et 7 sont des variantes de la réduction bicubique, discutées ci-dessous. Genuine Fractals 4.0 inclus pour comparaison, mais il fait pauvre à la réduction (pas son usage prévu). Cela souligne une division clé : certains algorithmes sont bien meilleurs pour agrandir que réduire, et vice versa.

Pré-flou pour minimiser les artefacts de moiré

Une approche qui peut améliorer les résultats sur les images problématiques est d'appliquer un peu de flou à l'image *avant* de la réduire. Cela permet d'éliminer tout détail plus petit que ce qu'on sait impossible à capturer à plus basse résolution. Si vous n'avez pas de problème de moiré, pas besoin de pré-flou.

Comme l'image ci-dessus était réduite à 1/4 de sa taille originale, tout motif répétitif < 4 pixels ne peut être résolu. Un rayon jusqu'à 2 pixels (diamètre total 4 pixels) aurait pu être utilisé dans #6, mais 1 pixel a suffi pour éliminer virtuellement les artefacts hors du cadre. Un pré-flou trop fort peut mener à un adoucissement de l'image finale.

L'image Photoshop pré-floutée ci-dessus (#6) élimine la plupart du moiré (trouvé dans #3), mais une accentuation supplémentaire (faite dans #7) est requise pour récupérer la netteté du détail juste à l'intérieur du cadre rouge. Après pré-flou et accentuation, le bicubique Photoshop performe près des algorithmes plus sophistiqués sinc et lanczos.

BICUBIC SHARPER vs BICUBIC SMOOTHER DE PHOTOSHOP

Adobe Photoshop versions CS (8.0) et supérieures ont en fait trois options pour l'interpolation bicubique : bicubique plus lisse (smoother), bicubique (intermédiaire par défaut), et bicubique plus net (sharper). Toutes donnent des résultats similaires à #3 dans la comparaison, mais avec des degrés de netteté variables. Donc si votre image a du moiré, le réglage plus net l'amplifiera et le plus lisse le réduira (relatif au défaut).

Beaucoup recommandent le réglage plus lisse pour l'agrandissement et le plus net pour la réduction. Cela marche bien, mais ma préférence va au bicubique standard pour la réduction — laissant plus de flexibilité pour accentuer après selon les besoins de l'image. Beaucoup trouvent l'accentuation intégrée du réglage plus net un peu trop forte et grossière pour la plupart des images, mais c'est une question de préférence.

Recommandations

Toute cette analyse vise à expliquer ce qui se passe quand ça tourne mal. Si le redimensionnement est sans artefact, vous n'avez peut-être rien à changer ; les flux photographiques sont déjà assez complexes. Beaucoup de photos n'ont pas de détail sensible au moiré — quel que soit l'interpolateur. Mais quand ça tourne mal, cela aide à comprendre pourquoi — et quelles actions entreprendre pour corriger.

La solution idéale est d'utiliser un algorithme sinc ou lanczos pour éviter les artefacts de moiré dans l'image réduite, puis suivre avec un masque flou à très petit rayon (0,2-0,3) pour corriger tout adoucissement induit par l'interpolation. D'un autre côté, l'algorithme sinc n'est pas largement supporté et les logiciels l'utilisant sont souvent moins conviviaux.

Une approche alternative : utiliser le bicubique, pré-flouter les images problématiques puis accentuer après réduction. Cela prépare l'image pour l'interpolateur de façon à minimiser les artefacts d'aliasing. Le principal inconvénient est que le rayon de flou requis dépend de combien vous voulez réduire — donc cette technique s'applique au cas par cas.

Enfin, vous pouvez garantir l'absence d'anti-aliasing induit dans les graphiques informatiques en utilisant l'algorithme du plus proche voisin. Soyez juste particulièrement prudent quand l'image contient des textures fines, car cet algorithme est le plus sujet aux artefacts de moiré.

Pour aller plus loin :
Interpolation d'image numérique, Partie 1