Accélérez votre site en gérant au mieux les images

Les images sont indispensables à tout site internet mais elles requièrent beaucoup de données au réseau et causent souvint un ralentissement du site. Si on compare au texte, les images d'un site internet "standard" peuvent nécessiter plus de 20 fois plus de données que le site proprement dit. Nous allons voir différentes techniques qu'on peut appliquer pour réduire au maximum l'effet des images sur la vitesse d'un site internet, mais tout d'abord on doit comprendre les différents types de format d'image et comment elles sont enregistrés dans un fichier. 

 

Les images avec pixels

Ce sont la majorité d'images qu'on voit au jour d'aujourd'hui sur la majorité de sites, les formats les plus courants sont: bmp,jpg,png,gif...

Ce type d'image est stocké en créant une sorte de carte de points (pixels) ou chaque point contient la couleur. Les couleurs de chaque point (ou pixel) requièrent en générale 3 bytes une pour chaque couleur primaire (rouge,vert,bleu) en anglais connu comme RGB.

Image avec pixels
Figure 1.- Exemple d'image avec pixels

Si on prends l'exemple de la figure 1, on dira que c'est une image de 7x10 (7 pixels horizontal, 10 pixels vertical). Pour garder cette image il nous faudra donc 7x10x3 bytes, c'est a dire 210B. Comme une image est en deux dimensions la taille du fichier résultant augmente de façon quadratique avec la largeur et la hauteur de l'image. Pour voir la même image sur un ordinateur sans que nos yeux peuvent voir les pixels il faudrait une image de 700x1000 et du coup le fichier résultant aura une taille de 2.1MB sans compression (on verra plus tard la compression des images)

 

Les images vectorielles

Les images vectorielles sont arrivées en force il y a peu d'années et sont au jour d'aujourd'hui minoritaires, le format le plus utilisé c'est le svg

Ce type d'image est gardé en forme de vecteurs qui représentent l'image et c'est au navigateur de l'afficher.

Image vectorielle
Figure 2.- Image vectorielle

La figure 2 montre notre image en format vectoriel. L'image est stocké avec les vecteurs qui la conforment dans un format texte appelé XML. Le fichier fera une taille de moins de 1KB et le grand avantage c'est que notre image s’affichera parfaitement dans n'importe quelle taille d'écran. Le grand avantage de ce type d'image c'est la taille de stockage, par contre, ce type d'image est limité a des dessins et ne peut pas s'appliquer a des photos. Des dessins assez réalistes peuvent se faire comme celui de la Figure 3.

 

Exemple de svg complex
Figure 3.- Image vectorielle complexe

La compression des images

C'est la première technique à appliquer car c'est la moins difficile à mettre en place. En effet toute image non vectorielle peut être comprimé en réduisant ainsi sa taille considérablement. Le roi de la compression c'est le format jpg que tout le monde connait. Notre image de 2.1MB si on la comprime en format jpg ne fera que aux alentours de 20KB en fonction du facteur de compression utilisé. L’inconvénient de la compression c'est que l'image est modifié et parfois on va voir les effets de la compression

 

Des tailles d'image adaptés au support

Comme on à vu dans la description des images non-vectorielles la taille de l'image dépend fortement de la résolution de l'image (numéro de lignes et de colonnes de pixels de l'image). Il est donc judicieux d'utiliser des images de plus basse résolution sur des petits écrans que sur des grands. Un téléphone portable à une résolution d'environ 340x480 alors que sur un ordinateur on parlera d'une résolution de 1200x900. Il est donc inutile de présenter sur un téléphone portable des images avec une résolution de 1200x900 et va pénaliser le temps de charge sur notre site, de plus que sur un portable il est fortement probable qu'on ne soit pas connecté avec une connexion de haute vitesse si on n'est pas a la maison.

Il faut donc impérativement proportionner des images avec des formats adaptés au support ou l'on les affiche.

 

Utiliser des images vectorielles si possible

Les images vectorielles ont la particularité de ne pas dépendre de la taille du support d'affichage et en plus leur taille est nettement inférieur a son équivalent avec pixels. Il est donc préférable de les utiliser d'avantage. Plusieurs logiciels sont disponibles pour la création d'images vectorielles, un logiciel gratuit et assez complet c'est inkscape

 

Charger les images que quand le visiteur en a besoin

En effet, c'est une technique appelé "Lazy loading" ou chargement faignant. Le site ne charge les images que quand vous en avez besoin. Imaginez un site internet très long avec une vingtaine d'images, vous allez accéder au site et au fur et à mesure que vous descendez sur la page les images vont se charger. Si vous arrêtez à la moitié de la page vous n'aurez chargé que la moitié des images. Le gros avantage de cette technique c'est que au premier chargement de la page vous ne chargerez probablement que une image et le visiteur aura une impression de vitesse de chargement du site

kubiiks utilise tous les méthodes décrites pour optimiser ses sites internet permettant ainsi une expérience utilisateur unique

 

Crée : 01-Apr-2020

 

Découvrez les potentiels des nouvelles technologies web

Vous allez recevoir un courrier électronique par mois avec des explications sur différentes fonctionnalités des applications web

Conditions d'utilisation des données personnelles