Optimiser les images de votre Blog

2

flash vitesse mobile speed

Sur Internet, il y a un critère important : la rapidité de chargement d’un site. Tout doit aller vite… toujours + vite. Que ce soit pour vos visiteurs ou pour Google, votre site/blog doit se charger rapidement.

Il existe de nombreuses techniques pour améliorer les performances d’un site Web (ou d’un blog) et notamment sa vitesse… Les Images sont souvent responsables d’un chargement laborieux. On sait par exemple qu’il vaut mieux mettre un fichier PNG plutôt qu’un GIF… Qu’il est important de mettre des images aux bonnes dimensions (directement) plutôt que de faire un redimensionnement à la volée dans code de la page. Il est également possible de jouer sur la compression/optimisation des images. C’est sur ce dernier point très important que nous allons nous arrêter aujourd’hui. La compression et l’optimisation d’image sans détériorer sa qualité.

Facile à résoudre, il permettra d’alléger vos pages de plusieurs précieux Ko…

Aujourd’hui, je vous propose de découvrir 2 outils : ImageOptim pour OS X et ScriptCX pour Windows.

Quelques informations importantes (conséquence) sur le chargement d’une page/d’un site :

  • Perdre 500 ms sur le chargement d’un site, c’est perdre 20% de trafic Google
  • Réduire de 30% le poids d’une page, c’est gagner 30% de visiteurs à moyen terme
  • Ajouter 100 ms de latence pour Amazon, c’est 1 % des ventes en moins
  • Perdre 400 ms sur le chargement d’une page, 5 à 9% d’abandon supplémentaire pour Yahoo!

Je pense que ces quelques exemples sont assez parlant pour comprendre que la vitesse de chargement d’une page/d’un site est extrêmement important.

Intéresserons-nous aux formats d’image JPEG (extensions .jpg, .jpeg) et PNG…

OS X

Le premier outil est pour nos amis utilisant un MAC, il s’agit de ImageOptim.

ImageOptim

ImageOptim propose une interface simple proposant de passer vos images dans différents outils de compression/optimisation afin de les rendre plus légères. Soit vous lancez l’application et vous faites un simple glisser/déplacer des fichiers dans la fenêtre…

menu-imageOptimize

Soit vous faites clique-droit (clic secondaire) sur l’image et le menu proposera ImageOptimize…

Windows

ScriptCX propose quelques scripts faciles d’utilisation qui vous permettront de passer vos images dans différents outils d’optimisation. Je vous conseille ScriptCX (Contextual). Facile et rapide d’utilisation, il est idéal pour traiter rapidement des images par lot. Si vous n’utilisez que des fichiers JPEG, je vous conseille ScriptJPG avec un réglage à 85% (choix 4).

script-jpg

Simple et efficace… Pensez à créer un raccourci dans le dossier  SendTo (%APPDATA%\Microsoft\Windows\SendTo) pour utiliser la fonction Envoyer Vers dans le menu contextuel (via le clic droit).

Conclusion

Les mauvaises performances d’un site web/blog font perdre du trafic/de l’argent. L’amélioration du temps de téléchargement d’une page (poids) passe forcément par l’optimisation des images.

Ces 2 outils, testés et approuvés par votre serviteur, utilisent plusieurs fonctions/applications bien connues afin de fournir des images allégées. On retiendra notamment : AdvPNG, OptiPNG, PngCrush, JpegOptim, jpegtran et pngout. Bref, la crème de la crème…

Pour nos amis linuxiens, vous pouvez également regarder du côté de Trimage 😉

Enfin, sachez qu’il existe également Smush It et son plug-in pour WordPress. L’avantage de ce dernier, son intégration dans WordPress… Son inconvénient, sa lenteur et ses problèmes à répétition.

Partager.

A propos de l'auteur

Passionné de nouvelles technologies, je suis un touche-à-tout. Mon smartphone ne me quitte (presque) jamais. Je peux vous parler des NAS pendant des heures.

  • ced64k

    Ce n’est pas vraiment le poids des fichiers qui va rendre un site lent, c’est surtout le nombre de fichiers. Un navigateur ne peut charger que quelques fichiers simultanément. Par exemple ici tu as 9 css et 32 js. Tu pourrais « minifier » ça en deux fichiers. Il y a des plugins WordPress qui font ça.

  • gilles

    en complément utiliser un serveur qui sert uniquement les fichiers statiques peut être une bonne option 🙂 un serveur comme nginx par exemple

Lire les articles précédents :
Interview QNAP France

Aujourd’hui nous recevons Florent Verthuy, qui travaille chez QNAP France en tant que Responsable du développement commercial. Pour ceux qui...

Fermer