Archives pour l'étiquette jpegtran

Optimiser les images web avec ImageOptim pour Mac OS X

Un outil desktop Mac OS X

Pour faire suite à mon billet « Optimisation des images pour l’accélération d’un site web avec jpegtran et pngcrush » ou je cherchais une solution d’optimisation de la taille des images jpg avec jpegtran et des images png avec pngcrush en ligne de commande et à mon billet revenant sur l’expérience d’optimisation des images sur l’arborescence de storage de Voici.fr j’ai cherché un utilitaire desktop pour Max OS X

ImageOptim

J’ai trouvé ImageOptim qui fonctionne avec AdvPNG , OptiPNG, PngCrush, JpegOptim, jpegtran, Gifsicle et PNGOUT. Ce logiciel étant sous GPL2, en français j’ai pas hésité.

test de ImageOptim

Le résultat est conséquent avec des gains qui ne sont sont pas négligeables quelque soit le programme ayant généré l’image. Son utilisation en drag & drop et l’enregistrement direct du résultat facilite son utilisation.

J’ai monté via MacFuse / MacFusion le filesystem de mon serveur web et j’ai négligemment balancé l’intégralité de /var/www/. Outre le temp d’échange des données via ma ligne ADSL ImageOptim prit plus de 30 min pour tout avaler.

Suprise avec les thumbnail

La plus surprenant n’est pas l’efficacité (noté le gain de 83%) mais le fait que beaucoup d’image n’était pas optimisées alors qu’elles étaient prévus pour le web dès leur origines. Je parle des boutons, icones et autre illustration livré avec les applications web et les plugins ajouté au fil du temp. De même pour le thumbnail généré par les application, particulièrement doctclear 2.

Voici.fr résultat d’optimisation des images

Pour illustré mes recommandations sur l’optimisation des images pour l’accélération d’un site web je me suis amusé à optimisé le contenue du storage eZ publish de voici.fr. Le storage qui est basé sur eZFS qui permet de stocker les binaires sur disque (donc les images) et de les partager via NFS je n’ai donc eu aucun mal à accéder au image et à pratiquer un test.

Etat initial

J’ai recopier le répertoire /var/www/voici.fr/var/siteaccess/storage sur une machine virtuel de notre architecture de développement et j’ai ensuite fais l’inventaire de cette arborescence.

  • 9,9 Go
  • 207075 fichiers
  • 326 fichiers png
  • 5 fichiers jpeg
  • 195883 fichiers jpg

Nettoyage jpegtran

J’ai lancer un nettoyage des fichiers jpg avec jpegtran, celui ci à duré 5 heures mais j’avais à ma disposition que 1 core de Xeon et 1Go de Ram.

real    320m39.499s user    37m44.520s sys     227m19.910s

Au final j’obtient une taille total de 9,3Go pour /var/www/voici.fr/var/siteaccess/storage. J’espérais un gain supérieur mais en même temps cela indique que les images uploader répondre déjà à un charte précise et sont normées.

Analyse du gain

Le gain de 300 Mo peux sembler totalement inutile à l’heure des disques SATA à 1To si seul le stockage était jeu. Or l’important est de gagner quelque point sur la diffusions. Dans la cas présent tout les 10Go nous gagnons 300Mo. Si je spécule sur le volume total de donnée transférer par mois pour voici.fr c’est près de 100Go de donnée en moins que nous avons à diffuser chaque mois. Reporté à l’année c’est 1,2To de donnée qui ne passerons pas dans les tuyaux.

Sur une autre plate-forme nous avons utilisé un CDN pour prendre un charge la diffusion des images. Le service de CDN nous facture environs 25ct d’euro le Go transporté. On peux donc spéculé que un gain de 1,2To représente donc 300€.

Je rappel que ceci est totalement spéculatif et sur les seules donnée de voici.fr, attention.

Bad User Karma

Je viens de prendre conscience que j’avais saturé mon filesystem et que en conséquence le storage de voici.fr fait plus de 9,9 Go.

L’exorciste reste valide, mais partiel.

Optimisation des images pour l’accélération d’un site web

En prenant comme exemple le travail réalisé pour voici.fr j’ai expliqué comment optimiser un site eZ Publish 4 pour l’utilisation des caches web, comment optimiser les performances de reverses proxy SQUID en amont de vos frontaux php, puis comment purger un élément de vos reverse proxy cache SQUID et au final démontré l’intérêt de ces optimisations avec le cas d’un pic d’audience du à l’action conjugué de Google Actu et Yahoo Actualité toujours sur Voici.fr

Maintenant je penche sur l’optimisation des images pour en accélérer le chargement afin de rendre plus véloce et rapide l’affichage des pages d’un site web.

 

Résolution et format mais la compression ?

Les images généré par les APN[1] sont d’une taille énorme et dépasse maintenant le millier de pixel de coté. Le contributeur à un site web à conscience de cela et s’efforce d’en réduire la résolution en général aidé en cela par une charte fournit par l’équipe technique en charge de la gestion du site web. Parfois un outils avec la procédure associée est fournit. Le plus les développeurs ont prévu des routines de vérification de la taille de l’image envoyé, parfois qui impose un format et ajoute une vérification du type mime.

Je me suis attaché à trouver une solution d’optimisation quelque soit la résolution en me concentrant sur le format jpg et png[2]. L’idée étant que le téléchargement d’une image de résolution raisonnable et d’un format précis ayant été acquit par le travail de vérification des routines mise en place par l’équipe de développement il me semblais nécessaire de revoir la compression et le nettoyage après la mise en ligne, ceci de façon automatique, massive et automatisable, bref à grand coup de script et cron.

 

Compression et nettoyage !

Les deux s’imposent de plus en plus avec l’utilisation massive d’APN et de logiciel de retouche d’image. Le premier comprime de moins en moins les images pour favorisé leur retouche ultérieurs. Un APN de type réflex propose d’ailleurs le format RAW ou TIFF qui ne comporte pas de compression. Mais en plus tout les types d’appareil, qui soit amateur ou professionnel ajoute tout un tas d’information dans le fichier en plus de l’image elle même:

  • Un court fichier d’en-tête pour organisation des bits, l’identification du fichier et l’emplacement des données.
  • Les métadonnées du capteur photographique ( la taille du capteur, filtre couleur et le profil couleur )
  • Les réglages d’exposition, le modèle d’appareil, la date voir la position GPS
  • section normalisée de métadonnées au format EXIF.
  • Parfois une vignette de l’image au format JPEG une prévisualisation rapide
  • etc.

Des informations très pertinente pour la retouche d’image ultérieur, le classement et l’archivage voir la gestion de droit mais totalement inutile pour l’utilisation sur le web. En plus de façon quasi systématique tout logiciel utilisé ultérieurement pour manipuler l’image ajoutera des informations semblable. Donc une nettoyage s’impose pour accélérer leur affichage.

 

Nettoyage et optimisation des JPG

Utilisation de jpegtran

Pour nettoyer les jpg j’ai utilisé jpegtran présent dans le paquet libjpeg-progs sous debian lenny. Mais d’autre solution existe vous pouvez en trouver une liste sur performance.survol.fr.

apt-get install libjpeg-progs

J’utilise les options suivante :

  • -copy none qui supprime tout le blabla enregistré par l’APN ou le logiciel de retouche
  • -optimize pour optimiser l’encodage en organisant les informations (sic)
  • -perfect impose que les deux précédentes option soient parfaitement réalisé ou pas du tout pour évité les situations partielles et instables.

Voici une ligne de commande pour traiter tout les jpg d’une arborescence. Noter que dans le bout de script suivant j’exclus les fichiers jpg ayant un espace dans leur nom ou dans le nom du répertoire de stockage.

for I in `find ./ -type f -name "*.jpg" | grep -v [[:space:]]`;  do jpegtran -copy none -optimize -perfect $I > /tmp/optimized.jpg; mv /tmp/optimized.jpg $I; done

Efficacité de jpegtran

Résultat un répertoire de 532 Fichiers qui pesait 53Mo est descendu à 50 Mo après optimisation avec jpegtran

 

Nettoyage et optimisation des PNG

Utilisation de pngcrush

Pour optimiser les png j’ai fais le choix de pngcrush présent sous debian lenny. La également d’autre solution existe entre autre optipng que linuxandfriends.com à testé.

J’utilise un option unique :

  • -brute teste 114 filtres de compression et ne retient que celui qui donne le meilleur résultat pour l’images traité.

Attention cela prend un temps énorme de réalisé 114 fois la compression d’une image pour au final n’en retenir qu’un résultat sur ce nombre. Mais, en contre partie, le filtre est toujours le plus pertinent pour l’image traité et résultat vraiment performant.

Voici une ligne de commande pour traiter tout les png d’une arborescence. Noter que dans le bout de script suivant j’exclus les fichiers png ayant un espace dans leur nom ou dans le nom du répertoire de stockage.

for I in `find ./ -type f -name "*.png" | grep -v [[:space:]]`;    do pngcrush -brute $I  /tmp/optimized.png; mv /tmp/optimized.png $I; done

Si vous souhaiter traiter uniquement les fichiers png du répertoire courant en changeant leur extension en .crush.png c’est plus simple :

pngcrush -brute -e ".crush.png" *.png

Les pgn de capture d’écran sous Mac OS X

Les capture d’écran sous Mas OS X avec la séquence de touche Pomme+shift+4 génère un fichier png par défaut. Personnellement j’utilise beaucoup cette fonction pour créé les images illustrant mes articles. La méthode / filtre la plus efficace de pngcrush pour ces png est la 113. Voici la syntaxe de son utilisation :

pngcrush -m 113 -e ".crush.png" *.png

Efficacité de pngcrush

Sur un répertoire contenant à l’origine les trois images png suivante.

-rwxr-xr-x 1 www-data www-data 365K Oct 13 16:00 Header.home.Voici.fr.png -rwxr-xr-x 1 www-data www-data 268K Oct 13 16:00 Hearder.Logo.Voici.fr.png -rwxr-xr-x 1 www-data www-data 284K Oct 13 16:03 Taille.Element.Voici.fr.png

Nous arrivons au résultat suivant

-rw-r--r-- 1 root     root     238K Oct 13 16:00 Header.home.Voici.fr.crush.png -rw-r--r-- 1 root     root     173K Oct 13 16:00 Hearder.Logo.Voici.fr.crush.png -rw-r--r-- 1 root     root     189K Oct 13 16:03 Taille.Element.Voici.fr.crush.png

Avant nous avions 900K d’image png, maintenant nous avons 600K. Sur cet exemple, limité, le poids des images à été réduit d’un tiers.

Notes

[1] appareil photo numérique

[2] Gif is dead