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.

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

  1. I simply want to mention I am just newbie to blogs and honestly savored this web page. Very likely I’m likely to bookmark your website . You amazingly come with excellent posts. Appreciate it for revealing your blog.

  2. Hey great website! Does running a blog similar to this require a great deal of work? I have no understanding of programming but I was hoping to start my own blog soon. Anyways, if you have any ideas or techniques for new blog owners please share. I know this is off subject however I simply had to ask. Thank you!

  3. Amazing blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple tweeks would really make my blog shine. Please let me know where you got your design. Thanks

  4. Woah! I’m really enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s difficult to get that « perfect balance » between superb usability and visual appeal. I must say that you’ve done a awesome job with this. In addition, the blog loads super quick for me on Opera. Superb Blog!

  5. I’m curious to find out what blog system you have been using? I’m having some minor security issues with my latest blog and I would like to find something more safe. Do you have any suggestions?

  6. I know this if off topic but I’m looking into starting my own weblog and was wondering what all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet smart so I’m not 100% positive. Any suggestions or advice would be greatly appreciated. Thanks

  7. Hello there! Do you know if they make any plugins to assist with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Thank you!

  8. Hello there! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My site looks weird when browsing from my iphone. I’m trying to find a template or plugin that might be able to fix this issue. If you have any suggestions, please share. Cheers!

  9. Sweet blog! I found it while browsing on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Thank you

  10. Woah! I’m really enjoying the template/theme of this site. It’s simple, yet effective. A lot of times it’s challenging to get that « perfect balance » between usability and visual appearance. I must say you have done a awesome job with this. Also, the blog loads extremely quick for me on Chrome. Exceptional Blog!

  11. Please let me know if you’re looking for a article author for your blog. You have some really good posts and I feel I would be a good asset. If you ever want to take some of the load off, I’d really like to write some content for your blog in exchange for a link back to mine. Please shoot me an e-mail if interested. Kudos!

  12. Howdy! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done a extraordinary job!

  13. Hey there just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Internet explorer. I’m not sure if this is a formatting issue or something to do with internet browser compatibility but I figured I’d post to let you know. The style and design look great though! Hope you get the problem fixed soon. Thanks

  14. Howdy! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My web site looks weird when browsing from my apple iphone. I’m trying to find a template or plugin that might be able to resolve this problem. If you have any recommendations, please share. Cheers!

  15. Thanks for your marvelous posting! I actually enjoyed reading it, you can be a great author.I will remember to bookmark your blog and definitely will come back down the road. I want to encourage you to definitely continue your great job, have a nice evening!

  16. I know this if off topic but I’m looking into starting my own weblog and was curious what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet savvy so I’m not 100% positive. Any suggestions or advice would be greatly appreciated. Appreciate it

  17. Hello! This is kind of off topic but I need some guidance from an established blog. Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about creating my own but I’m not sure where to begin. Do you have any points or suggestions? Appreciate it

  18. Howdy! I realize this is sort of off-topic but I had to ask. Does operating a well-established blog such as yours require a large amount of work? I am completely new to blogging however I do write in my journal everyday. I’d like to start a blog so I can share my personal experience and feelings online. Please let me know if you have any recommendations or tips for brand new aspiring blog owners. Appreciate it!

  19. Please let me know if you’re looking for a article author for your weblog. You have some really great posts and I think I would be a good asset. If you ever want to take some of the load off, I’d really like to write some articles for your blog in exchange for a link back to mine. Please send me an e-mail if interested. Kudos!

  20. My partner and I absolutely love your blog and find many of your post’s to be exactly I’m looking for. Does one offer guest writers to write content for you personally? I wouldn’t mind writing a post or elaborating on a lot of the subjects you write concerning here. Again, awesome weblog!

  21. My developer is trying to convince me to move to .net from PHP. I have always disliked the idea because of the expenses. But he’s tryiong none the less. I’ve been using Movable-type on a number of websites for about a year and am worried about switching to another platform. I have heard fantastic things about blogengine.net. Is there a way I can import all my wordpress posts into it? Any kind of help would be greatly appreciated!

  22. I love what you guys tend to be up too. This type of clever work and reporting! Keep up the wonderful works guys I’ve incorporated you guys to blogroll.

  23. I am really loving the theme/design of your site. Do you ever run into any internet browser compatibility issues? A few of my blog visitors have complained about my website not operating correctly in Explorer but looks great in Safari. Do you have any solutions to help fix this problem?

  24. I would like to thank you for the efforts you have put in writing this site. I’m hoping the same high-grade site post from you in the upcoming as well. Actually your creative writing abilities has encouraged me to get my own web site now. Really the blogging is spreading its wings rapidly. Your write up is a great example of it.

  25. Great beat ! I would like to apprentice while you amend your web site, how can i subscribe for a blog website? The account aided me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear idea

  26. Simply desire to say your article is as surprising. The clarity in your post is just cool and i can assume you’re an expert on this subject. Fine with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please keep up the enjoyable work.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.