Optimiser ses images pour le Web

Sommaire

Quels sont les avantages de l'optimisation web ?
Les bonnes pratiques à mettre en place
1. Poids et taille optimale
2. Format du fichier
3. Recadrer l'image
4. Compresser l'image
Source

Quels sont les avantages de l'optimisation web ?

Les grosses images ralentissent vos pages Web, ce qui crée une expérience utilisateur moins qu’optimale. L’optimisation des images est le processus qui consiste à diminuer la taille du fichier. Les principaux avantages sont les suivants :

améliorer votre vitesse de chargement des pages
améliorer votre référencement, un site rapide et moins lourds est mieux classé par Google
simplifier la création de sauvegardes car elle sera plus rapide
alléger le réseau et le navigateur client, permettant entre autre la lisibilité rapide du site sur smartphone
alléger l'espace de stockage des serveurs (pour consommer moins d'électricité et réduire les émissions de CO2).

Toutes ces démarches ne s'inscrivent pas uniquement dans le but client mais va également dans le sens de la planète. L’impact environnemental du numérique n’est pas toujours connu, pour s’en rendre compte, voici quelques chiffres :

Une donnée numérique parcourt en moyenne 15 000 kilomètres.
Une recherche Google produit une émission de CO2 de 7 grammes.
Les data center français consomment 10 % de l’électricité utilisée dans notre pays.

Les bonnes pratiques à mettre en place

Avant d'uploader une image sur votre site, voici un une checklist récapitulative des bonnes pratique.

Poids et taille optimale

Selon votre image et son emplacement d'affichage, la taille et le poids peuvent varier. Voici globalement un tableau récapitulatif selon le composant à afficher sur votre site :

Composant graphique	Poids max	Poids recommandée	Largeur Max
Image full screen background	1mo	150 ko	2000px
Image large / image en background	1mo	150 ko	Taille de l'encart ou elle doit s'afficher
Petite image / icône	300ko	20 ko	150px

Format du fichier

Deux types de fichiers à retenir : le JPG et le PNG.

JPG

Pour tout ce qui est photographie, privilégiez le format JPG.
Il peut supporter toutes les couleurs d'une photo, le tout dans un petit fichier efficient.

PNG

Pour tout ce qui est plus graphique tels que des logos, des infographies, des bannières etc, privilégiez le format PNG.
Il peut gérer : beaucoup de couleur, supporte assez bien le zoom et gère la transparence contrairement au JPG.

Astuce

Si vous utilisez Photoshop, préférez sauvegarder un PNG en 24bit format pour avoir plus de couleur supporté.

D'autres formats ? (SVG, GIF, ...)

Les autres formats ne sont bien évidemment pas à exclure totalement, il en existe beaucoup d'autres.

Pour en citer deux autres qui peuvent vous être utiles : Le SVG est un cousin éloigné du PNG. Il est riche en couleur et vous permettra de ne pas perdre en netteté si il a été correctement vectorisé. Le GIF peut vous être utile si vous avez besoin d'une animation mais la qualité est moins bonne que les autres formats.

Recadrer l'image

Une manière efficiente de réduire le poids d'une photo est simplement de la recadrer dans le format d'affichage sur site. Il est contre productif d'afficher une image en 2000px / 2000px si elle est voué à être affiché dans un encart de 150px.

Astuce

Des outils en lignes existent pour vous aider à recadrer votre image : https://www.iloveimg.com/crop-image

Compresser l'image

Avant d'uploader votre photo, vous pouvez au préalable la compresser sans perdre de qualité. Cette compression a pour utilité de réduire la redondance des données d’une image (les pixels) afin de pouvoir l’emmagasiner sans occuper beaucoup d’espace ou la transmettre rapidement.

La compression d’image peut être effectuée de 2 manières : avec perte de données ou sans perte. La compression sans perte est souvent préférable là où la netteté est importante : schémas, dessins techniques, imprimerie, affiches publicitaire, etc. La compression avec perte, plus radicale, est utile pour les transmissions sur des réseaux bas débit. En contre partie, cette dernière méthode peut dégrader la qualité de l’image.

Mais pas de panique, des outils en lignes de compression peut vous aider à compresser sans perdre de la qualité d'image.

Outils

Pour les JPG : Kraken - https://kraken.io/web-interface
Pour les PNG : Compressor - https://compressor.io

Source

https://kinsta.com/fr/blog/optimiser-les-images-pour-le-web/

https://www.jimdo.com/blog/optimize-website-images-for-better-design-seo/

https://themeisle.com/blog/best-online-image-optimizer-tools/