Optimiser les images jpg et png pour le référencement et automatisez le

Compresser Images Jpeg, png pour la webperf

Optimiser les images jpg et png pour le référencement

Google prend de plus en plus en compte la rapidité de chargement des sites, et le gros talon d'Achille de votre site, c'est les images. Voici les différents formats utiles et comment les optimiser, et à la fin de l'article un script sh pour automatiser l'optimisation.

L'optimisation des images pour le référencement.

Après avoir refondu un site magento tout pleins d'images, de javascript de css, en faisant un petit test avec gtmetrix, je me suis aperçu que le site ramait bien au chargement 5 à 10secondes.

Comme sur la plupart des sites et en particulier des sites e-commerces, le plus important est de faire rêver le consommateur, il faut mettre des jolies photos, des sliders qui vont charger d'autres images miniatures. Bref, le produit est le roi.

Mais problème, les photos sont souvent lourdes, pas optimisées, et on hésite souvent entre utiliser un jpg ou un png.

Ok, les 2 sont optimisable.

L'optimisation des jpg. 

Le principe des images jpg, c'est que c'est un format compressible et dont la dégradation peut être maîtrisée, l'image sera un peu plus floue, mais visible. L'autre astuce en plus de la compression, c'est que c'est un format qui peut être chargé progressivement. Les jpg sont adaptés lorsqu'il y a beaucoup de couleurs sur l'image (+ de 256).

L'optimisation des png

Le format png est en général plus lourd que le jpg, mais il a hérité d'une caractéristique de son ancêtre le gif, c'est qu'il permet les fonds transparents. Il hérite également de la caractéristique du jpg de supporter beaucoup de couleurs. Cela permet de faire des dégradés qui s'insèrent bien quelque soit la couleur de fond.




Un test avec pagespeed et yslow que vous pouvez installer sur firebug, vous indiqueront que vos images sont trop lourdes, et  proposent des versions alternatives de vos images optimisées.

Avec yslow, vous avez un panneau components qui vous permettra de voir toutes les images chargées, ainsi que leur poids.

Optimiser ses images yslow component

Allez sur la section images

 

 

Sur la droite en bout de colonne, vous trouverez le bouton smush-it

Cliquez dessus et vous aurez une lightbox qui vous indique combien vous pouvez alléger votre image et un lien direct vers l'image optimisée à télécharger.

C'est une bonne idée de les télécharger et de remplacer les originaux. Les versions de ces fichiers images sont optimisées et vous ne verrez pratiquement pas de différence avec l'original, mais en fait il y a des données invisibles qui sont supprimé (données exif), nombre de couleurs, légère compression. Le résultat est réputé looseless.

Comme il faudra le faire sur chaque page de votre site (et qu'il faut vous avouer que vous êtes un peu fainéants), il va falloir se poser la question de comment je peux l'automatiser

Version rapide, toujours à partir de firebug yslow :

Il y a aussi un panneau outil qui vous permet d'envoyer directement toutes vos photos et les récupérer optimisées. Vous remarquerez qu'il y a des outils pour optimiser le reste.

Automatisons l'optimisation des images 

Et là on passe de l'autre côté du miroir. Quels sont les outils qui sont utilisés par yahoo  pour  optimiser les images quels sont les réglages ?

Yahoo utilise jpegtran que l'on trouve dans Libjpeg pour optimiser les fichiers jpg et pngcrush pour optimiser les fichiers png.

 http://developer.yahoo.com/performance/rules.html#opt_images

Installer les librairies libjpeg et pngcrush sur mac

On va utiliser homebrew qui permet d'installer sur macosx les commandes qui ne sont pas implémentées sur mac

Commande pour installer homebrew sur macosx

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

Commande pour installer libjpeg optipng et guetzling

On va installer les librairies pour le traitement d'images

brew install libjpeg optipng gueztli

Création du fichier d'optimisation d'image

ATTENTION ! Ce script va modifier l'image que vous mettrez dans le répertoire, ne mettez surtout pas les images originales si vous n'avez pas de sauvegarde.

Si vous avez une distrib linux, ou Macosx, créez un fichier optimizeimage.sh



et collez ça dedans :

#!/bin/sh

# script for optimizing images in a directory (recursive)
# pngcrush & jpegtran settings from:
# http://developer.yahoo.com/performance/rules.html#opt_images

# pngcrush
for png in `find $1 -iname "*.png"`; do
    echo "crushing $png ..."
    pngcrush -rem alla -reduce -brute "$png" temp.png

    # preserve original on error
    if [ $? = 0 ]; then
        mv -f temp.png $png
    else
        rm temp.png
    fi
done

# jpegtran
for jpg in `find $1 -iname "*.jpg"`; do
    echo "crushing $jpg ..."
    jpegtran -copy none -optimize -perfect "$jpg" > temp.jpg

    # preserve original on error
    if [ $? = 0 ]; then
        mv -f temp.jpg $jpg
    else
        rm temp.jpg
    fi
done

Source

Comment lancer le script d'optimisation d'image ? 

Faite un chmod pour le rendre exécutable, et vous n'aurez plus qu'a faire

./optimizeimage.sh nomrepertoire

Le script est récursif, ce qui veut dire que vous le faîte pour le répertoire parent et il s'occupe des gosses.

Vous aurez pleins de messages, et vos images seront optimisées.

Les images que vous aurez mis dans le répertoire seront optimisées.

Optimiser vos images jpg et gagnez 35% de compression sans perte de qualité avec Guetzling

Voici le test :

Image de Gary Illes non optimisée 114ko

Image de gary Illes optimisée 84ko

Image non optimisée originale

Image optimisée

Edit : J'ai refais le script en remplaçant libtran par guetzling qui permet un gain de près de 35%. Le réglage minimum est 84, j'ai mis 85 pour être sur que ça passe.

Attention il vaut mieux le faire sur des photos déjà optimisées pas trop lourdes, ça prends 7

#!/bin/sh

# script for optimizing images in a directory (recursive)
# pngcrush & jpegtran settings from:
# http://developer.yahoo.com/performance/rules.html#opt_images

# pngcrush
for png in `find $1 -iname "*.png"`; do
   echo "crushing $png ..."
    pngcrush -rem alla -reduce -brute "$png" temp.png

# preserve original on error
   if [ $? = 0 ]; then
   mv -f temp.png $png
   else
   rm temp.png
   fi
done

# guetzli

for jpg in `find $1 -iname "*.jpg"`; do
   echo "gueztling $jpg ..."
   guetzli --quality 85 --verbose "$jpg" temp.jpg

# preserve original on error
   if [ $? = 0 ]; then
   mv -f temp.jpg $jpg
   else
   rm temp.jpg
   fi
done

One more thing

Maintenant que vous avez moins de choses à faire, si vous aimez cet article, n'hésitez pas à partager l'adresse de cet article.

Je veux une boutique ou te sous-traiter des tâches

On peut encore aller plus loin dans l'optimisation, mais cela fera l'objet d'un autre article.