Simple Guide d’optimisation des images pour le web

guide d'optimisation des images pour le web

Les sources de la mauvaise performance et de la lenteur d’un site web sont multiple. Mais, celle qui est souvent commune à la majorité de ces sites est la non-optimisation des images pour le web.

Quand les images d’un site ne sont pas optimisées pour le web, elles mettent du temps à s’afficher et ralentissent par la même occasion l’ensemble du chargement de la page web.

Techniquement, voici ce qui se passe : quand une image n’est pas optimisée, elle oblige le navigateur à télécharger plus d’octets. Dû coup il y a plus de compétition sur la bande passante du client, conséquence directe le navigateur met beaucoup plus de temps à afficher les contenus du site à l’écran.

C’est très mauvais pour le référencement et aussi le trafic.

Pour vous aider à éviter le mécontentement aux visiteurs, je vais vous montrer comment vous en chargez vous-même de l’optimisation des images pour le web lors de la réalisation de vos projets de site internet.

Réduire la taille d’une image tout en lui conservant une qualité et une résolution acceptable

LA SUITE APRÈS CETTE PUBLICITÉ

La majorité des sites internet ont un poids compris entre 2Mb et 3Mb. Il est inadmissible qu’un site dont le poids est compris entre ces valeurs incorpore une image qui à lui seul occupe plus de la moitié du poids du site.

Du coup, il est important de toujours vérifier la taille des images à intégrer.

Voici une formule simple qui vous permet de déterminer d’avance la taille d’une image non compressée au format JPG.

Taille d’une image = Largeur de l’image*Hauteur de l’image*3

Le résultat trouvé est en bytes (b), pour le convertir en mégabytes (Mb), il faut diviser la réponse trouvée par 1048576.

Au cas où vous remarqueriez que l’image est trop lourde à charger, avec quoi réduire sa taille pour qu’elle ne perde pas sa qualité ni sa résolution ?

Les Ressources

Il existe des sites internet et des applications avec de puissants algorithmes qui vous donnent la possibilité de réduire la taille de vos images en ligne ou en local.

Les sites internet de compression d’image se diffèrent les uns des autres par rapport aux types de formats qu’ils acceptent et aux nombres de fichiers qu’ils sont capables de traiter en un coup.

Voici quelques-uns de ces sites :

compressor.io :  optimisation des images pour le web

Ce site compresse les images aux formats JPG, PNG, SVG et GIF. Il n’accepte qu’un seul fichier à la fois.

tinyjpg :  optimisation des images pour le web

Il compresse les images au format JPG et PNG, il accepte 20 fichiers à la fois.

squoosh :  optimisation des images pour le web

Squoosh admet les formats JPG, PNG, SVG et GIF, tout comme compressor.io il n’accepte qu’un seul fichier à la fois

website planet imagompressor : optimisation d'image pour le web

Si vous voulez compresser une image et conserver sa qualité, l’outil Imagecompressor de website Planet est celui qu’il vous faut.

Lors de la compression, vous avez la possibilité de choisir le mode de compression qui vous sied (Basse, moyenne ou haute).

L’interface de l’outil est à la fois attrayante et intuitive, il faut que vous y jetiez un oeil.

Elle accepte les formats PNG et JPG.

En ce qui concerne les applications  permettant de traiter les images en local, il existe une multitude sur la toile. Mais le plus populaire de toutes ces applications est  Photoshop.

Donner un coup de pouce au loading 

Quand j’ai commencé à m’intéresser à l’optimisation des images pour le web, je croyais qu’il suffisait de réduire la taille des images et puis le tour était joué. J’ignorais qu’il avait de petites astuces pour rendre plus rapide le chargement des images.

Le Lazy Loading

Le concept du lazy loading est de ne charger que les éléments nécessaires.

Vous comprendrez mieux avec cet exemple.

Prenons un site internet contenant plusieurs pages, quand le visiteur accède à ce site, si ce site implémente le lazy loading alors les images présentes sur la page qui s’affiche seront chargées. Les autres images des autres pages du site ne seront pas chargées.

Certains navigateurs incorporent le lazy loading. Pour lui faire appel dans votre projet, il suffit d’ajouter l’attribut loading dans la balise img et lui donner la valeur  lazy.

<img loading="lazy" src="image.jpg" alt="mon image"> 

Vous avez aussi à votre disposition plusieurs extensions JavaScript permettant d’intégrer cette fonctionnalité, nous pouvons citer : lazyload, yall.js.

Les images progressives

Cette technique est l’un des meilleurs en matière d’optimisation des images pour le web.

Elle permet d’éviter une page blanche aux visiteurs lorsque l’image n’est pas encore chargée. Elle affiche une image de très faible qualité en attendant que l’image de très bonne qualité soit chargée.

Voici un bon tutoriel avec des codes à l’appui qui enseigne comment implémenter des images progressives à l’aide des librairies JavaScript suivantes : Vanilla, les versions 1 et 2 de Vue JS.

Les images responsives

Quand les images ne sont pas responsives, les dégâts s’observent souvent sur les écrans des mobiles et des tablettes.

Il est impératif de veiller à ce que les images s’affichent rapidement et proprement quel qu’en soit le type d’écran. Pour ce faire, vous avez le choix entre une librairie  telle que Bootstrap ou tout implémenter vous-même.

  • Intégrer une image responsive à l’aide de Bootstrap :

Bootstrap est une librairie front-end populaire proposant de nombreux composants et fonctionnalités. Sa flexibilité et sa souplesse font qu’elle est tant appréciée parmi les librairies front-end.

La preuve, même les géants du web l’utilisent.

Pour rendre image responsive grâce à Bootstrap, il suffit d-‘inclure la classe .img-fluid dans la balise img, simple comme bonjour.

<img class="img-fluid" src="image.jpg" alt="mon image"> 
  • Tout implémenter soi-même :

Dans ce cas, il faut utiliser la balise picture, et dans la balise proposer les images à charger et signifier les types d’écran sur lesquels ces différentes images doivent être chargées.

<picture>
    	<source media="(min-width: 1025px)" srcset="image_ecran_large.jpg">
    	<source media="(min-width: 769px)" srcset="image_ecran_tablette.jpg">
    	<img src="image_ecran_mobile.jpg" alt="Mon image">
</picture>

LA SUITE APRÈS CETTE PUBLICITÉ

Conclusion

Pour ne pas rendre mécontents vos visiteurs et surtout ne pas perdre du trafic, vérifiez toujours la taille de vos images. Et si elles sont lourdes à charger sur vos pages web, réduisez leur taille à l’aide de l’une des ressources citées dans l’article et rendez les responsives lors de leur intégration.

Puis implémenter le lazy loading ou encore les images progressives dans vos codes pour que les images se chargent rapidement.

Si vous optimisez les images avant de les intégrer sur vos sites, elles affecteront la croissance de vos sites tout comme certaines astuces d’expériences utilisateurs à prendre en compte.

Laisser un commentaire