Redimensionner ses photos pour le web [modifs 30/07/09]

[:: Ben ::]

Tout le monde connaît la méthode classique pour cette question primordiale : je réduis ma photo à 800 px de large (on va choisir cette valeur typique pour tout le tuto), en une ou plusieurs fois, et je fais une petite accentuation de netteté à la fin (USM ou UnSharp Mask).

Je rappelle d'ailleurs un fil actuel passionnant sur le sujet   : http://www.beneluxnaturephoto.net/forumf/index.php/topic,85428.0.html...
Et au passage, j'en profite pour remercier Cédric Jacquet (Mr le modo...   ) pour le fabuleux lien qu'il a proposé dans ce fil, et qui vaut de l'or : http://www.ronbigelow.com/articles/sharpen1/sharpen1.htm
Je rappelle enfin l'indispensable intervention de smeys en page 2 du même fil (belle pédagogie  ).

  Ce que je vous propose ici, c'est une partie moins bien connue, mais certainement aussi importante que la qualité originelle des photos ou que la méthode d'accentuation de la netteté : c'est l'algorithme de redimensionnement.

Je précise que je n'ai pas PhotoShop : j'utilise GIMP, FastStone Photo Resizer (gratos)  , et PSP X. Chacun aura soin de retrouver ses petits avec ses propres outils.

Je précise aussi que nous sommes plutôt partis pour pinailler...  

[:: Ben ::]

Bon, désolé, ça ne va pas forcément être passionnant...   Mais je suis bien obligé, hein ?  

Le but du jeu du redimensionnement pour le web, c'est d'avoir une image finale qui donne une impression de finesse dans les détails, alors que le nombre de pixels a été sévèrement réduit.

Imaginons que l'image de départ fasse 1000 px * 1000 px et qu'elle représente des cercles concentriques noirs et blancs, qui sont épais au centre, et qui se resserrent progressivement en s'éloignant du centre, jusqu'à ne faire plus qu' 1 px de large sur les bords de l'image. Je ne la poste pas, car elle fait plus de 2 Mpx, et en plus, c'est horrible à regarder...  

L'alternance des cercles noirs et blancs forment une fréquence (bienvenue dans la physique ondulatoire   Non ! Ne partez pas !  ). Les alternances très resserrées sont les hautes fréquences : elles jouent le rôle des détails très fins d'une image. Les gros cercles sont les basses fréquences : elles jouent le rôle des ensembles peu détaillés d'une image.

Si je prends mon image 1000 px * 1000 px et que je la réduis à 300 px * 300 px : que devrait-il se passer pour les parties de l'image où les cercles sont réduits à moins de 1 px ? Ces cercles ne sont pas affichables et on devrait idéalement voir des pixels qui font la moyenne entre le blanc et le noir : le gris !

On va voir ce que font quelques algorithmes avec l'image de départ de 1000 px * 1000 px.

Image 1 : Algorithme "cubique" de GIMP. Résultat identique pour "Sinc(Lanczos3)" de GIMP toujours.
Image 2 : Algorithme 'Lanczos3" de FastStone Photo Resizer ("FSR" pour la suite...).

Devinez lequel je préfère ?  

 

[:: Ben ::]

Quelques commentaires sur les résultats ci-dessus...

Le Lanczos de FSR est proche de l'idéal. Je n'ai pas trouvé sur le web de meilleur résultat. L'algorithme fonctionne comme un filtre passe-bas : seules les basses fréquences sont restituées et les hautes fréquences (celles qui ne sont pas restituables) sont coupées, ce qui donne du gris.

Et pour GIMP ? On voit d'abord qu'il n'y a pas beaucoup de gris : du détail a été créé (ceux qui veulent creuser le théorème de Nyquist-Shannon : http://fr.wikipedia.org/wiki/Th%C3%A9or%C3%A8me_d%27%C3%A9chantillonnage_de_Nyquist-Shannon). C'est ce qu'on appelle crénelage (ou aliasing en anglais). Ce qui se passe, c'est que trop de pixels se bousculent sur un nombre inférieur d'emplacements : au lieu de faire une bouillie uniforme et moyennée, ils choisissent d'être blanc, ou noir  .

C'est un résultat assez mauvais : dans les images de la vraie vie, c'est ce qui donne des effets d'escaliers sur les obliques, et des effets de moiré sur les structures à haute fréquence (briques, grilles, tissus...) Nous regarderons précisément cet effet un peu plus loin dans le tuto.
Toutefois, pour certaines images, ça peut donner une forte impression de netteté, qui peut être acceptable lorsque les inconvénients sont quasi invisibles.

Le résultat de GIMP me laisse penser que le Lanczos proposé n'est pas vraiment anti-aliasé comme il faudrait...  

C'est étonnant, mais si je prends PaintShopPro X, j'obtiens d'autres résultats :

Image 1 : Algorithme "bicubique" : il reste beaucoup de cercles "fantômes", mais c'est plus propre que GIMP.
Image 2 : Algorithme "optimal" (même résultat que "moyenne pondérée"), PSPX ne propose pas "Lanczos", mais c'est quand même assez propre !

[:: Ben ::]

Je vous propose de redimensionner cette image de bateau. Je précise que j'ai eu l'autorisation d'utiliser des photos hors charte pour le tuto  . Merci Mr le modo !  

Pour les comparaisons, j'utiliserai des "crops" afin de focaliser votre attention sur les zones intéressantes et afin d'avoir des images de moins de 150 ko très faiblement compressées (qualité jpeg de 98 % sous GIMP systématiquement dans les comparaisons).

Là, c'est la photo cible (pour montrer la source   issue de mon 30D : 3504 px * 2336 px) :

[:: Ben ::]

Comme c'est un tuto, je vous montre comment on choisit le bon algorithme :

Photo 1 : sous GIMP : Image / Echelle et taille de l'image.
Photo 2 : sous FSR : Onglet "Resize" (zieutez comme c'est bien foutu, FSR !  Désolé pour ceux qui sont sur Mac...  )

[:: Ben ::]

Faisons le grand saut directement !

Photo 1 : GIMP cubique : du moiré apparaît sur le pont du bateau, derrière la barre. Du crénelage est visible le long des lattes du pont.
Photo 2 : GIMP sinc(lanczos3) : idem pour le moiré (en moins fort et seulement à gauche de la barre), et en plus c'est flou !

[:: Ben ::]

Photo 3 : FSR Lanczos (pour la petite histoire, prononcez "Lanzosh"  ) : franchement, c'est pas beau, ça ?

[:: Ben ::]

Beaucoup constatent qu'en redimensionnant en plusieurs passes, on conserve plus de détails. Le nombre de fois dépend de la taille d'origine de l'image.

Pour moi, le meilleur résultat s'obtient en procédant par réductions de 50%. Si je pars de 3504 px, et que je veux tomber pile sur 800 px, je passe par 1600 px (qui a dit 1752 px ?    )

Image 1 : GIMP cubique 1600 px - 800 px : le résultat est très net ! mais bonjour le moiré et le crénelage !  
Image 2 : GIMP sinc(lanczos3) 1600 px - 800 px : résultat identique (un 1/4 de poil plus propre, en bon pinailleur  )
Image 3 : pas besoin : FSR donne un résultat rigoureusement identique en une seule passe ou en deux passes (une étape de moins, une !  ). C'est certes moins net, mais plus naturel et c'est surtout une meilleure base pour une petite accentuation ultérieure... si besoin...

[:: Ben ::]

Petit complément : j'ai fait des essais en cassant la logique 50 % : 1200 px puis 800 px.

J'observe que GIMP cubic et lanczos n'ont plus tout à fait le même résultat, mais dans tous les cas, la qualité est moins bonne : un peu moins de crénelage, mais assez irrégulier et c'est assez disgracieux.

En tout cas, quand il n'y a pas de ligne droite ou de bord droit dans la photo, la méthode GIMP sinc(lanczos3) 1600 px puis 800 px donne directement un résultat hyper "crisp", qu'il ne faudra surtout pas accentuer. 

[:: Ben ::]

Personnellement, je préfère passer par FSR. En plus il sait traiter par lots  .

Pour avoir un résultat un peu plus net, je règle le "Sharpen / Blur" à 6 (4 à 8 selon la qualité de l'image d'origine) dans l'onglet "Adjustments" : FSR fait la netteté avant la réduction, et le résultat est donc subtil au final (qualité jpeg à 91 % pour que ça rentre) :

[:: Ben ::]

Le bateau a été pris avec mon 17-85 mm IS, qui est un foudre de guerre optique, comme chacun sait 

Mais je l'aime bien... 

Regardons ce qui se passe avec une réduction directe à 800 px par FSR Lanczos, sans toucher à aucune accentuation (donc au final, en 1 opération  ), à partir d'une photo prise avec mon 100 mm macro f:2,8  ...

Franchement, besoin de faire plus ? Mais on peut, et proprement, si on veut, hein ?

[lebon-zimages]

Wowhhhh  je suis toujours épaté par tes analyses 
Pour le moment me concernant traitement sous CS et red sous Gimp 
Il aurait été bien qu'un pro toshop passe par là pour qu'il nous montre sa technique sous toshop 

[:: Ben ::]

Merci Fabrice !

Il aurait été bien qu'un pro toshop passe par là pour qu'il nous montre sa technique sous toshop 

Tous les compléments enrichissants sont les bienvenus ! 

[lebon-zimages]

Il serait bien aussi de donner le nombre d'étape par rapport au nombre de pixelle 
Je m'explique:
8million de pixelle donc 3600 par ....
On fais donc 3600 ensuite 1600 et 800

Reste a le faire pour 10, 12, 15... 21 et 50 

[P-F]

Je précise aussi que nous sommes plutôt partis pour pinailler...  

Effectivement...

J'ai testé faststone pour voir et s'il est vrai qu'il est facile d'emploi et que le résultat est bien ce n'est ni meilleur ni pire qu'un redimensionnement direct Photoshop bicubique suivi d'une très légère "Netteté optimisée".

[Cedric Jacquet]

J'ai testé faststone pour voir et s'il est vrai qu'il est facile d'emploi et que le résultat est bien ce n'est ni meilleur ni pire qu'un redimensionnement direct Photoshop bicubique suivi d'une très légère "Netteté optimisée".

Tout dépend de l'image de départ. Si j'ai accepté l'entorse à la règle concernant le choix de la photo, c'est bien parce que certaines photos vont être plus difficiles à traiter que d'autres, ce que Ben nous montre avec beaucoup de brio : si l'on regarde les 4 premières images, difficile de s'imaginer qu'elles proviennent de la même image d'origine ...

Le pont du bateau est un excellent exemple du fait des lignes sombres entre les lattes claires du bois. Le résultat obtenu dans la photo 8 est bien supérieur à la 6 et 7.

Merci Ben pour ces explications intéressantes et complètes !

Cedric

[Lol 06]

Bravo beau boulot  Très enrichissant !

Mais je serais curieux de voir comment certains s'y prennent, notamment l'auteur de "cristal de givre"  pour redimensionner ces photos (il se reconnaitra s'il passe par là... ) j'ai toujours été étonné par la qualité (netteté je parle , .... le reste aussi mais c'est pas le sujet...) de ces photos de son site prise avec 400D+18/55 du kit !!

[:: Ben ::]

Merci Cédric et Lol 06 !

J'ai voulu m'intéresser à une photo conforme à la charte, pour voir si Lanczos était toujours aussi intéressant...

On a bien vu ce que faisait GIMP. Comparons maintenant FSR Lanczos avec deux algorithmes de PSP X : bicubique et moyenne pondérée (particulièrement adapté à la réduction des images photo-réalistes, selon l'aide de PSP X... et c'est vrai  ).

Comme nous sommes des pinailleurs, on va comparer (plus loin) à un grossissement de 200 % !  

Je précise que je ne vais faire aucune accentuation de netteté dans les photos présentées.

Voici l'image complète de travail, sous deux versions 100 %.
Image 1 : FSR Lanczos 800 px : impeccable, mais suspense pour le 200 %  
Image 2 : PSP X bicubique 1600 px puis 800 px : le crénelage est déjà très visible sur les antennes et la trompe.
 

[:: Ben ::]

Images 1 et 2 dans le même ordre qu'à 100 %.

Pas la peine d'en rajouter sur la catastrophe bicubique...  

Par contre, surprise  , on s'aperçoit que l'anti-crénelage de FSR Lanczos produit une petite bande claire au niveau des antennes (ce n'est pas une frange de type USM), et uniquement sur un arrière-plan clair : c'est bien l'anti-crénelage (à mon sens) qui n'est pas optimisé. En plus, on voit des bandes sur l'arrière-plan au niveau de certaines transitions de tons verts et des pattes du papillon... Correction du 29/07/09 : c'est l'affichage par PSPX qui est en cause ! La même image ouverte sous GIMP ne présente pas ces bandes...

NB : comme on est à 200 %, il ne faut pas faire attention aux artefacts JPEG, qui sont reconnaissables.

[:: Ben ::]

Et voici les résultats 100 % et 200 % de PSP X "moyenne pondérée". Je précise que contrairement aux autres algorithmes présentés, mieux vaut éviter d'utiliser celui-ci pour un agrandissement ! Par contre, pour une réduction, c'est plutôt bon (et même excellent) !  

Il faut notamment remarquer la qualité des arrières-plans (surtout du bruit de luminance), et de l'anti-crénelage au niveau des antennes (transition noir - vert). Tout concourt à encaisser sans broncher une petite accentuation de la netteté avec un bruit de luminance acceptable et des effets de bord extrêmement discrets.  

modif du 30/07/09 : en consultant ce site que je recommande vivement : http://www.cambridgeincolour.com/tutorials/image-interpolation.htm, il me vient à l'esprit que la "bilinear interpolation" ressemble fortement à la "moyenne pondérée". J'ai testé avec FSR Bilinear : exactement le même résultat (pour les cercles et le papillon) !  .

Du coup, ça m'évite d'avoir à utiliser PSP X, qui me dégrade (banding...) mes jpeg issus de Lanczos  , et je peux traiter par lot avec FSR  

Etonnant : FSR bicubic me donne le même résultat ! Comme quoi, P-F peut avoir raison pour son essai, car j'ai un bicubique pourri avec GIMP et PSPX et très fin avec FSR : c'est peut-être aussi le cas avec Photoshop (je ne l'ai pas et ne peux pas le tester  )

[:: Ben ::]

Je crois que j'ai trouvé mon champion : PSP X "moyenne pondérée" Modif du 30/07/09 : FSR bilinear (ou bicubic). Sacré potentiel de post-accentuation !  

Déjà sur le test des cercles, le résultat était très bon (théoriquement moins que Lanczos).
Par contre, sur le test du bateau, ça fonctionne nettement moins bien que Lanczos, seul à présenter un résultat propre. A éviter pour ce type d'image à structure répétitive. Modif : vérifié avec FSR bilinear (ou bicubic).

La bonne nouvelle, c'est qu'une réduction directe à 800 px donne exactement le même résultat qu'en passant par 1600 px. J'ai vérifié sur le papillon à 200 % et sur les cercles concentriques (600 px puis 300 px). Modif : vérifié avec FSR bilinear (ou bicubic).

  Pour pinailler au mieux une photo pour Beneluxnaturephoto : PSP X "moyenne pondérée" Modif : En général : FSR bilinear (ou bicubic).
  Pour la production : FSR Lanczos en traitement par lots, parce qu'à taille réelle de l'image, il faut vraiment relativiser la différence, surtout si on compte rester très léger sur la post-accentuation et si on ne compte pas retoucher les niveaux (bruit de luminance...) Modif : Risque de moiré ou de crénelage gênant : FSR lanczos.

[:: Ben ::]

Je viens de tester un petit freeware qui s'appelle "PictureResize", et qui utilise la moyenne pondérée : le résultat est moins bon qu'avec PSP X (+ flou et les couleurs bavent plus).

Comme quoi, d'un logiciel à l'autre, les performances sont inégales pour le même type d'algorithme. Si ça se trouve, bicubique sur Photoshop fonctionne mieux que sur PSP X !  (Mieux que GIMP, je n'ai pas trop de doute...  )

Je conseille vraiment à chacun de faire des essais avec ses propres outils.  

Ajout du 30/07/09 : les dernières modifs confirment ce conseil. Sous un même nom d'algorithme, deux logiciels peuvent intégrer des pondérations différentes aux pixels voisins du pixel interpolé, d'où des résultats très différents...

Désolé pour le côté brouillon... j'ai volontairement fait apparaître les modifs et les ratures pour montrer ma progression.

[Cedric Jacquet]

Désolé pour le côté brouillon... j'ai volontairement fait apparaître les modifs et les ratures pour montrer ma progression. [/i]

Il n'y a que les imbéciles qui ne changeant pas d'avis - merci de partager tes découvertes avec nous, Benoît !

[Lol 06]

Toujours intéressant. Marrant de voir ces différences d'algorithme entre software ! 

[taz-photos]

Toujours intéressant. Marrant de voir ces différences d'algorithme entre software ! 

En effet intéressant.

Merci pour le partage Ben.

A tien aussi bonjour au super modo 

Christophe