Table des matières
Mis à jour le
L’optimisation d’image est un art que vous ne pouvez pas refuser de connaître si vous voulez que votre site Web soit aussi rapide que possible et donne à vos lecteurs la meilleure expérience utilisateur. Comme tout peintre a besoin de connaître les détails techniques de son travail (l’utilisation de la couleur, des styles et des supports artistiques), vous – en tant qu’artiste optimisateur d’images – devez étudier vos images et comprendre leurs caractéristiques de format, leur qualité, leurs dimensions en pixels, etc. La bonne nouvelle, c’est qu’avec les bonnes techniques, vous pouvez réduire considérablement la taille de vos images et rendre vos pages beaucoup plus rapides.
Dans cet article, nous allons vous faire découvrir les secrets de la compression d’images : vous apprendrez comment déterminer le “bon poids” de vos images et quels outils vous pouvez utiliser pour les compresser et réduire leur taille.
Que signifie vraiment compresser une image ?
Compresser une image pour le web, c’est réduire sa taille de fichier : cela se fait en minimisant la taille en octets du fichier image sans aucune perte de qualité.
En d’autres termes, lorsque vous compressez une image, vous réduisez l’espace de stockage que le fichier image occupera : l’espace de stockage est mesuré en kilo-octets (Ko) et mégaoctets (Mo), où 1 Mo = 1000 Ko.
Nous voulons tous que nos images soient nettes et de haute qualité, mais il est important d’équilibrer ce désir avec le temps nécessaire pour que les images sur vos pages soient téléchargées à partir du navigateur.
Plus vos images seront légères, plus vite vos pages seront téléchargées : c’est une lutte constante entre faire plaisir à vos utilisateurs -qui aiment lire votre contenu soutenu par de belles images- et rendre les robots de Google heureux !
Comment déterminer le poids idéal d’une image ?
Il n’y a pas de réponse unique à cette question : la taille idéale d’un fichier image est celle qui vous permet d’avoir l’image la plus légère possible tout en préservant la qualité nécessaire à une excellente performance sur la page.
Pour trouver votre réponse à la question, essayez de voir le sujet sous un angle différent et posez-vous plutôt la question :
Ai-je vraiment besoin d’une image ici ?
Une image est-elle nécessaire pour obtenir l’effet spécial que je recherche sur cette page ?
Puis-je épargner de la bande passante à mes utilisateurs et les empêcher de télécharger des octets inutiles à partir du navigateur ?
Parfois, un design efficace et un contenu bien formaté peuvent tout à faire suffire. Chaque fois que vous pouvez supprimer une ressource image, et éviter sa charge (en termes de HTML, CSS ou JavaScript), vous appliquez déjà la règle d’or d’une bonne stratégie d’optimisation d’image : moins c’est plus.
Cela dit, placer une image qui transmet votre message le plus efficacement est une situation gagnant-gagnant pour votre stratégie de marketing de contenu.
Vos images doivent être nettes et en haute résolution. Malheureusement, la plupart du temps, les images haute résolution et nettes ont tendance à avoir des tailles de fichiers énormes.
Lorsque vous téléchargez une image haute résolution sur vos pages, vous devez toujours garder à l’esprit l’équation :
Grande taille de fichier = temps de chargement plus lent = taux de rebond plus élevé et clients qui s’en vont de votre site.
Quels outils peuvent être utilisés pour identifier la taille d’une image ?
Il existe plusieurs outils gratuits qui vous aideront à identifier les images particulièrement grandes sur vos pages.
Vous pouvez effectuer un test de vitesse avec GTMetrix ou Dareboost : tous deux vous indiqueront la taille totale de la page et, dans leur outil, vous indiqueront quels fichiers sont les plus lourds :
Même votre navigateur est un allié utile dans cette quête de la meilleure taille d’image : par exemple, sur Google Chrome, vous pouvez ouvrir son Dev Tools et faire ce qui suit :
- Ouvrez le Network Panel
- Réglez l’accélérateur sur Good 3G
- Cliquez sur Disable Cache
- Filtrer les résultats par images (Img)
- Rafraîchir la page et vérifier la colonne Size
(Capture d’écran de Chrome Dev Tools – panneau Réseau)
Une fois que vous savez quelles images surchargent vos pages, il vous sera beaucoup plus facile de les optimiser !
Quelles sont les étapes à suivre pour réduire la taille de fichier de vos images ?
La première règle importante que vous devez appliquer scrupuleusement chaque fois que vous traitez avec des images pour votre site Web est d’apprendre à les enregistrer dans un format Web approprié.
Chaque petit Ko est important : même si vous pensez que l’optimisation d’une image n’économisera que 10% de sa taille….faites-le quand même ! Vous en serez reconnaissant à l’avenir 🙂
Sélectionner le bon format d’image
On peut généralement distinguer deux catégories d’images : les images vectorielles et les images matricielles.
Généralement, les graphiques vectoriels sont dans les formats SVG, EPS et PDF : vous pouvez les trouver dans des images composées de formes géométriques ; de plus, ils sont indépendants du zoom et de la résolution.
Les images matricielles sont idéales pour les scènes complexes, y compris les formes irrégulières et les détails, comme les images. Les formats d’images matricielles les plus courants sont GIF, PNG, JPEG ; des formats plus modernes se répandent également, tels que JPEG-XR et WebP.
Les images matricielles ne sont pas indépendantes de la résolution ou du zoom : c’est pourquoi, lorsque vous les agrandissez, vous obtenez des graphiques flous. Par conséquent, il est toujours préférable d’enregistrer plusieurs versions d’une même image matricielle à différentes résolutions afin que vos utilisateurs puissent bénéficier d’une expérience optimale.
Les images GIF, PNG et JPEG sont les trois formats d’image universellement supportés pour le web.
Certains navigateurs supportent également les formats les plus récents tels que WebP et JPEG XR, qui offrent une meilleure compression globale et plus de fonctionnalités.
Consultez ce tableau des Guides du développeur Google pour connaître les différentes caractéristiques de chaque format d’image :
(Image tirée du Guide du développeur Google sur l’optimisation des images)
Redimensionner avec les bonnes dimensions
Chaque fois que vous utilisez une image dont la taille est supérieure aux dimensions requises dans votre page Web, vous envoyez des octets redondants sur la bande passante.
Les outils de performance Web tels que Google PageSpeed font souvent référence à ce point à l’aide de la recommandation Serve Scaled Images.
La mise à l’échelle des images à l’aide d’un éditeur d’images avant de les télécharger est la méthode à suivre ; assurez-vous de spécifier également ces dimensions dans la page à l’aide de l’attribut srcset.
Tout ce que vous devez savoir sur le redimensionnement de vos images avec les bonnes dimensions (largeur et hauteur) est dans notre tutoriel La taille du fichier compte vraiment : conseils et outils pour redimensionner vos images et booster votre site.
Compresser vos images avec l’outil approprié
Avant de rechercher un outil de compression, gardez à l’esprit ces deux conseils lorsque vous commencez à optimiser vos images :
- Supprimez les métadonnées d’images inutiles : vos images peuvent parfois contenir des métadonnées EXIF privées provenant d’appareils photo numériques, de vignettes intégrées ou de commentaires. Les supprimer n’est pas seulement une bonne pratique de sécurité, c’est aussi améliorer la taille de vos fichiers.
Il existe différents outils permettant de supprimer ces données.
- Automatisez autant que possible : pensez à investir dans des outils automatisés ou des plugins qui vous permettront d’optimiser en permanence toutes vos images.
Ensuite, vous serez prêt à plonger dans le monde des outils de compression d’images et à choisir celui qui répond le mieux à vos besoins.
Quels sont les meilleurs outils pour compresser vos images ?
Il existe une grande variété d’outils de compression qui rendront vos images plus légères et plus rapides à télécharger !
Voici ceux les plus couramment utilisées :
- Imagify.io: cet outil vous permet de compresser vos fichiers JPEG, GIF et PNG depuis l’application en ligne, l’API ou directement depuis WordPress
- Squoosh.app: le nouvel outil en ligne de Google, pour compresser le images JPEG, PNG et SVG, supporte aussi les fichiers MozJPEG, OptiPNG et WebP
- TinyJPG | TinyPNG : outil en ligne pour réduire la taille de vos images JPEG et PNG
- Compressor.io: outil en ligne pour compresser les fichiers JPEG, PNG, GIF et SVG
- Kraken: outil en ligne supportant les formats JPEG, PNG, GIF, GIF, GIF animé et SVG ; disponible aussi en plugins WordPress et Magento
- ImageOptimizer: outil en ligne simple pour compresser et redimensionner vos images
- Optimizilla: outil en ligne simple pour compresser les fichiers JPEG et PNG
- ImageOptim: outil en ligne disponible également sous Mac, qui compresse les images et supprime les métadonnées
- Crush Pics: application Shopify pour réduire la taille des fichiers d’images et mettre de l’ordre dans leurs noms de fichiers pour améliorer le référencement
- Minifier: application Shopify pour compresser les images et générer des balises alt-tags et des titres d’images pour le référencement
- GIMP Save for Web: application Window à télécharger et installer sur votre ordinateur pour optimiser les images JPEG, GIF et PNG.
Tout ce que vous devez savoir sur l’optimisation des images dans WordPress
Dans cet article, vous avez appris :
- Ce que comprimer une image pour le web signifie vraiment
- Qu’entendons-nous par poids idéal pour une image et comment le mesurer ?
- Comment identifier la taille d’une image
- Quelles sont les étapes à suivre pour réduire la taille du fichier d’une image ?
- Quels outils peuvent être utilisés pour compresser les images
Maintenant que vous savez tout sur la compression d’images, il est temps d’aller de l’avant et d’apprendre d’autres trucs sur l’optimisation des images :
- Comment réduire la taille du fichier image ?
- Compresser une image en ligne
- LazyLoading de vos images
- Optimisation d’images avec Imagify : qu’est-ce que c’est et comment l’utiliser ?
