L'optimisation des images sur un site web à un grand intérêt pour 2 choses.
La première la bande passante. Vous allez me répondre on s'en fout avec la 4g, l'ADSL etc ... Je vous répondrais oui et non. Dans tous les cas plus le fichier est petit moins il y aura d'envoi de paquets TCP et donc de possibilités d'erreur. La deuxième est l'espace disque occupé sur vos serveurs.
J'ajouterais aussi un peu de SEO. Qui n'a jamais été « stressé » par Yslow ou https://developers.google.com/speed/pagespeed/insights/ qui nous refile une note.
La majorité des images que l'on trouve sur le web sont en jpg et png. Il est vraiment dommage que le WebP n'est jamais percé. Il s'agit pour moi du meilleur format d'image pour le WEB. Je garde espoir, mais bon, il faut être réaliste, il n'est toujours pas en natif dans tous les navigateurs. En attendant, il faut optimiser les images.
Tout a été réalisé sous Ubuntu 13.10 et en console
Optimiser les images .jpg
Sous Linux, il existe plusieurs utilitaires. Le plus connu est sûrement jpegoptim.
Son site officiel est ici http://freecode.com/projects/jpegoptim
Le site vous propose les sources pour les compiler rien de plus simple.
Vous extrairez les fichiers dans un répertoire, vous allez dans le répertoire et vous entrez les commandes suivantes :
./configure make sudo make install
On peut aussi faire un apt-get sous Ubuntu
sudo apt-get install jpegoptim
L'utilisation est très simple
Vous allez dans le répertoire où sont les images à optimiser et vous entrez la commande
jpegoptim --strip-all --all-progressive *.jpg
--strip-all va virér toutes les données textuelle XCF etc.
--all-progressive va rendre votre image progressive, comme son nom l'indique l'image va s'afficher de manière progressive, cela est intéressant pour les liaisons lentes.
Optimiser les images .png
Pour les png il existe l'utilitaire OptiPNG
On peut le télécharger ici http://optipng.sourceforge.net/ (Linux en code source, windows 32bit)
La commande est vraiment très simplement
optipng *.png
Avant on peut simuler la commande, histoire de voir si ça vaut vraiment le coup
optipng -simulate *.png
Optimiser répertoire et sous-répertoires
Il peut être intéressant de réaliser le traitement pour tout un répertoire et ses sous répertoires d'un seul coup.
Voici les commandes que j'utilise :
find . -type f -name "*.jpg" -exec jpegoptim --strip-all --all-progressive {} \;
find . -type f -name "*.png" -exec pngout {} \;
Optimiser les gif
Il est possible d'optimiser les Gif avec gifscile. Je suis sous Ubuntu 14.10 au moment de la rédaction de ces lignes et le package je l'ai trouvé ici https://launchpad.net/ubuntu/+source/gifsicle/1.84-1/+build/6158058
J'ai utilisé la commande suivant pour passer d'une image qui pesait 4.3 ko à 3.2ko (tout ça parce que google insight n'était pas content ..).
gifsicle --batch -O3 --no-comments --no-names --crop-transparency --use-colormap web jc_bbcodes.gif
Dire que la qualité n'a pas changé serait faux. Les couleurs ont évolué. L'orange est plus clair etc ...
Conclusion
Si vous utilisez des modules externes, comme Adsense, visionneuse d'images, vous risquez à tout moment être confronté à des images non-optimisées. De fait, il y a peu de chance d'arriver à 100% d'image optimisées. Reste que cette bonne pratique est bien pour la bande passante, et le stockage (pour ceux qui serait sur un serveur de plus en plus rare en espace limité ...).
Comments powered by CComment