Pourquoi optimiser la taille et le poids de vos images ?
En diminuant le poids d’une image, on accélère son temps de chargement depuis un site internet. Cela a deux effets :
- Augmenter la qualité du site et le respect des normes SEO pour les moteurs de recherche,
- Améliorer l’expérience utilisateur : la page se charge plus vite, réduit la frustration d’attente, réduit le risque que l’utilisateur quitte la page avant la fin du chargement.
Diminuer le temps de chargement des images est une amélioration simple à effectuer, peu chronophage et ne demande pas beaucoup de compétence.
Différence entre 2 images, optimisée ou non
Cliquez sur les images pour les comparer
Avant compression (876ko)
Après compression (169ko)
En savoir plus sur le temps de chargement d’une page
Lorsque l’on charge une page internet, le navigateur (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, etc.) récupère les ressources présentes sur cette même page :
- Feuille de style (CSS) : gère le design de la page (police d’écriture, couleur du texte, organisation des éléments, etc.)
- Scripts (JS) : Améliore l’expérience utilisateur avec des fonctions dynamiques (par exemple l’actualisation d’un graphique toutes les 5 secondes sans recharger la page)
- Images (JPG, JPEG, PNG, GIF, etc.), toutes les images présentent dans la page
Suivant la vitesse de la connexion internet du visiteur, le temps de chargement de ces différentes ressources sera plus ou moins long.
Aujourd’hui on peut classer les vitesses de connexion selon ces groupes :
- Lent (~200ko/s) : Connexion smartphone 3G, wifi public, ADSL hors zones urbaines,
- Moyen (~500ko/s): Wifi en zone urbaine, connexion smartphone 4G,
- Rapide (> 1mo/s) : Fibre optique et connexion Ethernet.
Une image de 1mo mettra ainsi 5 secondes à être chargée avec une connexion lente, 2s avec une connexion moyenne et moins d’une seconde avec une connexion rapide.
Multipliez cela par le nombre d’images présentes sur votre page et vous verrez rapidement comment cela peut négativement altérer la navigation sur votre site internet.
Retenez une chose : Ce n’est pas parce que vous avez l’impression que le site internet se charge rapidement lorsque vous êtes chez vous ou en entreprise que c’est le cas pour tous vos visiteurs.
Gérer la taille de vos images
Maintenant que vous êtes des utilisateurs avertis, la première étape est de faire attention aux dimensions de l’image.
Tout d’abord quelques informations :
- Photo 24 mégapixels : 6000×4000
- Ecran ordinateur Full HD : 1920×1080
- Ecran ordinateur portable classique : 1368×768
Une image en pleine largeur n’a donc aucune raison de faire plus de 1920x1080px. En pratique c’est encore autre chose, le corps d’une page fait rarement plus de 1000px de large, vos images ne devraient donc théoriquement pas dépasser cette valeur
Redimensionnez vos images:
- Avec Photoshop: utilisez « taille d’image » dans l’onglet image.
- Sans logiciel de traitement d’image: quelques outils en ligne existent, vous pouvez par exemple utiliser celui de Bloggif (http://www.bloggif.com/resize). Préciser 1000px de maximum en largeur et 1000px de maximum en hauteur
Les outils et méthodes pour réduire efficacement le poids des images
Il existe plusieurs méthodes pour compresser les images, localement avec un logiciel (Photoshop par exemple) ou en ligne (TinyJPG par exemple)
Petit point sur les formats d’images
Dans cet article on entend par format le type du fichier et non le format portrait/paysage. Ainsi JPG est un format d’image comme le sont le GIF et le PNG.
Ces formats ont leurs avantages & inconvénients :
Le GIF est parfait pour les petites images et supporte la transparence
Le JPG est très performant pour la compression d’image moyenne et grande mais ne supporte pas la transparence
Le PNG permet de conserver tous les détails d’une photo et supporte la transparence (avec la couche alpha), il est cependant plus lourd que le JPG
Comment faire son choix :
Pour une photo, préférez le JPG, pour une image moins complexe (par exemple un logo), le PNG peut être plus performant.
Attention, pensez bien à d’abord redimensionner l’image avant de la compresser !
Réduire le poids d’une image en utilisant photoshop
Si vous disposez du logiciel Photoshop, il faudra utiliser l’outil « Enregistrer pour le web et les périphérique » situé dans l’onglet « Fichier ». Si vous ne le trouvez pas, utilisez les raccourcis : ALT + CTRL + MAJ + S (Windows) Option + Maj + Commande + S (MacOS)
Une fenêtre s’ouvre alors :
Ici le format de sortie choisi est le JPEG, l’image est grande (960px de large par 698px de haut) et complexe.
La qualité choisie a été de 20, c’est ce paramètre que vous devez faire varier, plus cette valeur est faible plus l’image perdra en détail mais le poids sera très diminué (vous pouvez voir le poids en bas à gauche de l’image, ici : 168,7k).
Avec une qualité de 100, cette image fait 855ko, c’est donc un gain de plus de 80%.
Les outils en ligne de compression d’images
Si vous ne possédez pas Photoshop, des outils très performants sont disponibles gratuitement sur internet.
Ici nous utiliserons TinyJPG, la compression est très bonne avec quasiment aucune perte au niveau de la qualité de l’image.
Tout d’abord rendez vous sur https://tinyjpg.com/ et cliquez sur le bouton « Drop your .png or .jpg files here »
Comme indiqué sous le bouton, vous pouvez ajouter 20 images en une seule fois, à condition que chacune d’entre elles pèsent moins de 5mo.
Une fois notre image sélectionnée, elle est téléchargée sur le serveur de TinyJPG, celui-ci la compresse et nous permet de voir le taux de compression :
TinyJPG ne permet pas de sélectionner la qualité, cependant la compression reste très bonne (ici 73%), la qualité d’image n’étant que très peu dégradée.
Pour récupérer votre image cliquez sur le lien « download » situé à la fin de la ligne.
En conclusion
Diminuer les dimensions et compresser une image permet d’accélérer le chargement de la page, de rendre plus agréable l’expérience utilisateur, d’alléger l’impact sur le serveur. Cela se fait soit avec l’utilisation d’un logiciel tel que Photoshop, soit avec des outils en ligne (Bloggif et TinyJPG).