Réduire le Temps de chargement grâce à l’Optimisation des Images

Vous aimerez aussi :

Vous pensiez que jouer avec les différents formats était réservé aux graphistes ? Faux. En tant qu’Entrepreneur, Startuppeur, Webmarketeur ou Chef de Projet Digital, vos connaissances doivent s’étendre jusque là. Pour remettre les pendules à l’heure, voici un descriptif des différentes extensions d’image et comment les choisir pour accélérer le chargement de son site web.

 

Le JPEG, appelé aussi “le-format-pour-les-photos”,

bien qu’il soit en général plus léger que le PNG, est utilisable uniquement pour les arrières plans et les grands visuels complexes nécessitant beaucoup de couleurs mais aucune transparence. Le problème du JPG est qu’il se pixelise rapidement et perd de sa qualité. Donc il sera plus léger de base, mais avec une trop grande compression, sa qualité va en pâtir et donner à votre site un certain amateurisme bien horrible.

Cependant, une méthode d’optimisation des images JPG a été découverte sur la toile. Elle consiste à doubler la taille d’un visuel et d’enlever 100% de sa qualité et de redimensionner celle-ci.
Optimisation JPG Qualité 60Optimisation JPG Qualité 0

A gauche, une image en 500 x 333 px en qualité de 60% à 40,59 ko. >A droite, la même image en 1000 x 666 px en qualité 0% à 23,7 ko

 

Optimisation Image JPG Redimension Optimiser JPG
A gauche, l’image en qualité 60% à sa juste dimension. A droite, le résultat de la redimension de 1000 x 666 px en 500 x 333 px avec l’image de qualité 0%

 

Heureusement, nous avons le PNG.

Sa première extension, le PNG 24 contient autant de couleurs que le JPEG, mais avec des jeux d’opacité et sans aucune pixellisation à la redimension. C’est l’extension à privilégier pour tous les visuels plus ou moins transparents car il prend en compte les couches alpha. Le poids des PNG étant plus lourd que le JPG, les visuels en plus de 800px sont à bannir.

Le PNG-8, quant à lui est une version réduite et plus légère, jusqu’à 256 couleurs et sans jeux d’opacité (couches alpha) mais considère quand même la transparence “pure”. Cette version faible en poids est idéale pour le flat design et les logos, à l’instar du GIF. Contrairement au JPG, Les PNGs sont tous deux optimisables sans perte de qualité en moyenne à 85% par des outils gratuits.

 

En ce qui concerne les animations,

elles sont à créer en CSS et en javascript en prédilection. Le GIF s’utilise uniquement pour les animations impossibles à créer en CSS, comme par exemple une courte séquence vidéo capturée en GIF. A contrario, ils sont sympathiques à utiliser pour toutes vos campagnes emailing, difficilement compatibles en HTML et CSS.
De même, les formes CSS et HTML doivent être privilégiées aux images en général. Mais vous allez rapidement aimer faire des encarts, des blocs décoratifs et des animations en HTML et CSS

D’ailleurs, les pictogrammes qui inondent et illustrent avec justesse le web sont de plus en plus plébiscitées. Et ce n’est pas pour rien. Ces formes complexes sont enregistrées au format SVG, modifiables sous Illustrator notamment. Le SVG permet aussi d’insérer des tracés et des pictogrammes en fonts, plus légères et au redimensionnement non pixelisé.

 

Quelques conseils d’Optimisation d’Images

  • Si vous souhaitez afficher une image avec des jeux de transparence en grand format (plus de 900px) la rapidité de votre site va en pâtir. Privilégiez un arrière plan en full-width avec l’illustration en question. Le tout compacté dans un JPEG à 70% voire 60% de qualité. Le PNG c’est beau, mais il reste un format lourd.
  • Pour optimiser le temps de chargement de votre site, vos pictogrammes peuvent être chargés en police au lieu d’un SVG ou d’un PNG-8 (le PNG-24 étant trop lourd pour aussi un visuel monochrome et sans aucunes couches alpha). Des applications de créations de polices sont disponibles en ligne. Elles vous permettent de charger vos pictogrammes au format SVG pour les intégrer dans un alphabet, tout comme la célèbre font d’icônes FontAwesome

 

Ce qui est rassurant c’est que ces différents formats ont bel et bien une utilité sur le web. Et savoir jongler parmi eux et un axe très important d’amélioration du temps de chargement d’une page ou d’un site. Heureusement , il existe encore d’autres optimisations de la performance d’un site.

 

En attendant, pour aller plus loin : Optimiser le temps de chargement de son site web, Accélérer son site grâce à l’arborescence.

One thought on “Réduire le Temps de chargement grâce à l’Optimisation des Images

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.