Publicité
Optimiser images pour le web

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é ...).

 

jpegoptim 001jpegoptim 002jpegoptim 003


Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :


Commentaires (2)

  • Merci pour les astuces, mais il manque un - à la commande:<br />find . -type f -name "*.jpg" -exec jpegoptim -strip-all --all-progressive {} \;<br /><br />à remplacer par:<br /><br />find . -type f -name "*.jpg" -exec jpegoptim --strip-all --all-progressive {} \;

  • Invité - Jerome BAPTISTE

    Invité - thomas

    Merci beaucoup Thomas, j'ai corrigé

Poster un commentaire en tant qu'invité

0

Publicité - Ce contenu peut vous intéresser - Test

La pub ça rapporte pas grand chose, en plus ça vous laisse d'horribles cookies non comestibles, autrement appelé trackers. Ce cookie est utilisé par DoubleClick (Google Adsense). Vous avez tout le droit de ne pas en vouloir et donc quitter cet excellent blog. Dans le cas contraire, vous l'acceptez et vous poursuivez le surf en toute connaissance de cause (par ailleurs j'utilise piwik).