Francois Aichelbaum : Optimiser les images de son site
mardi 27 novembre 2012 à 12:36Pourquoi 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('http://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('http://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('http://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
The post Optimiser les images de son site appeared first on D'ici et d'ailleurs.
Original post of Francois Aichelbaum.Votez pour ce billet sur Planet Libre.
Articles similaires
- Tigrou Damien : Script pour optimiser les images d'un site (15/10/2008)
- Tigrou Damien : Optimiser son site (sous Ubuntu et ailleurs...) : Compresser avec gzip (18/08/2008)
- Tigrou Damien : Optimiser son site sous Ubuntu : Configurer l'en-tête Expires (11/08/2008)
- Benkemoun : Accélérer son site web avec Squid – 1 (01/09/2010)
- Benkemoun : « Benchmarker » son site avec Tsung (02/10/2010)
