5 façons de réduire le poids des images

Je voulais aborder aujourd’hui le sujet des images, et notamment des photos. Si vous avez lu l’article sur l’empreinte carbone des images sur le web, vous savez désormais que pour créer des sites web plus écolo, il faudrait éviter l’utilisation des images. Mais ce n’est pas toujours évident et c’est même dans certains cas impossible. La quasi-totalité des sites d’e-commerce par exemple ont des fiches produit avec la photo du produit et il serait inenvisageable pour eux de s’en passer.

Comment réduire le poids des images d’un site web ?

J’ai récemment vu une conférence intitulée The Joy of Optimizing Images par Una Kravetz. La conférence date de 2017 donc certaines choses ont probablement évolué depuis mais l’essence du message reste la même.

Una rentre assez vite dans les détails techniques – Una est ingénieure UI senior – et vous n’aurez peut-être pas le temps ou l’envie de regarder l’entièreté de la vidéo alors voici mes “key learnings” pour nous permettre de réduire l’impact carbone de nos sites tout en utilisant quand même des photos 📸 

Réduire la taille des images

Le puissance toujours plus grande de nos téléphones et ordinateurs nous a libéré de toute contrainte d’optimisation de nos fichiers. On oublie bien souvent de se demander si les images qu’on utilise ne sont pas de trop bonne qualité pour l’usage qu’on en fait. 

Prenons une plateforme où chaque utilisateur à son propre compte avec une photo de lui dans un petit cercle comme ça se fait beaucoup sur les réseaux sociaux par exemple. Un utilisateur lambda choisira probablement une photo prise avec son smartphone qui sera de très trop haute résolution. 

Si vous avez déjà imprimé des photos prises avec votre téléphone, vous avez probablement remarqué qu’il n’y aucune dégradation visuelle, que ce soit au format standard de 10×15 ou même sur les agrandissements.

Mais est-ce qu’on a vraiment besoin de stocker les photos de profil de tous les utilisateurs avec une aussi bonne définition alors que sur le produit – le site ou l’application – ces photos ne sont pas plus grandes que la taille d’un ongle ? 💅

Dans sa vidéo, Una introduit la notion du Greatest Common Denominator Image Size. Il s’agit ici de rechercher, pour une image donnée, l’emplacement le plus grand qu’elle peut avoir sur le site, puis de réduire la taille de l’image à la même taille que celle de l’emplacement le plus grand. Cela permet de s’assurer que l’image sera de bonne qualité, même dans son plus grand format, tout en réduisant considérablement le poids de l’image – et le temps de chargement au passage. 

Elle challenge aussi la règle d’usage qui est de doubler la taille d’une image pour assurer un bon rendu sur les écrans Retina. 

Compresser les images

Voici un exemple qu’Una présente dans sa conférence. Les 3 photos ci-dessous ont un poids très différent et pourtant la différence est quasiment imperceptible à l’œil nu. C’est uniquement en zoomant beaucoup sur la photo qu’on distingue la différence.

Et alors là, accrochez-vous bien. Una nous donne l’outil de compression génialissime qu’elle utilise: ImageOptim. L’outil est gratuit et une fois installé, il suffit de glisser-déposer une image dans la fenêtre et ImageOptim la compresse automatiquement en quelques secondes. Il n’y a rien d’autre à faire, la précédente version de l’image est automatiquement remplacée par la version allégée. C’est vraiment bluffant !

ImageOptim compression tool
Test de l’outil de compression ImageOptim

Moins de couleur, moins de poids

On y revient, les images en noir et blanc sont plus légères que les images en couleurs. Mais bonne nouvelle pour tou.te.s celles et ceux qui ont besoin d’un peu de gaieté, Una propose une alternative, un peu plus lourde que le noir et blanc mais un peu moins lourde qu’une photo toute en couleur. Il s’agit du blend mode qui peut être un parti pris branding !

Utiliser le flou

Grosse nouveauté pour moi, j’ai aussi appris qu’on pouvait considérablement réduire le poids d’une photo, simplement en floutant l’arrière-plan de l’image. Comme on le voit sur son exemple avec cette photo, la différence est imperceptible et pourtant la taille est quasiment divisée par deux.

La raison est simple: flouter une image revient à réduire le niveau de variation de couleurs, par exemple ici, il y a un peu moins de variation de bleu dans le ciel, l’image est un peu moins nuancée et par conséquent, comme on vient de le voir, moins de couleurs signifie un poids plus léger.

Choisir le bon format

Il existe aujourd’hui une multitude de formats d’image et il est bien difficile de s’y retrouver. Je vous passe les détails mais si on doit retenir une chose, c’est que le choix du bon format – le plus léger à qualité égale – varie en fonction de la complexité et du niveau de détail d’une image.

Pour une photo par exemple qui a beaucoup de variations de couleurs, le format jpeg sera le format le plus léger. 

En revanche, pour une illustration simple avec peu de variations de couleur comme dans l’exemple ci-dessous, c’est le format svg qui sera le plus intéressant.

Une fois qu’on connaît la règle, il n’y a plus qu’à utiliser le bon format !

Vous pouvez contribuer à créer un web plus respectueux de la planète en partageant cet article pour éveiller les consciences :)
  •  
  •  
  •  
Publié le
Catégorisé comme Agir

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *