Optimiser ses images sur un site web

Sur internet, tout le monde n’est pas logé à la même enseigne. Certains ont des connexions très haut débit, la fibre par exemple. D’autres sont dans des zones blanches à peine couvertes par l’ADSL. Aussi, les usages mobiles prennent de plus en plus de place sur le marché, et de ce point de vue là, les inégalités sont encore plus fortes entre la 2G+, la 3G, la 4G et la 5G encore en cours de déploiement.

Quand vous créez un site internet, il faut penser à couvrir un maximum d’usages et selon votre cible il faut adapter le contenu pour le rendre accessible aux connexions lentes. Cela passe par plusieurs types d’optimisations, nous allons nous pencher ici sur la principale source de lenteur : les images.

PNG ou JPEG ?

La première source d’optimisation réside dans le choix du format du fichier qui va contenir notre image. Plusieurs formats existent, nous allons nous pencher sur deux formats particuliers : le JPEG et le PNG.

Quand utiliser du PNG ? Quand utiliser du JPEG ?

Il y a une différence de taille entre le PNG et le JPEG. Le PNG est un format de compression sans perte, alors que le JPEG est un format de compression avec pertes. Aussi, le PNG possède une couche alpha et permet donc de créer de la transparence. Suivant vos besoins de transparence, ce format peut s’imposer de lui-même (je laisse volontairement le GIF de côté, car son rapport poids/qualité est moins efficace que le PNG).

Du fait de la nature même de la compression sans perte, PNG offre un meilleur rapport poids/qualité que JPEG pour les images avec un faible nombre de couleurs. Autrement dit, nous utilisons très souvent le PNG pour les logos et les infographies créées de toutes pièces. Le JPEG sera quant à lui principalement utilisé avec les photographies.

Livrer l’image au format de l’écran

Pour améliorer un peu plus la vitesse de chargement, nous pouvons adapter la distribution des images à la taille et au type de l’équipement (ordinateur, notebook, tablette, smartphone, etc.) qui va les afficher.

L’idée ici est de limiter la bande passante utilisée en n’envoyant que les données nécessaires. Inutile en effet d’envoyer une image de 1920 pixels de large pour l’afficher dans un carré de 100 pixels de large sur un smartphone.

Pour autant, il ne faut pas non plus bannir le format HD du site internet sur mobile ! En effet, dans certains cas l’internaute voudra obtenir l’image en résolution maximum. Dans ce cas-là, il est intéressant d’envoyer une première image réduite. Nous pouvons ensuite afficher l’image complète dans sa résolution maximum lorsque l’internaute clique dessus. Ceci peut être un bon compromis entre performance et qualité de service.

Optimiser les images pour gagner du temps de chargement

L’une des dernières étapes concerne les fichiers eux-mêmes. Il est possible en appliquant les bons paramètres de compression de gagner jusqu’à 30% sur le volume d’un fichier. Cela est possible sans pour autant en altérer sa qualité pour l’œil humain dans un contexte informatif ou commercial. Je mets volontairement de côté le contexte artistique ici.

Si nous mettons bout à bout cette optimisation de volumes avec les solutions précédemment citées, nous sommes capables de gagner en moyenne plus de 50% de volumes par images.

Il ne faut pas oublier qu’en général nous avons plusieurs images sur une même page, et que le moindre gain multiplié par 5, 10, 15 voire 20 images peut rendre votre page jusqu’à 10 fois moins volumineuse et améliorer par conséquent vos temps de chargement.

Gardez à l’esprit qu’une page mettant plus de 3 secondes à charger, vous fera perdre 50% de votre audience potentielle.