ESTHÉTIQUE
SIMPLICITÉ
EFFICACITÉ

Aneartiste sur deviantartAneartiste sur twitter Aneartiste sur scoop-it

Réflexions autour de la compression d'images

Prolégomènes à l'élaboration d'une stratégie low-tech

Les images représentent une part non négligeable du poids global d'une page web, statistiquement 21%, juste après la vidéo, 60%. La compression apparait donc comme un passage obligé avant la mise en ligne sur site sous peine de saturer rapidement la connexion de vos visiteurs. Le format le plus utilisé et le plus efficace (hormis apparemment le WebP, mais les convertisseurs en ligne que j'ai trouvé m'ont donné des images plus volumineuses que celles obtenues par mes propres moyens... ) reste le Jpeg. C'est un format Lossy, c'est à dire que la compression entraine la disparition de certaines informations (particulièrement dans les zones unies et les dégradés). Il s'accomode donc mieux des images comportant de nombreux détails ou du bruit et doit être réservé à l'étape finale, étant donné qu'une compression importante offrira des tolérances plus limitées en retouche photo. On considère généralement que le meilleur compromis se trouve entre 10 et 30 %... Il faut aussi citer le format Gif, adapté pour les images de petites tailles ou comportant un nombre de couleurs limité (couleurs indéxées).

Image compression 95%,Compression JpegCompression Jpeg

« Seules les erreurs de copie, autrement dit les mutations, permettent de lutter contre l'uniformité, elles sont rares. »
—Albert Jacquard

Dans les faits, tout dépend de ce que l'on est décidé à perdre. Compresser une image, c'est toujours la transformer, même si une compression réduite peut demeurer inperceptible. Compte tenu des exigences que l'on se fixe en matière d'encombrement minimal, on en vient vite à devoir se confronter à des choix graphiques et esthétiques inévitables. En effet, si les gains en termes de poids sont considérables sur les images de grandes tailles, – on passe par exemple pour une image de 1500x1125px pesant 2.1Mb non compressée, à 444Kb après une compression à 80%, 216Kb après une conversion Gif 3 couleurs, ou encore 130Kb en Gif monochrome 2 couleurs – il m'a semblé atteindre une limite infranchissable à partir d'une taille voisine de 500x500 pixels. L'image ci-dessus par exemple, compressée avec un taux de 95% comporte un degré de flou perceptible, néanmoins elle ne pèse que 30Kb. Je me suis aperçu en faisant d'autres essais, que la même compression appliquée après l'ajout d'une palette web optimisée aboutissait curieusement à une image comportant un flou moins perceptible. En gros, on gagne en netteté, ce que l'on perd en nuances (voir ci dessous).

Image compression 95% avec palette optimisée,Compression jpegCompression jpeg

« Une simple image, si elle est nouvelle, ouvre un monde. Vue des mille fenêtres de l'imaginaire, le monde est changeant. »
—Gaston Bachelard

Je pense à ce propos qu'il faudrait que nous nous interrogions sur notre intolérance au flou. Sans doute le dogme de la Haute Définition illustrée avec brio par les prouesses techniques toujours renouvelées de nos appareils y est-elle pour quelque chose. Il n'en a pourtant pas toujours été ainsi. Aux débuts de la photographie, et alors qu'advenait la standardisation des images, certains photographes et non des moindres (Demachy, Steichen, Langdon et d'autres) s'étaient efforcés d'élaborer une esthétique photographique propre avec la volonté de privilégier l'impression au détriment de la précision. Flou volontaire, clair-obscur et techniques de tirages sophistiquées furent la signature des Pictorialistes. Je reviendrais certainement sur la question mais pour demeurer au cœur du sujet qui nous préoccupe, je vais aborder la seconde façon de diminuer le poids d'une image qui consiste à en réduire le nombre de couleurs. J'utiliserais dans ce cas le format Gif plus adapté à ce cas de figure. L'image suivante a été convertie à l'aide d'un effet de seuil et colorisée avec un calque de fusion en mode multiply. Le résultat en terme d'économie n'est, à ces dimensions, pas meilleur qu'avec la compression Jpeg, puisque j'obtiens également un poids total de 30 Kb.

gif Image avec effet de seuil,Bicolorisation CC-By-Nc-NdBicolorisation CC-By-Nc-Nd

« Chercher la concentration, la compression, comme font les poètes. »
—Norman Rush

Pour terminer, j'ai fait un essai, toujours au format Gif, avec l'application d'un filtre dithering. On obtient un effet néo-pointilliste qui n'est pas désagréable, et le résultat obtenu a l'avantage de pourvoir être étiré sur toute la largeur de l'écran sans vraiment perdre de son attrait. Le site Low-Tech Magazine utilise cette astuce sur certaines de ses pages. (À ceux qui cliquent sur le lien et n'obtiennent aucun visuel, je précise que le site en question est alimenté par un panneau solaire et n'est donc pas visitable 24h/24.) Ici, l'image obtenue est un peu plus lourde puisque le fichier dépasse les 35Kb, mais la performance reste honorable. D'une manière générale, je ne suis que rarement parvenu à descendre en-dessous des 30Kb, tout en conservant approximativement ces dimensions. La seule solution pour faire plus léger, serait maintenant de réduire la taille des images ou d'utiliser la vertorisation (.svg)...

gif Image avec effet pointilliste deux couleurs,Dithering CC-By-Nc-NdDithering CC-By-Nc-Nd

Pour gérer la compression d'images, l'outil enregistrer pour le web de Photoshop est certainement le plus utilisé, cependant je conseille à ceux qui ne dispose pas de ce logiciel – par choix ou par manque de moyen – le site Optimizilla qui fonctionne un peu de manière équivalente. On peut aussi utiliser le plugin GIMP save-for-web que l'on peut télécharger sur pkgs.org ou sur Github. Sous Linux, pour installer manuellement Registry il vous faudra décompresser l'archive puis la déplacer dans le répertoire tmp. Ensuite depuis la console, à la racine du répertoire, entrez la commande sudo apt-get install gimp-plugin-registry. Après redémarrage de GIMP, vous obtiendrez une ligne supplémentaire dans le menu fichier/enregistrer qui vous permettra d'accéder à l'outil en question. Si vous êtes un peu perdu, Il existe même un mode d'emploi très complet sur templateToaster.

publié le 06/12/2019, à 17h20 par Frédéric Schäfer



Précédentsuivant