07/05/2013

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

Optimisation image référencement site internet
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 componen
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.

image optimisée par yslow à 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.


outils d'optimisation de page web yslow

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

Si vous avez une distrib linux, 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

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. Maintenant que vous avez moins de choses à faire, vous pouvez me faire un backlink à la main.


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