cover for Optimiser les images (à la main) de manière un peu trop hardcore

Optimiser les images (à la main) de manière un peu trop hardcore

Bonjour ! Long time no see comme on dit, hein ?

J'ai encore un accès à internet, mais je bosse sur des projets top secrets (pas du tout) en ce moment, d'où l'absence d'articles (les pannes d'inspiration, le manque de motivation et de temps libre sont les vraies raisons mais d'habitude on en parle pas).

Aujourd'hui, comment bien optimiser ses images pour pouvoir partager des trucs même si le débit montant de son serveur est à chier.

Si comme moi vous autohébergez votre site, déjà partagez moi l'info (par mail cf la page de contact ou alors par commentaire là où vous avez trouvé ce post), et ensuite vous vous êtes surement retrouvé dans la même situation que moi ; vous voulez partager des photos, mais votre téléphone prends des photos de plusieurs Mo (voire dizaines de Mo), et votre connexion montante à la maison est déplorable (pour rester poli).

Alors vous allez dire "oui alors on découpe les images, on les redimensionne, on exporte en jpg avec une qualité un peu dégueu et ça fait le taf, hein ?". Et je vous comprends, c'est comme ça que je faisais avant. Sauf que mon site n'était toujours pas assez léger pour arriver à entrer dans le 512kb.club.

Et moi je voulais y entrer (j'ai réussi, mais mon site a été down un peu du coup ils m'ont enlevé, et j'ai pas réessayé depuis).

Du coup je vais maintenant partager avec vous ma technique secrète pour avoir des images de taille respectable (bon sur un écran 4k c'est un peu petit quand même) tout en gardant un poids aussi proche des 50ko que possible !

La technique

Une fois l'image redimensionnée (mes bannières font 800x305px), j'applique un léger flou gaussien (de 0,5px ?) sur mon image à l'aide de Gimp, et j'exporte en webp (qualité de l'image lossy à ~70%, qualité alpha 100%, pas de données exif ni xmp, je laisse le "color profile").

Et c'est tout. Et j'ai des images de ~40ko (comme cette bannière, jvous ai déjà dit que toutes les bannières pour l'instant sont des photos que j'ai prises ? Non ? Bon ben voilà).

Je sais pas vraiment pourquoi flouter trèèèès légèrement allège les images autant mais ya des gens qui utilisent des mots compliqués comme gaussian blur optimization pour expliquer ça, alors ça doit être un truc sérieux.

Un ptit benchmark ?

Alors évidemment c'est pas réalisé sur plein de photos, c'est pas réalisé automatiquement, c'est pas fait dans les règles de l'art. Soit. Mais les chiffres changent assez (et j'ai remarqué ça depuis assez longtemps) pour constater une réelle différence de taille.

Voici donc le benchmark fait n'importe comment pour avoir un semblant de crédibilité (même si je sais absolument pas de quoi je parle) :

* png  : 477,8 KiB
* jpg  : 103,9 KiB
* webp :  51,0 KiB
* webp :  40,3 KiB (avec flou gaussien appliqué de 0,5px)

Maintenant on peut optimiser ces images via des services (en ligne, en ligne de commande, avec interface graphique...). Je peux recommander optipng & jpegoptim pour la ligne de commande.

Mais je suis passé par des services en ligne (qui ont souvent des presets plus agressifs sans que la différence de qualité ne soit vraiment visible) ; ezgif.com/optiwebp pour les 2 images webp, tinypng et tinyjpg pour les deux autres, parce qu'ils donnent plus d'infos et que j'ai rien à calculer.

Et voilà les résultats :

* png  : 171,1 KiB (-61%)
* jpg  :  97,5 KiB ( -6%)
* webp :  49,5 KiB ( -3%)
* webp :  38,8 KiB ( -4%) (avec flou gaussien appliqué de 0,5px)

J'ai repris les pourcentages fournis par les outils, jvais pas m'amuser à faire un produit en croix pour vérifier l'exactitude des chiffres c'est mon blog c'est moi qui décide quoi mince.

Les paramètres de gimp ne sont donc pas optimaux, on perd encore un peu en qualité lors de la (re)compression des images, mais en vrai même si la baisse du poids du fichier png est la plus impressionnante, le webp avec un peu de flou reste l'option la plus intéressante.

Conclusion parce qu'il faut bien conclure un jour hein bon alors

J'utilise webp pour les bannières de mon site. Après j'ai un système avec mon hébergeur de fichiers où je peux prendre un screenshot, puis juste le coller en faisant ctrl+v (comme sur imgur un peu), mais par contre ça enregistre en png (vu que le screenshot dans le presse-papier est un png). Ça m'embête un peu, parce que du coup mon workflow c'est :

On voit bien ici que l'hébergement des screenshots est bien automatisé : je n'ai pas besoin de sauvegarder l'image sur mon ordinateur pour ensuite pouvoir l'héberger sur internet, on passe directement du presse-papier à internet et ça c'est cool ! En revanche bah ça enregistre du png ce qui est lourd. Du coup la liste des articles du blog de mon site est très légère, mais les images dans les articles sont plus lourdes.

Un autre truc que j'utilise pour alléger le poids de mon site c'est de lazy load les banières des articles. Mais je n'ai pas ajouté ça aux images dans les articles. Du coup si on prend un article un peu long avec quelques images, bah toutes les images (lourdes) sont chargées d'un coup, ce qui monopolise le débit ascendant de la box juste pour un visiteur.

Jvais ptêtre mettre à jour up (mon hébergeur hypersimple de fichiers) pour qu'il convertisse automatiquement les images en webp (je sais même pas si c'est faisable avec php tiens).

Et hop, un projet en plus !

Bonne journée, à bientôt pour un prochain article avec plein de texte et peu de contenu !