{"id":1363754,"date":"2019-07-18T11:53:01","date_gmt":"2019-07-18T09:53:01","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=1363754"},"modified":"2019-07-29T09:56:18","modified_gmt":"2019-07-29T07:56:18","slug":"compresser-images-pour-le-web","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/fr\/blog\/compresser-images-pour-le-web\/","title":{"rendered":"Quand moins c’est (vraiment) plus : comment compresser vos images et r\u00e9duire leur taille de fichier"},"content":{"rendered":"

L’optimisation d’image est un art que vous ne pouvez pas refuser de conna\u00eetre si vous voulez que votre site Web soit aussi rapide que possible et donne \u00e0 vos lecteurs la meilleure exp\u00e9rience utilisateur. Comme tout peintre a besoin de conna\u00eetre les d\u00e9tails techniques de son travail (l’utilisation de la couleur, des styles et des supports artistiques), vous – en tant qu’artiste optimisateur d’images – devez \u00e9tudier vos images et comprendre leurs caract\u00e9ristiques de format, leur qualit\u00e9, leurs dimensions en pixels, etc. La bonne nouvelle, c’est qu’avec les bonnes techniques, vous pouvez r\u00e9duire consid\u00e9rablement la taille de vos images et rendre vos pages beaucoup plus rapides. 
<\/p>

Dans cet article, nous allons vous faire d\u00e9couvrir les secrets de la compression d’images : vous apprendrez comment d\u00e9terminer le \u00ab\u00a0bon poids\u00a0\u00bb de vos images et quels outils vous pouvez utiliser pour les compresser et r\u00e9duire leur taille.<\/p>

Que signifie vraiment compresser une image ?<\/h2>

Compresser une image pour le web, c’est r\u00e9duire sa taille de fichier : cela se fait en minimisant la taille en octets du fichier image sans aucune perte de qualit\u00e9.
<\/p>

En d’autres termes, lorsque vous compressez une image, vous r\u00e9duisez l’espace de stockage que le fichier image occupera : l’espace de stockage est mesur\u00e9 en kilo-octets (Ko) et m\u00e9gaoctets (Mo), o\u00f9 1 Mo = 1000 Ko.
<\/p>

Nous voulons tous que nos images soient nettes et de haute qualit\u00e9, mais il est important d’\u00e9quilibrer ce d\u00e9sir avec le temps n\u00e9cessaire pour que les images sur vos pages soient t\u00e9l\u00e9charg\u00e9es \u00e0 partir du navigateur.
<\/p>

Plus vos images seront l\u00e9g\u00e8res, plus vite vos pages seront t\u00e9l\u00e9charg\u00e9es : c’est une lutte constante entre faire plaisir \u00e0 vos utilisateurs -qui aiment lire votre contenu soutenu par de belles images- et rendre les robots de Google heureux !
<\/p>

Comment d\u00e9terminer le poids id\u00e9al d’une image ?<\/h3>

Il n’y a pas de r\u00e9ponse unique \u00e0 cette question : la taille id\u00e9ale d’un fichier image est celle qui vous permet d’avoir l’image la plus l\u00e9g\u00e8re possible tout en pr\u00e9servant la qualit\u00e9 n\u00e9cessaire \u00e0 une excellente performance sur la page.
<\/p>

Pour trouver votre r\u00e9ponse \u00e0 la question, essayez de voir le sujet sous un angle diff\u00e9rent et posez-vous plut\u00f4t la question :
<\/p>

Ai-je vraiment besoin d’une image ici ?<\/em><\/p>

Une image est-elle n\u00e9cessaire pour obtenir l’effet sp\u00e9cial que je recherche sur cette page ?<\/em><\/p>

Puis-je \u00e9pargner de la bande passante \u00e0 mes utilisateurs et les emp\u00eacher de t\u00e9l\u00e9charger des octets inutiles \u00e0 partir du navigateur ?<\/em>
<\/p>

Parfois, un design efficace et un contenu bien format\u00e9 peuvent tout \u00e0 faire suffire. Chaque fois que vous pouvez supprimer une ressource image, et \u00e9viter sa charge (en termes de HTML, CSS ou JavaScript), vous appliquez d\u00e9j\u00e0 la r\u00e8gle d’or d’une bonne strat\u00e9gie d’optimisation d’image : moins c’est plus.
<\/p>

Cela dit, placer une image qui transmet votre message le plus efficacement est une situation gagnant-gagnant pour votre strat\u00e9gie de marketing de contenu.
<\/p>

Vos images doivent \u00eatre nettes et en haute r\u00e9solution. Malheureusement, la plupart du temps, les images haute r\u00e9solution et nettes ont tendance \u00e0 avoir des tailles de fichiers \u00e9normes. 
<\/p>

Lorsque vous t\u00e9l\u00e9chargez une image haute r\u00e9solution sur vos pages, vous devez toujours garder \u00e0 l’esprit l’\u00e9quation :
<\/p>

Grande taille de fichier = temps de chargement plus lent = taux de rebond plus \u00e9lev\u00e9 et clients qui s’en vont de votre site.<\/em>
<\/p>

Quels outils peuvent \u00eatre utilis\u00e9s pour identifier la taille d’une image ?<\/h3>

Il existe plusieurs outils gratuits qui vous aideront \u00e0 identifier les images particuli\u00e8rement grandes sur vos pages.
<\/p>

Vous pouvez effectuer un test de vitesse avec GTMetrix<\/a> ou Dareboost<\/a> : tous deux vous indiqueront la taille totale de la page et, dans leur outil, vous indiqueront quels fichiers sont les plus lourds :
<\/p>

\"\"\/<\/figure>

<\/p>

M\u00eame votre navigateur est un alli\u00e9 utile dans cette qu\u00eate de la meilleure taille d’image : par exemple, sur Google Chrome, vous pouvez ouvrir son Dev Tools et faire ce qui suit :
<\/p>