Optimiser les images de son site

Pourquoi optimiser les images de son site ? Tout simplement, parce que cela a son importance pour le référencement mais aussi et surtout pour l'expérience utilisateur. Après tout, un site web est fait pour être consulté donc autant que l'expérience utilisateur soit la meilleure possible.

La bonne taille de l'image

Première erreur fréquemment rencontrée, la taille de l'image inadaptée. Régulièrement, on peut tomber soit sur une image agrandie (et donc pixélisée), soit sur une image réduite.

Dans le premier cas, l'image est moche, l'expérience utilisateur dégradée car l'internaute reste critique dans l'âme et ne reviendra pas si le site n'est pas un minimum agréable. Seule solution : trouver la même image dans le bon format ou a fortiori dans un format bien supérieur (cf ci-dessous).

Dans le second cas, on garde ce format "géant" sur notre PC et on prépare des versions adaptée grâce à notre logiciel d'image favori (The Gimp par exemple). Ainsi, transférer le fichier image au bon format et à la bonne résolution aura plusieurs impacts :

• réduire la quantité de données à envoyer au navigateur de votre visiteur (donc le site s'affiche plus vite)
• moins de travail pour le navigateur de votre visiteur (le site s'affiche plus vite et consomme moins de ressources)
• l'image sera agréable à regarder
• la variété des formats pour une image sur le site augmente indirectement le contenu à référencer sur le site et donc améliore le référencement du site

Dans tous les cas, l'expérience utilisateur s'améliore nettement.

Combiner les images via des CSS Sprites

Parfois, vous aller avoir tout un semble de petits logos/icônes sur une même page et qui reviennent régulièrement sur votre site. Il est alors intéressant de combiner toutes ces images dans un seul fichier, qui sera importé et "découpé" par CSS.

Pour combiner les images, si vous ne travailler par directement sur le format unifié, vous pouvez le faire via ImageMagick.

aptitude -y install imagemagick

Ensuite, pour combiner des images au format JPEG par ex :

convert image1.jpg image2.jpg image3.jpg +append -quality 75 combine.jpg"

Il est possible de le faire pour d'autres formats image. ImageMagick est vraiment une belle boite à outil pour le traitement image.

On peut alors intégré dans le CSS ainsi (extrait du CSS de mon blog) :

#wp-social-login-connect-options a.Tumblr {
 display:block;
 float:left;
 height:32px;
 width:32px;
 margin:0px;
 text-indent:-9999px;
 background-image:url('https://cdn.aichelbaum.com/images/S/sprites.png');
 background-position:-256px 0px;
}

#wp-social-login-connect-options a.Mixi {
 display:block;
 float:left;
 height:32px;
 width:32px;
 margin:0px;
 text-indent:-9999px;
 background-image:url('https://cdn.aichelbaum.com/images/S/sprites.png');
 background-position:-288px 0px;
}

#wp-social-login-connect-options a.Steam {
 display:block;
 float:left;
 height:32px;
 width:32px;
 margin:0px;
 text-indent:-9999px;
 background-image:url('https://cdn.aichelbaum.com/images/S/sprites.png');
 background-position:-320px 0px;
}

On ne transfert donc plus qu'une seule image, plutôt petite, et on repositionne et redimensionne l'affichage de la cellule au style demandé. Encore une fois, on réduit la quantité de données à envoyer au navigateur de votre visiteur. Son expérience s'améliore encore.

Optimiser les images

Aujourd'hui, les images, que cela soit en JPEG ou en PNG, embarque énormément d'infomations. Limite de la pollution dans certains cas. Des outils existent et permettent de nettoyer tout cela automatiquement : optipng et jpegoptim :

aptitude -y install optipng jpegoptim

Pour les utiliser d'un coup et simplement (voire les mettre dans une cron), un petit script :

cat > /usr/local/bin/optimage.sh << EOF
#!/bin/bash
find $1 -name "*.jpg" -exec jpegoptim --strip-all {} \; | grep -v skipped
find $1 -name "*.png" -exec optipng -o 7 {} \; 2> /dev/null
exit 0
EOF

Du coup à l'usage, il suffit d'appeler le script avec en paramètre le dossier parent à traiter récursivement puis le tour est joué.

Les fichiers gagnent encore en taille etc etc.

Le site est toujours plus performant. L'utilisateur apprécit et revient. Le référencement s'amliore