Réduire drastiquement le poids de ses images

Outre la réduction des requêtes HTTP, l'utilisation de gzip et la compression des fichiers Javascript et CSS, un des meilleurs moyens d'améliorer les performances de son site reste de réduire le poids de ses images.

L'export avec Fireworks

La plupart des intégrateurs utilisent la fonction Enregister pour le web de Photoshop pour exporter leurs images. Etonnement, l'export jpeg de celui-ci n'est pas très optimisé et Fireworks fait un bien meilleur travail de ce côté-là.

Voici un exemple parlant. Cette image a été exporté en jpeg à 70% avec Photoshop, elle pèse 126 ko :

Et voici la même image exportée d'abord en PNG avec Exporter pour le web puis en jpeg à 70 % avec Fireworks, elle ne pèse plus que 64 ko.

Les couleurs sont très légèrement délavées mais il est possible d'exporter en meilleur qualité tout en gardant un poids moindre.

Cette "technique" fonctionne aussi bien quelle que soit la taille de l'image.

J'ai créé un script Fireworks que vous pouvez utiliser afin d'automatiser cet export, il vous suffit d'ouvrir les images que vous voulez optimiser puis d'ouvrir ce fichier avec Fireworks, les fichiers optimisés seront placés dans le même dossier que ceux que vous avez ouvert et un back-up sera fait.
Vous pouvez le télécharger ici : Script Fireworks - Export jpeg 70 %
Fireworks utilise Javascript comme langage de script aussi il vous sera facile d'ouvrir ce fichier et de modifier ses paramètres à votre convenance.

ImageAlpha et ImageOptim

Pour les PNG 32 bits (avec couche de transparence ou couche alpha), il est aussi possible de fortement réduire leur poids grâce à ImageAlpha.
Vous pouvez le télécharger pour Mac ici : http://pngmini.com/
Ce logiciel se base sur les programmes pngquant et pngnq qui s'utilisent en ligne de commande si vous voulez plus de contrôle sur vos exports.

Voici un exemple de PNG 32 bits exporté avec Photoshop, il pèse 75 ko :

Voici la même image passée à travers ImageAlpha, elle ne pèse plus que 24 ko :

Enfin, encore la même image passée à travers ImageOptim, son poids définitif est de 22 ko :

Nous avons donc réduit de plus d'un tiers le poids de l'image grâce à ces deux logiciels !

Notez que ImageOptim permet de compresser plusieurs fichiers ou dossiers d'un coup, on gagne souvent 10 à 20 % sur le poids de ses images en quelques secondes.

 

Voilà, j'espère que grâce à ces petites techniques vous arriverez à rendre vos sites encore plus rapides !

Be Sociable, Share!

    Commentaires

    1. Pour le jpg, passez par gimp... compression à 50%, j'arrive à une image de 41,5Ko en prenant comme base la version jpg de photoshop, avec une dégradation équivalente à celle de Fireworks ^^

    2. Et avec ImageAlpha sous Mac, ne pas oublier ImageOptim, qui supprime toutes les métadonnées, "smushitant" les images pour un gain de poids de 10% à 63% ! (mon record pour ce type de réduction sans perte de qualité).

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>