How To Compress Your Pictures

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 :

(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 :

Il existe différents outils permettant de supprimer ces données.

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 :

Tout ce que vous devez savoir sur l’optimisation des images dans WordPress

Dans cet article, vous avez appris :

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 :

Avatar de l’auteur

Alice is a content writer with strong experience in international customer service and empathic communication. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps. You can follow @Alice_Ridice on Twitter.

0 commentaires

Obtenez un site plus rapide en quelques clics

Installation en 3 minutes chrono

Achetez WP Rocket Qu’attendez-vous?

{"cart_token":"","hash":"","cart_data":""}