{"id":20577,"date":"2018-08-22T01:24:05","date_gmt":"2018-08-22T01:24:05","guid":{"rendered":"https:\/\/kinqsta.com\/?p=4337"},"modified":"2023-10-27T10:45:49","modified_gmt":"2023-10-27T09:45:49","slug":"optimiser-les-images-pour-le-web","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/","title":{"rendered":"Comment optimiser les images pour le Web et la performance"},"content":{"rendered":"<p>Faites-nous confiance, vous ne voulez pas que Google d\u00e9teste votre site Web. Heureusement, vous pouvez r\u00e9duire la taille de vos images pour am\u00e9liorer les performances de votre site Web.<\/p>\n<p>Un probl\u00e8me avec la r\u00e9duction de leur taille est que les modifications r\u00e9duisent souvent leur qualit\u00e9 (ce qui peut \u00e0 son tour faire que le visiteur d\u00e9teste votre site Web). Ce n&rsquo;est pas une mauvaise chose tant que vous ne les rendez pas laides.<\/p>\n<p>Il y a quelques astuces et techniques qui vous permettent de r\u00e9duire la taille de vos images et de les garder assez jolies pour les afficher fi\u00e8rement sur votre site Web.<\/p>\n<p>Regardons donc comment r\u00e9duire la taille de vos images sans les rendre laides, et comment<strong> optimiser les images pour le web et la performance.<\/strong><\/p>\n\n<div  class=\"featured-snippet\" id=\"featuredSnippet\">\n    <div class=\"featured-snippet__content\">\n        <h2>Que signifie optimiser les images ?<\/h2>\n        <div><p>Les grosses images ralentissent vos pages Web, ce qui cr\u00e9e une exp\u00e9rience utilisateur moins qu&rsquo;optimale. L&rsquo;optimisation des images est le processus qui consiste \u00e0<b> diminuer la taille du fichier<\/b>, en utilisant un plugin ou un script, ce qui acc\u00e9l\u00e8re le temps de chargement de la page. La compression avec ou sans perte sont deux m\u00e9thodes couramment utilis\u00e9es.<\/p>\n<\/div>\n    <\/div>\n    <div class=\"featured-snippet__footer\">\n        <div class=\"arrow-down\"><\/div>\n        <div class=\"featured-snippet__footer--content row nocol middle-xs between-xs reverse\">\n            <div style=\"margin-left: auto; position: relative; top: -1px\" class=\"row nocol middle-xs\">\n                <div class=\"color--mediumGray\" style=\"font-size: 14px; vertical-align: middle;\">\n                    <svg  class=\"icon icon--logo display--block\" aria-hidden=\"true\" focusable=\"false\"><use xlink:href=\"https:\/\/kinqsta.com\/fr\/wp-content\/themes\/kinsta\/dist\/sprite.svg?v=e8af2143e3b8bceb5561b327e81ec085#logo\" \/><\/svg>                <\/div>\n                <div class=\"text--bold color--mediumGray\" style=\"padding-left: 3px;\">Support<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p><strong>Consultez notre <a href=\"https:\/\/www.youtube.com\/watch?v=rMKI-fLBTfM\">guide vid\u00e9o<\/a> sur l&rsquo;optimisation des images pour le SEO<\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=rMKI-fLBTfM\"><\/kinsta-video>\n<h2><a id=\"benefits-of-formatting-images\"><\/a> Les avantages de l\u2019optimisation de vos images<\/h2>\n<p>Tout d&rsquo;abord, pourquoi avez-vous besoin d\u2019optimiser vos images ? Quels sont les avantages ? Il y a de nombreux avantages \u00e0 optimiser vos images pour la performance. Selon <a href=\"https:\/\/httparchive.org\/reports\/page-weight\">HTTP Archive<\/a>, les<strong> images repr\u00e9sentent en moyenne 21% du poids total d&rsquo;une page web.<\/strong> Ainsi, lorsqu&rsquo;il s&rsquo;agit <a href=\"https:\/\/kinqsta.com\/fr\/apprendre\/accelerer-wordpress\/\">d&rsquo;optimiser votre site<\/a>, apr\u00e9s le contenu video, les images sont de loin le premier endroit o\u00f9 vous devriez commencer !<\/p>\n<p>C&rsquo;est plus important que les scripts et les polices. Et ironiquement, un bon flux de travail d&rsquo;optimisation d&rsquo;image est l&rsquo;une des choses les plus faciles \u00e0 mettre en \u0153uvre, mais beaucoup de propri\u00e9taires de sites Web n\u00e9gligent cela.<\/p>\n<figure id=\"attachment_35961\" aria-describedby=\"caption-attachment-35961\" style=\"width: 1503px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-35961\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2018\/11\/average-bytes-per-page-1.png\" alt=\"Nombre moyen d'octets par page (KB)\" width=\"1503\" height=\"1385\" data-must_clone=\"true\"><figcaption id=\"caption-attachment-35961\" class=\"wp-caption-text\">Nombre moyen d&rsquo;octets par page (KB)<\/figcaption><\/figure>\n<p>Voici un aper\u00e7u des principaux avantages :<\/p>\n<ul>\n<li>Cela am\u00e9liorera votre vitesse de chargement des pages (voir notre \u00e9tude de cas ci-dessous pour savoir dans quelle mesure cela affecte votre vitesse).<span class=\"Apple-converted-space\">\u00a0 <\/span>Si votre page prend trop de temps \u00e0 charger, vos visiteurs pourraient se fatiguer d&rsquo;attendre et passer \u00e0 autre chose. Pour plus d&rsquo;informations sur l&rsquo;optimisation du temps de chargement de vos pages, consultez notre <a href=\"https:\/\/kinqsta.com\/fr\/apprendre\/vitesse-de-site\/\" target=\"_blank\" rel=\"noopener noreferrer\">guide d\u00e9taill\u00e9 sur l&rsquo;optimisation de la vitesse des pages<\/a>.<\/li>\n<li>Combin\u00e9 avec une <a href=\"https:\/\/kinqsta.com\/fr\/blog\/meilleurs-plugins-wordpress-seo\/\">excellente extension SEO WordPress<\/a>, cela am\u00e9liore votre <a href=\"https:\/\/kinqsta.com\/fr\/blog\/que-veut-dire-referencement-seo\/\">r\u00e9f\u00e9rencement<\/a>. Votre site sera mieux class\u00e9 dans les r\u00e9sultats des <a href=\"https:\/\/kinqsta.com\/fr\/blog\/moteurs-recherche-alternatifs\/\">moteurs de recherche<\/a>. Les gros fichiers ralentissent votre site et les moteurs de recherche d\u00e9testent les sites lents. Google est \u00e9galement susceptible de crawler et d&rsquo;indexer vos images plus rapidement pour la recherche d&rsquo;images Google. Curieux de savoir quel pourcentage de votre trafic provient de la recherche d&rsquo;images Google ? Vous pouvez utiliser un segment <a href=\"https:\/\/kinqsta.com\/fr\/blog\/google-analytics-wordpress\/\">Google Analytics WordPress<\/a> plugin pour <a href=\"https:\/\/passion.digital\/blog\/how-to-check-image-traffic-in-ga\/\" target=\"_blank\" rel=\"noopener noreferrer\">v\u00e9rifier le trafic de recherche d&rsquo;images Google<\/a>.<\/li>\n<li>La cr\u00e9ation de sauvegardes sera plus rapide.<\/li>\n<li>Les fichiers d&rsquo;images de petite taille utilisent moins de bande passante. Les r\u00e9seaux et les navigateurs appr\u00e9cieront.<\/li>\n<li>Requiert\u00a0<a href=\"https:\/\/kinqsta.com\/fr\/blog\/utilisation-espace-disque-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">moins d&rsquo;espace de stockage sur votre serveur<\/a> (cela d\u00e9pend du nombre de vignettes que vous optimisez).<\/li>\n<\/ul>\n\n<p>En tant que client de Kinsta, vous pouvez b\u00e9n\u00e9ficier gratuitement de l&rsquo;optimisation des images en activant l&rsquo;optimisation automatique des images en quelques clics. Nous y reviendrons plus en d\u00e9tail ci-dessous.<\/p>\n<h2><a id=\"how-to-optimize-images\"><\/a>Comment optimiser les images pour le Web et la performance ?<\/h2>\n<p>Le but premier de l\u2019optimisation de vos images est de trouver l&rsquo;<strong>\u00e9quilibre entre la taille de fichier la plus petite et une qualit\u00e9 acceptable.<\/strong><\/p>\n<p>Il y a plus d&rsquo;une fa\u00e7on d&rsquo;effectuer presque toutes ces optimisations. L&rsquo;une des fa\u00e7ons les plus populaires est de simplement les compresser avant de les t\u00e9l\u00e9charger vers <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-ce-que-wordpress\/\">WordPress<\/a>. Habituellement, cela peut \u00eatre fait dans un outil comme Adobe Photoshop ou Affinity Photo. Certaines de ces t\u00e2ches peuvent \u00e9galement \u00eatre effectu\u00e9es \u00e0 l&rsquo;aide d\u2019extensions, dont nous parlerons plus loin.<\/p>\n\n<p>Les deux choses principales \u00e0 consid\u00e9rer sont le<strong> format de fichier<\/strong> et le<strong> type de compression <\/strong>que vous utilisez. En choisissant la bonne combinaison de format de fichier et de type de compression, vous pouvez r\u00e9duire la taille de votre image jusqu&rsquo;\u00e0 5 fois. Vous devrez exp\u00e9rimenter avec chaque format d&rsquo;image ou de fichier pour voir ce qui fonctionne le mieux.<\/p>\n<h3 id=\"choose-the-right-file-format\">1. Choisir le bon format de fichier<\/h3>\n<p>Avant de commencer \u00e0 modifier vos images, assurez-vous d&rsquo;avoir choisi <a href=\"https:\/\/kinqsta.com\/fr\/blog\/types-fichier-image\/\">le meilleur type de fichier<\/a>. Il existe plusieurs types de fichiers que vous pouvez utiliser :<\/p>\n<ul>\n<li><strong>PNG<\/strong> &#8211; produit des images de meilleure qualit\u00e9, mais aussi des fichiers de plus grande taille. Il a \u00e9t\u00e9 cr\u00e9\u00e9 comme un format d&rsquo;image lossless (sans perte), bien qu&rsquo;il puisse aussi \u00eatre Lossy.<\/li>\n<li><strong>JPEG<\/strong> &#8211; utilise l&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/blog\/compression-avec-perte\/\">optimisation lossy ou lossless<\/a> (avec ou sans perte). Vous pouvez ajuster le niveau de qualit\u00e9 pour un bon \u00e9quilibre entre la qualit\u00e9 et la taille du fichier.<\/li>\n<li><strong>GIF<\/strong> &#8211; n&rsquo;utilise que 256 couleurs. C&rsquo;est le meilleur choix pour les images anim\u00e9es. Il n&rsquo;utilise que la compression lossless.<\/li>\n<\/ul>\n<p>Il y en a plusieurs autres, comme JPEG XR et <a href=\"https:\/\/kinqsta.com\/fr\/blog\/webp\/\">WebP<\/a>, mais ils ne sont pas universellement support\u00e9s par <a href=\"https:\/\/kinqsta.com\/fr\/parts-de-marche-des-navigateurs\/\">tous les navigateurs<\/a>. Id\u00e9alement, vous devriez utiliser JPEG (ou JPG) pour les images avec beaucoup de couleurs et PNG pour les images simples.<\/p>\n<p>(Lecture sugg\u00e9r\u00e9e : <a href=\"https:\/\/kinqsta.com\/fr\/blog\/jpg-vs-jpeg\/\">JPG vs JPEG : Comprendre le format de fichier image le plus courant<\/a>)<\/p>\n<h3 id=\"compression-quality-vs-size\">2. Qualit\u00e9 de compression par rapport \u00e0 la taille<\/h3>\n<p>Voici un exemple de ce qui peut arriver si vous compressez trop une image. Le premier exemple est l&rsquo;utilisation d&rsquo;un taux de compression tr\u00e8s faible, ce qui permet d&rsquo;obtenir la meilleure qualit\u00e9 (mais avec une taille de fichier plus grande). Le second est l&rsquo;utilisation d&rsquo;un taux de compression tr\u00e8s \u00e9lev\u00e9, ce qui donne une image de tr\u00e8s mauvaise qualit\u00e9 (mais avec une taille de fichier plus petite). Remarque : L&rsquo;image originale intacte est de 2,06 Mo.<\/p>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/faible-compression-haute-qualite.jpg.jpg\" alt=\"Faible compression (haute qualit\u00e9) JPG - 590 KB\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Faible compression (haute qualit\u00e9) JPG &#8211; 590 KB<\/figcaption><\/figure>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/haute-compression-basse-qualite.jpg.jpg\" alt=\"Haute compression (basse qualit\u00e9) JPG - 68 KB\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Haute compression (basse qualit\u00e9) JPG &#8211; 68 KB<\/figcaption><\/figure>\n<p>Comme vous pouvez le voir, la premi\u00e8re image ci-dessus est de 590 KB. C&rsquo;est assez grand pour une photo ! Il est g\u00e9n\u00e9ralement pr\u00e9f\u00e9rable que le poids total d&rsquo;une page Web soit inf\u00e9rieur \u00e0 1 ou 2 Mo. 590 KB serait d\u00e9j\u00e0 un quart de ce chiffre. La deuxi\u00e8me image est \u00e9videmment horrible, mais elle n&rsquo;est que de 68 Ko. Ce que vous devez faire est de trouver un juste milieu entre votre taux de compression (qualit\u00e9) et la taille du fichier.<\/p>\n<p>Nous avons donc repris l&rsquo;image \u00e0 un taux de compression moyen et comme vous pouvez le voir ci-dessous, la qualit\u00e9 est bonne maintenant et la taille du fichier est de 151 Ko, ce qui est acceptable pour une photo haute r\u00e9solution. C&rsquo;est presque 4x plus petit que la photo originale avec une faible compression. En g\u00e9n\u00e9ral, les images plus simples comme les PNG devraient \u00eatre inf\u00e9rieures \u00e0 100 Ko ou moins pour obtenir les meilleures performances.<\/p>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/moyenne-compression-grande-qualite.jpg.jpg\" alt=\"Compression moyenne (grande qualit\u00e9) JPG - 151 KB\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Compression moyenne (grande qualit\u00e9) JPG &#8211; 151 KB<\/figcaption><\/figure>\n<h3 id=\"lossy-vs-lossless-optimization\">3. Comprendre l&rsquo;optimisation avec ou sans perte<\/h3>\n<p>Il est \u00e9galement important de comprendre qu&rsquo;il existe deux types de compression que vous pouvez utiliser : <a href=\"https:\/\/kinqsta.com\/fr\/blog\/compression-avec-ou-sans-perte\/\">lossy et lossless<\/a>.<\/p>\n<p><strong>Lossy<\/strong> <strong>:<\/strong> Il s&rsquo;agit d&rsquo;un filtre qui \u00e9limine certaines donn\u00e9es. Cela d\u00e9gradera l&rsquo;image, vous devrez donc faire attention \u00e0 la r\u00e9duction de l&rsquo;image. La taille du fichier peut \u00eatre r\u00e9duite d&rsquo;une grande quantit\u00e9. Vous pouvez utiliser des outils tels que Adobe Photoshop, Affinity Photo ou d&rsquo;autres \u00e9diteurs d&rsquo;images pour ajuster les param\u00e8tres de qualit\u00e9 d&rsquo;une image. L&rsquo;exemple que nous avons utilis\u00e9 ci-dessus est l&rsquo;utilisation de la <a href=\"https:\/\/kinqsta.com\/fr\/blog\/compression-avec-perte\/\">compression lossy<\/a>.<\/p>\n<p><strong>Lossless :<\/strong> Il s&rsquo;agit d&rsquo;un filtre qui compresse les donn\u00e9es. Cela ne r\u00e9duit pas la qualit\u00e9, mais il faudra que les images soient d\u00e9compress\u00e9es avant qu&rsquo;elles puissent \u00eatre rendues. Vous pouvez effectuer une compression lossless sur votre bureau \u00e0 l&rsquo;aide d&rsquo;outils tels que Photoshop, <a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener noreferrer\">FileOptimizer<\/a> ou\u00a0<a href=\"https:\/\/imageoptim.com\/api\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a>.<\/p>\n<p>Il est pr\u00e9f\u00e9rable d&rsquo;exp\u00e9rimenter avec vos techniques de compression pour voir ce qui fonctionne le mieux pour chaque image ou format. Si vos outils ont l&rsquo;option, assurez-vous d&rsquo;enregistrer l&rsquo;image pour le web. C&rsquo;est une option pr\u00e9sente dans de nombreux \u00e9diteurs d&rsquo;images et qui vous donnera les ajustements de qualit\u00e9 pour que vous puissiez effectuer une compression optimale. Vous perdrez une partie de la qualit\u00e9, alors faites des exp\u00e9riences pour trouver le meilleur \u00e9quilibre possible sans rendre les images laides.<\/p>\n<h3 id=\"image-optimization-tools-and-programs\">4. Utiliser les outils et programmes d&rsquo;optimisation des images<\/h3>\n<p>Il existe de nombreux outils et programmes, gratuits ou non, que vous pouvez utiliser pour optimiser vos images.<\/p>\n<p>Certains vous donnent les outils pour effectuer vos propres optimisations et d&rsquo;autres font le travail pour vous. Nous sommes personnellement de grands fans d&rsquo;<a href=\"https:\/\/affinity.serif.com\/en-us\/photo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Affinity Photo,<\/a> car il est bon march\u00e9 et vous offre des fonctionnalit\u00e9s presque identiques \u00e0 celles d&rsquo;Adobe Photoshop.<\/p>\n<figure style=\"width: 2165px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/affinity-photo.jpg\" alt=\"Compression d'une photo avec Affinity Photo\" width=\"2165\" height=\"1354\"><figcaption class=\"wp-caption-text\">Compression d&rsquo;une photo avec Affinity Photo<\/figcaption><\/figure>\n<p>Voici quelques outils et programmes suppl\u00e9mentaires \u00e0 v\u00e9rifier :<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"https:\/\/www.adobe.com\/products\/photoshop.html\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Photoshop<\/a><\/li>\n<li><a href=\"https:\/\/www.gimp.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gimp<\/a><\/li>\n<li><a href=\"https:\/\/www.getpaint.net\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Paint.NET<\/a><\/li>\n<li><a href=\"http:\/\/www.lcdf.org\/gifsicle\/\" target=\"_blank\" rel=\"noopener noreferrer\">GIFsicle<\/a><\/li>\n<li><a href=\"https:\/\/www.jpegmini.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JPEG Mini<\/a><\/li>\n<li><a href=\"https:\/\/optipng.sourceforge.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">OptiPNG<\/a><\/li>\n<li><a href=\"https:\/\/pngquant.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">pngquant<\/a><\/li>\n<li><a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener noreferrer\">FileOptimizer<\/a><\/li>\n<li><a href=\"https:\/\/imageoptim.com\/api\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a><\/li>\n<li><a href=\"https:\/\/trimage.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Trimage<\/a><\/li>\n<li><a href=\"https:\/\/imageresizer.com\/image-compressor\" target=\"_blank\" rel=\"noopener noreferrer\">ImageResize.org<\/a><\/li>\n<li><a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/kinsta-cdn\/#image-optimization-1\">La fonctionnalit\u00e9 d&rsquo;optimisation des images de Kinsta<\/a><\/li>\n<\/ul>\n<p>N&rsquo;oubliez pas que vos m\u00e9thodes pour servir les images sont tout aussi importantes que la taille du fichier. De nombreux h\u00e9bergeurs premium comme Kinsta <a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/kinsta-cdn\/#kinstas-cdn\">mettent en \u0153uvre un CDN<\/a> pour livrer rapidement les images et autres fichiers aux utilisateurs. L&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/blog\/integration-cloudflare\/\">int\u00e9gration gratuite de Cloudflare<\/a> de Kinsta prot\u00e8ge \u00e9galement tous les sites sur la plateforme, ce qui la rend \u00e0 la fois rapide <em>et<\/em> sure.<\/p>\n<h3 id=\"resizing-images-to-scale\">5. Redimensionnement des images \u00e0 l&rsquo;\u00e9chell<\/h3>\n<p>Dans le pass\u00e9, il \u00e9tait tr\u00e8s important de t\u00e9l\u00e9charger des images \u00e0 l&rsquo;\u00e9chelle et de ne pas laisser le <a href=\"https:\/\/kinqsta.com\/fr\/blog\/stylisation-image-css\/\">CSS<\/a> les redimensionner. Cependant, ce n&rsquo;est plus aussi important puisque WordPress 4.4 supporte maintenant les <a href=\"https:\/\/make.wordpress.org\/core\/2015\/11\/10\/responsive-images-in-wordpress-4-4\/\" target=\"_blank\" rel=\"noopener noreferrer\">images responsives<\/a> (non mises \u00e0 l&rsquo;\u00e9chelle par CSS).<\/p>\n<p>Fondamentalement, WordPress cr\u00e9e automatiquement plusieurs tailles de chaque image t\u00e9l\u00e9charg\u00e9e dans la m\u00e9diath\u00e8que. En incluant les tailles disponibles d&rsquo;une image dans un attribut <code>srcset<\/code>\u00a0les navigateurs peuvent maintenant choisir de t\u00e9l\u00e9charger la taille la plus appropri\u00e9e et ignorer les autres. Voyez un exemple de ce \u00e0 quoi ressemble votre code ci-dessous.<\/p>\n<div id class=\"wp-caption aligncenter\">\n<figure style=\"width: 1386px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"srcset responsive images example in code\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/05\/images-sensibles-srcset.png\" alt=\"Exemple d'images sensibles \u00e0 srcset dans le code\" width=\"1386\" height=\"302\"><figcaption class=\"wp-caption-text\">Exemple d&rsquo;images sensibles \u00e0 srcset dans le code<\/figcaption><\/figure>\n<\/div>\n<p>Ainsi, avec de plus en plus d&rsquo;\u00e9crans HiDPI de nos jours, il peut \u00eatre bon de trouver un juste milieu. Disons 2x ou 3x la taille de la colonne ou de la div de votre site Web, mais toujours inf\u00e9rieure \u00e0 la taille d&rsquo;origine. Le navigateur affichera le bon en fonction de la r\u00e9solution de l&rsquo;appareil.<\/p>\n<p>La m\u00e9diath\u00e8que WordPress <a href=\"https:\/\/kinqsta.com\/fr\/blog\/regenerer-miniatures\/\" target=\"_blank\" rel=\"noopener noreferrer\">cr\u00e9e des vignettes en fonction de vos param\u00e8tres<\/a>. Cependant, l&rsquo;originale est toujours conserv\u00e9e et intacte. Si vous voulez redimensionner vos images et \u00e9conomiser de l&rsquo;espace disque en n&rsquo;enregistrant pas l&rsquo;originale, vous pouvez utiliser une extension gratuite comme <a href=\"https:\/\/wordpress.org\/plugins\/imsanity\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imsanity<\/a>.<\/p>\n<figure style=\"width: 1626px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"WordPress media settings\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/05\/Parametres-des-medias.png\" alt=\"Param\u00e8tres des m\u00e9dias WordPress\" width=\"1626\" height=\"1314\"><figcaption class=\"wp-caption-text\">Param\u00e8tres des m\u00e9dias WordPress<\/figcaption><\/figure>\n<p>Imsanity vous permet de fixer une limite afin que toutes les images t\u00e9l\u00e9charg\u00e9es soient limit\u00e9es \u00e0 une taille raisonnable qui reste plus que suffisante pour les besoins d&rsquo;un site Web typique.<\/p>\n<p>Imsanity s&rsquo;accroche \u00e0 WordPress imm\u00e9diatement apr\u00e8s le t\u00e9l\u00e9chargement de l&rsquo;image, mais avant le traitement WordPress. Donc WordPress se comporte exactement de la m\u00eame fa\u00e7on, sauf que ce sera comme si le contributeur avait mis \u00e0 l&rsquo;\u00e9chelle son image \u00e0 une taille raisonnable avant le t\u00e9l\u00e9chargement.<\/p>\n<h4>Nettoyez votre m\u00e9diath\u00e8que<\/h4>\n<p>Si vous cherchez un outil pour \u00e9conomiser de l&rsquo;espace tout en nettoyant votre m\u00e9diath\u00e8que, vous pouvez utiliser <a href=\"https:\/\/wordpress.org\/plugins\/media-cleaner\/\">Media Cleaner<\/a> pour trouver les fichiers multim\u00e9dias inutilis\u00e9s. L&rsquo;extension analysera tous vos fichiers multim\u00e9dias et dressera la liste des fichiers inutilis\u00e9s dans le tableau de bord de Media Cleaner afin que vous puissiez les parcourir et les supprimer.<\/p>\n<p>Media Cleaner met en \u0153uvre un syst\u00e8me de corbeille intelligent : quand les fichiers sont supprim\u00e9s, ils sont d\u00e9plac\u00e9s vers un r\u00e9pertoire de corbeille. Ainsi, vous pouvez tester votre site web pendant un certain temps et vous assurer que tout va bien. S&rsquo;il manque un fichier ou une entr\u00e9e m\u00e9dia, vous pouvez facilement le restaurer d&rsquo;un clic ou simplement vider la corbeille si tout vous semble correct.<\/p>\n<h2><a id=\"image-optimization-wordpress-plugins\"><\/a>Extensions d&rsquo;optimisation d&rsquo;image que vous pouvez utiliser<\/h2>\n<p>Heureusement, avec WordPress, vous n&rsquo;avez pas \u00e0 faire toute l\u2019optimisation ou la compression \u00e0 la main. Vous pouvez utiliser des extensions pour faire au moins une partie du travail pour vous automatiquement.<\/p>\n<p>Il existe plusieurs extensions qui optimiseront automatiquement vos fichiers image au fur et \u00e0 mesure que vous les t\u00e9l\u00e9chargez. Elles optimiseront m\u00eame les images que vous avez d\u00e9j\u00e0 t\u00e9l\u00e9charg\u00e9es. C&rsquo;est une fonction pratique &#8211; surtout si vous avez d\u00e9j\u00e0 un site Web rempli d&rsquo;images. Voici quelques-unes des meilleures extensions pour optimiser vos images pour de meilleures performances.<\/p>\n<p>Il est toutefois important que vous ne vous reposiez pas uniquement sur les extensions elles-m\u00eames. Par exemple, vous ne devriez pas t\u00e9l\u00e9verser des images de 2 Mo dans votre m\u00e9diath\u00e8que WordPress. Cela peut entrainer une consommation rapide de l&rsquo;espace disque de votre h\u00e9bergeur.<\/p>\n<p>La meilleure m\u00e9thode consiste \u00e0 redimensionner rapidement l&rsquo;image dans un outil de modification de photos au pr\u00e9alable, puis \u00e0 la t\u00e9l\u00e9verser et \u00e0 utiliser l&rsquo;une des extensions suivantes pour la r\u00e9duire davantage.<\/p>\n<p>Cependant, avant de vous engager dans l&rsquo;un de ces outils ou extensions, vous devez v\u00e9rifier que votre <a href=\"https:\/\/kinqsta.com\/fr\/blog\/hebergement-infogere-axee-sur-agences\/\">h\u00e9bergeur web<\/a> ne propose pas d&rsquo;outils int\u00e9gr\u00e9s pour faire le travail \u00e0 votre place. Par exemple, les clients de Kinsta ont acc\u00e8s \u00e0 une <a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/kinsta-cdn\/#image-optimization-1\">fonctionnalit\u00e9 gratuite d&rsquo;optimisation des images<\/a> qui cr\u00e9e automatiquement des copies optimis\u00e9es de toutes les images WordPress, qui sont stock\u00e9es gratuitement. Le plus petit des deux fichiers d&rsquo;image est ensuite servi en utilisant le <a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/kinsta-cdn\/#kinstas-cdn\">CDN ultra-rapide de Kinsta<\/a> pour augmenter encore la vitesse. Les clients peuvent m\u00eame choisir entre la compression avec ou sans perte en fonction de leurs besoins.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"7\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3 id=\"imagify\">1. Imagify Image Optimizer<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/imagify-image-optimizer.jpg\" alt=\"Extension Imagify Image Optimizer\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">Extension Imagify Image Optimizer<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagify<\/a> est cr\u00e9\u00e9 par la m\u00eame \u00e9quipe qui a d\u00e9velopp\u00e9 WP Rocket, ce qui est probablement familier \u00e0 la plupart d&rsquo;entre vous. Il est compatible WooCommerce,\u00a0<a href=\"https:\/\/kinqsta.com\/fr\/blog\/extensions-wordpress-galerie-photo\/#nextgen-gallery\" target=\"_blank\" rel=\"noopener noreferrer\">NextGen Gallery<\/a> et WP Retina. Il dispose \u00e9galement d&rsquo;une fonction d&rsquo;optimisation en masse et vous pouvez choisir entre trois niveaux de compression diff\u00e9rents, normal, agressif et ultra. Il poss\u00e8de \u00e9galement une fonction de restauration, de sorte que si vous n&rsquo;\u00eates pas satisfait de la qualit\u00e9, vous pouvez restaurer et recompresser en un seul clic \u00e0 un niveau qui correspond mieux \u00e0 vos besoins. Il existe une version gratuite et une version premium. Vous \u00eates limit\u00e9 \u00e0 un quota de 25 Mo d&rsquo;images par mois avec un compte gratuit.<\/p>\n<p>Se d\u00e9barrasser de l&rsquo;image originale et redimensionner vos images plus grandes peut aussi se faire avec cette extension.<\/p>\n<figure style=\"width: 1554px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/05\/redimensionar-images.png\" alt=\"Redimensionner les images dans Imagify\" width=\"1554\" height=\"649\"><figcaption class=\"wp-caption-text\">Redimensionner les images dans Imagify<\/figcaption><\/figure>\n<p>Imagify<strong> compresse<\/strong> <strong>\u00e9galement les images sur leurs serveurs tiers<\/strong>, pas les v\u00f4tres, ce qui est tr\u00e8s important quand il s&rsquo;agit de performance. Imagify ne devrait pas ralentir votre site WordPress.<\/p>\n<h3 id=\"optimole\">2. Optimole<\/h3>\n<figure id=\"attachment_39491\" aria-describedby=\"caption-attachment-39491\" style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39491 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2017\/05\/optimole-1-1.jpg\" alt=\"Plugin Optimole\" width=\"1539\" height=\"495\" data-must_clone=\"true\"><\/a><figcaption id=\"caption-attachment-39491\" class=\"wp-caption-text\">Plugin Optimole<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimole<\/a> est un plugin d&rsquo;optimisation d&rsquo;image WordPress qui r\u00e9duit automatiquement la taille de vos images sans aucun travail de votre part. Il a un grand avantage quand il s&rsquo;agit de la vitesse de chargement de votre site car il est enti\u00e8rement bas\u00e9 sur les nuages et ne sert jamais des images qui sont plus grandes qu&rsquo;elles ne le devraient, c&rsquo;est-\u00e0-dire qu&rsquo;il affiche la taille d&rsquo;image parfaite pour la fen\u00eatre de visualisation du visiteur et son navigateur.<\/p>\n<p>De plus, le plugin fournit un chargement en lazyload et un remplacement d&rsquo;image efficace &#8211; il diminue la qualit\u00e9 de l&rsquo;image si le visiteur a une connexion Internet plus lente &#8211; ce qui le distingue du reste. Il d\u00e9tecte \u00e9galement automatiquement le navigateur de l&rsquo;utilisateur et sert le format <a href=\"https:\/\/kinqsta.com\/fr\/blog\/webp\/\">WebP<\/a> s&rsquo;il est pris en charge.<\/p>\n<p>Toutes les images compress\u00e9es par Optimole sont servies via un CDN rapide. Vous pouvez essayer Optimole gratuitement ou passer au plan Premium si vous avez besoin de plus de bande passante et d&rsquo;espace de traitement.<\/p>\n<h3 id=\"optimus\">3. Optimus Image Optimizer<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2015\/11\/optimus-image-optimizer.jpg\" alt=\"optimus image optimizer\" width=\"1349\" height=\"437\" data-must_clone=\"true\"><\/a><figcaption class=\"wp-caption-text\">Optimus Image Optimizer plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimus WordPress Image Optimizer<\/a> utilise la compression lossless pour optimiser vos images. Lossless signifie que vous ne verrez aucune perte de qualit\u00e9. Il supporte WooCoomerce et le multi-site et dispose d&rsquo;une fonction d&rsquo;optimisation de masse pour ceux qui ont d\u00e9j\u00e0 de grandes biblioth\u00e8ques de m\u00e9dias existantes. Il est \u00e9galement compatible avec l\u2019extension WP Retina WordPress. Il existe une version gratuite et premium. Dans la version Premium, vous payez une fois par an et vous pouvez compresser un nombre illimit\u00e9 d&rsquo;images. Si vous le combinez avec leur extension Cache Enabler, vous pouvez \u00e9galement <a href=\"https:\/\/kinqsta.com\/fr\/blog\/webp\/\">plonger dans les images WebP<\/a>, qui est un nouveau format d&rsquo;image l\u00e9ger de Google.<\/p>\n<h3 id=\"wp-smush\">4. WP Smush<\/h3>\n<figure style=\"width: 1637px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/wp-smush.png\" alt=\"Extension WP Smush\" width=\"1637\" height=\"528\"><\/a><figcaption class=\"wp-caption-text\">Extension WP Smush<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Smush<\/a> a une version gratuite et une version premium. Il r\u00e9duira l&rsquo;information cach\u00e9e des images pour r\u00e9duire la taille sans r\u00e9duire la qualit\u00e9. Il scanne les images et les r\u00e9duit au fur et \u00e0 mesure que vous les t\u00e9l\u00e9chargez sur votre site. Il scanne \u00e9galement les images que vous avez d\u00e9j\u00e0 t\u00e9l\u00e9charg\u00e9es et les r\u00e9duit \u00e9galement. Il \u00e9crasera en masse jusqu&rsquo;\u00e0 50 fichiers \u00e0 la fois. Vous pouvez \u00e9galement \u00e9craser manuellement si vous le souhaitez. Il \u00e9crasera les types d&rsquo;images JPEG, GIF et PNG. La taille des fichiers est limit\u00e9e \u00e0 1MB.<\/p>\n<ul>\n<li>Il est compatible avec certaines des extensions de biblioth\u00e8que m\u00e9dia les plus populaires telles que WP All Import et WPML.<\/li>\n<li>L&rsquo;optimisation des images se fait avec des techniques de compression lossless, ce qui permet de maintenir une qualit\u00e9 d&rsquo;image \u00e9lev\u00e9e.<\/li>\n<li>Peu importe dans quel r\u00e9pertoire vous enregistrez vos images. Smush les trouve et les compresse.<\/li>\n<li>Smush a une option pour r\u00e9gler automatiquement la largeur et la hauteur de toutes les images, de sorte que toutes vos images soient redimensionn\u00e9es dans des proportions identiques.<\/li>\n<\/ul>\n<h3 id=\"tinypng\">5. TinyPNG (aussi JPGs compress\u00e9s)<\/h3>\n<figure style=\"width: 1639px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/tinypng.png\" alt=\"Extension TinyPNG\" width=\"1639\" height=\"528\"><\/a><figcaption class=\"wp-caption-text\">Extension TinyPNG<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">TinyPNG<\/a> utilise les services TinyJPG et TinyPNG (le compte gratuit vous permet de compresser environ 100 images par mois) pour optimiser vos images JPG et PNG. Il compresse automatiquement les nouvelles images et compresse en vrac vos images existantes. Il convertira CMYK en RBG pour \u00e9conomiser de l&rsquo;espace. Il compresse les images JPEG jusqu&rsquo;\u00e0 60% et les images PNG jusqu&rsquo;\u00e0 80% sans perte visible de qualit\u00e9 d&rsquo;image. Il n&rsquo;a pas de limite de taille de fichier.<\/p>\n<h3 id=\"imagerecycle\">6. ImageRecycle<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/imagerecycle-pdf-image-compression\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/05\/imagerecycle-extension-optimisation-pdf.png\" alt=\"ImageRecycle - Extension d'optimisation d'images et de PDF\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">ImageRecycle &#8211; Extension d&rsquo;optimisation d&rsquo;images et de PDF<\/figcaption><\/figure>\n<p>L\u2019extension\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/imagerecycle-pdf-image-compression\/\" target=\"_blank\" rel=\"noopener noreferrer\">ImageRecyle<\/a> est un optimiseur automatique d&rsquo;images et de PDFs. Cette extension se concentre non seulement sur la compression d&rsquo;images mais aussi sur les PDFs. Une fonctionnalit\u00e9 tr\u00e8s pratique est la possibilit\u00e9 de d\u00e9finir la taille minimale du fichier pour la compression. Par exemple, si vous avez des images d&rsquo;une taille de 80 Ko, vous pouvez les exclure automatiquement de la compression. Cela garantit que les images et les fichiers ne sont jamais trop compress\u00e9s. Elle inclut \u00e9galement l&rsquo;optimisation en masse et le redimensionnement automatique des images. Note : Ils ont un essai gratuit de 15 jours, mais c&rsquo;est un service premium, et les images sont t\u00e9l\u00e9charg\u00e9es et compress\u00e9es \u00e0 l&rsquo;aide de leurs serveurs. Ils ne facturent pas par mois, mais plut\u00f4t par le nombre total d&rsquo;images compress\u00e9es, \u00e0 partir de 10 000 $ pour 10 000.<\/p>\n<h3>7. EWWW Image Optimizer<\/h3>\n<figure id=\"attachment_129416\" aria-describedby=\"caption-attachment-129416\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-129416 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2017\/05\/ewww-image-optimizer.jpg\" alt=\"EWWW Image Optimizer plugin\" width=\"1200\" height=\"389\"><figcaption id=\"caption-attachment-129416\" class=\"wp-caption-text\">EWWW Image Optimizer<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\">EWWW Image Optimizer<\/a> vous aide \u00e0 rendre vos images plus petites et votre site plus rapide avec moins de tracas. Sans limite de taille et avec beaucoup de flexibilit\u00e9 pour les utilisateurs avanc\u00e9s, vous pouvez utiliser les r\u00e9glages par d\u00e9faut ou personnaliser compl\u00e8tement l&rsquo;extension \u00e0 votre go\u00fbt.<\/p>\n<p>Le mode gratuit permet une <a href=\"https:\/\/kinqsta.com\/fr\/blog\/jpg-vs-jpeg\/\">compression JPG<\/a> et une conversion WebP illimit\u00e9es et est id\u00e9al pour les sites de loisirs ou les blogs qui d\u00e9butent. Tous les utilisateurs d&rsquo;EWWW IO peuvent utiliser l&rsquo;optimiseur group\u00e9 pour compresser leurs images existantes ou utiliser le mode liste de la m\u00e9diath\u00e8que pour choisir des images sp\u00e9cifiques \u00e0 compresser. Des r\u00e9pertoires suppl\u00e9mentaires peuvent \u00eatre analys\u00e9s pour s&rsquo;assurer que chaque image de votre site est correctement optimis\u00e9e.<\/p>\n<p>EWWW IO vous permet m\u00eame de convertir vos images dans des formats de nouvelle g\u00e9n\u00e9ration comme <a href=\"https:\/\/kinqsta.com\/fr\/blog\/webp\/\">WebP<\/a> ou de trouver le meilleur format pour une image gr\u00e2ce aux options de conversion multi-formats.<\/p>\n<p>L&rsquo;API premium Compress vous permet d&rsquo;\u00e9lever la compression \u00e0 un tout autre niveau sans sacrifier la qualit\u00e9 et en r\u00e9alisant des \u00e9conomies moyennes de 50 %. Elle d\u00e9bloque \u00e9galement la compression des PDF et inclut des sauvegardes d&rsquo;images pratiques de 30 jours. Avec le CDN Easy IO en option, les images sont automatiquement compress\u00e9es, mises \u00e0 l&rsquo;\u00e9chelle pour s&rsquo;adapter \u00e0 la taille de la page et du p\u00e9riph\u00e9rique, charg\u00e9es de mani\u00e8re diff\u00e9r\u00e9e et converties au format WebP de nouvelle g\u00e9n\u00e9ration.<\/p>\n<h2><a id=\"case-study\"><\/a>Optimiser les images pour l&rsquo;\u00e9tude de cas Web<\/h2>\n<p>Nous avons d\u00e9cid\u00e9 de faire notre propre \u00e9tude de cas et des tests pour vous montrer \u00e0 quel point l&rsquo;optimisation de vos images pour le web peut affecter la vitesse globale de votre site WordPress.<\/p>\n<h3>JPG non compress\u00e9s<\/h3>\n<p>Nous avons d&rsquo;abord t\u00e9l\u00e9charg\u00e9 6 JPGs non compress\u00e9s, tous d&rsquo;une taille sup\u00e9rieure \u00e0 1 Mo, sur notre site d&rsquo;essai.\u00a0Nous avons ensuite effectu\u00e9 5 tests \u00e0 travers Pingdom et avons pris la moyenne. Comme vous pouvez le voir dans le <a href=\"https:\/\/tools.pingdom.com\/#!\/dbKwjQ\/https:\/\/perfmatters.io\/uncompressed-jpg\/\" target=\"_blank\" rel=\"noopener noreferrer\">test de vitesse<\/a> ci-dessous, notre temps de chargement total \u00e9tait de 1,55 secondes et la taille totale des pages \u00e9tait de 14,7 Mo.<\/p>\n<figure style=\"width: 1693px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/test-de-vitesse-jpgs-non-compresses.png\" alt=\"Test de vitesse avec JPGs non compress\u00e9s\" width=\"1693\" height=\"535\"><figcaption class=\"wp-caption-text\">Test de vitesse avec JPGs non compress\u00e9s<\/figcaption><\/figure>\n<h3>JPG compress\u00e9s<\/h3>\n<p>Nous avons ensuite compress\u00e9 les JPGs \u00e0 l&rsquo;aide de l\u2019extension WordPress Imagify, en utilisant le param\u00e8tre \u00ab\u00a0agressif\u00a0\u00bb.\u00a0Nous avons ensuite effectu\u00e9 5 tests \u00e0 travers Pingdom et avons pris la moyenne. Comme vous pouvez le voir dans le <a href=\"https:\/\/tools.pingdom.com\/#!\/eHwxw9\/https:\/\/perfmatters.io\/compressed-jpg\/\" target=\"_blank\" rel=\"noopener noreferrer\">test de vitesse<\/a> ci-dessous, notre temps de chargement total a \u00e9t\u00e9 r\u00e9duit \u00e0 476 ms et la taille totale de la page a \u00e9t\u00e9 r\u00e9duite \u00e0 2,9 Mo. Le<strong> temps de chargement<\/strong><strong> total <\/strong><strong>a \u00e9t\u00e9 r\u00e9duit de 54,88 %<\/strong><strong> et la<\/strong><strong> taille des pages a \u00e9t\u00e9 r\u00e9duite de 80,27 %.<\/strong><\/p>\n<figure style=\"width: 1686px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/11\/test-de-vitesse-jpgs-compresses.png\" alt=\"Test de vitesse avec JPGs compress\u00e9s\" width=\"1686\" height=\"535\"><figcaption class=\"wp-caption-text\">Test de vitesse avec JPGs compress\u00e9s<\/figcaption><\/figure>\n<p>Il n&rsquo;y a presque aucune autre optimisation que vous pouvez faire sur votre site qui vous permettra de r\u00e9duire de plus de 50% les temps de chargement. C&rsquo;est pourquoi l&rsquo;optimisation d&rsquo;images est si importante, le processus ci-dessus a \u00e9t\u00e9 enti\u00e8rement automatis\u00e9 par l\u2019extension. Il s&rsquo;agit d&rsquo;une approche non interventionniste pour un site WordPress plus rapide.<\/p>\n<p>La seule autre optimisation dramatique que vous pourriez faire serait de changer d\u2019h\u00e9bergeur WordPress. De nombreux clients qui d\u00e9m\u00e9nagent \u00e0 <a href=\"https:\/\/kinqsta.com\/fr\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kinsta<\/a> voient leur vitesse augmenter de plus de 45%. Imaginez d\u00e9m\u00e9nager chez Kinsta et optimiser vos images !<\/p>\n<p>En optimisant vos images, qu&rsquo;il s&rsquo;agisse d&rsquo;un outil de retouche photo ou d&rsquo;une extension WordPress, vous pouvez \u00e9galement corriger l&rsquo;avertissement \u00ab\u00a0Optimize images\u00a0\u00bb que vous obtenez dans Google PageSpeed Insights (comme indiqu\u00e9 ci-dessous).<\/p>\n<figure style=\"width: 1898px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/05\/averttissement-optimize-images.png\" alt=\"Avertissement Optimize images PageSpeed Insights\" width=\"1898\" height=\"1211\"><figcaption class=\"wp-caption-text\">Avertissement Optimize images PageSpeed Insights<\/figcaption><\/figure>\n<p>Si vous avez d&rsquo;autres avertissements d&rsquo;optimisation provenant d&rsquo;outils de test de vitesse, n&rsquo;oubliez pas de consulter notre article sur <a href=\"https:\/\/kinqsta.com\/fr\/blog\/google-pagespeed-insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google PageSpeed Insights<\/a> et notre <a href=\"https:\/\/kinqsta.com\/fr\/blog\/test-vitesse-pingdom\/\" target=\"_blank\" rel=\"noopener noreferrer\">revue d\u00e9taill\u00e9e de Pingdom<\/a>.<\/p>\n<p><kinsta-video src=\"https:\/\/kinsta.wistia.com\/medias\/qvfucq5kz6?videoFoam=true&#038;videoWidth=640\"><\/kinsta-video><\/p>\n<p><strong>Nous avons pris nos connaissances sur la gestion efficace des sites web \u00e0 l&rsquo;\u00e9chelle, et les avons transform\u00e9es en un e-book et un cours vid\u00e9o. Cliquez pour t\u00e9l\u00e9charger <a href=\"https:\/\/kinqsta.com\/fr\/ebooks\/wordpress\/gerer-plusieurs-sites-wordpress\/?utm_campaign=how-to-speed-up-your-wordpress-site&#038;utm_source=blog-knowledgebase&#038;utm_medium=video\">le Guide de la gestion de plus de 60 sites WordPress<\/a> !<\/strong><\/p>\n<h2><a id=\"using-svgs\"><\/a>Utilisation des SVG : les avantages que vous devez connaitre<\/h2>\n<p>Une autre recommandation est d&rsquo;utiliser les <a href=\"https:\/\/kinqsta.com\/fr\/blog\/svg-wordpress\/\">fichiers SVG<\/a> avec vos autres images. SVG est un format vectoriel redimensionnable qui fonctionne parfaitement pour les logos, les ic\u00f4nes, le texte et les images simples. Voici quelques raisons pour lesquelles nous vous le conseillons :<\/p>\n<ul>\n<li>Les SVG sont automatiquement redimensionnables dans les navigateurs et les outils de retouche photo. C&rsquo;est le r\u00eave des webdesigners et des graphistes !<\/li>\n<li>Google indexe les SVGs, de la m\u00eame mani\u00e8re qu&rsquo;il le fait pour les <a href=\"https:\/\/kinqsta.com\/fr\/blog\/svg-vs-png\/\">PNGs<\/a> et les JPGs, vous n\u2019avez donc pas \u00e0 vous soucier du r\u00e9f\u00e9rencement.<\/li>\n<li>Les SVGs sont traditionnellement (pas toujours) plus petits en taille de fichier que les PNGs ou JPGs. Cela peut entra\u00eener des temps de chargement plus rapides.<\/li>\n<\/ul>\n<p>Genki a \u00e9crit un excellent article dans lequel il compare la taille de <a href=\"https:\/\/web.archive.org\/web\/20200729105713\/http:\/\/genkihagata.com\/blog\/svg-vs-flat-images.html\" target=\"_blank\" rel=\"noopener noreferrer\">SVG vs PNG vs JPEG<\/a>. Vous trouverez ci-dessous quelques extraits de ses tests dans lesquels il a compar\u00e9 les trois diff\u00e9rents types d&rsquo;images.<\/p>\n<h3>JPG (taille optimis\u00e9e : 81,4 Ko)<\/h3>\n<figure id class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/04\/JPG-taille.jpg\" alt=\"JPG taille\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">Image JPG<\/figcaption><\/figure>\n<h3>PNG (taille optimis\u00e9e : 85.1 Ko<\/h3>\n<figure id class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/04\/PNG-taille.png\" alt=\"PNG taille\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">Image PNG<\/figcaption><\/figure>\n<h3>SVG (taille optimis\u00e9e : 6,1 Ko)<\/h3>\n<figure id class=\"wp-caption aligncenter\">\n<p><figure style=\"width: 1280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/04\/svg-taille.png\" alt=\"SVG taille\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">Image SVG<\/figcaption><\/figure><\/figure>\n<p>Comme vous pouvez le voir ci-dessus, le SVG offre une diminution de la taille du fichier de 92,51% par rapport au JPG. Et par rapport \u00e0 la PNG, 92,83 %. Consultez notre tutoriel sur l&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/blog\/svg-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">utilisation des SVG sur votre site WordPress<\/a>.<\/p>\n<h2><a id=\"best-practices\"><\/a>Meilleures pratiques pour l&rsquo;optimisation des images pour le web<\/h2>\n<p>Voici quelques bonnes pratiques g\u00e9n\u00e9rales lorsqu&rsquo;il s&rsquo;agit d&rsquo;optimiser les images pour le web :<\/p>\n<ul>\n<li>Si vous utilisez une extension WordPress,<strong> utilisez une extension qui compresse et optimise les images \u00e0 l&rsquo;ext\u00e9rieur.<\/strong> sur leurs serveurs. Cela r\u00e9duit la charge de travail sur votre propre site.<\/li>\n<li>Utilisez des images vectorielles d\u00e8s que possible \u00e0 c\u00f4t\u00e9 de vos PNGs et JPGs.<\/li>\n<li><a href=\"https:\/\/kinqsta.com\/fr\/blog\/cdn-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Utilisez un CDN<\/a> pour servir vos images rapidement aux visiteurs du monde entier. Le CDN de Kinsta poss\u00e8de une <a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/kinsta-cdn\/#kinstas-cdn#code-minification-1\">fonction de minification de code<\/a> qui est int\u00e9gr\u00e9e directement dans le <a href=\"https:\/\/kinqsta.com\/fr\/mykinsta\/\">tableau de bord MyKinsta<\/a>. Cela permet aux <a href=\"https:\/\/kinqsta.com\/fr\/tarifs\/?plan=visits-business1\">clients de Kinsta<\/a> d&rsquo;activer facilement la minification automatique de CSS et JavaScript d&rsquo;un simple clic.<\/li>\n<li>Supprimez les donn\u00e9es d&rsquo;image inutiles.<\/li>\n<li>Supprimez l&rsquo;espace blanc et recr\u00e9ez-le en utilisant le CSS pour ajouter l\u2019espace.<\/li>\n<li>Utilisez les effets CSS3 autant que possible.<\/li>\n<li>Sauvegardez vos images dans les bonnes dimensions. Bien que, n&rsquo;oubliez pas que WordPress supporte maintenant les images <a href=\"https:\/\/kinqsta.com\/fr\/blog\/design-web-responsive\/\">responsives<\/a>, pour les servir sans les redimensionner avec CSS.<\/li>\n<li>Utilisez toujours le format de fichier .ico pour votre <a href=\"https:\/\/kinqsta.com\/fr\/blog\/favicon-wordpress\/\">favicon<\/a>.<\/li>\n<li>Utilisez des polices Web au lieu de placer du texte dans les images &#8211; elles sont plus belles lorsqu\u2019elles sont redimensionn\u00e9es et prennent moins d&rsquo;espace.<\/li>\n<li>N&rsquo;utilisez des images tram\u00e9es que pour des sc\u00e8nes avec beaucoup de formes et de d\u00e9tails.<\/li>\n<li>R\u00e9duisez la profondeur de bits \u00e0 une palette de couleurs plus petite.<\/li>\n<li><strong>Utilisez la compression lossy lorsque c&rsquo;est possible.<\/strong><\/li>\n<li>Testez pour trouver les meilleurs r\u00e9glages pour chaque format.<\/li>\n<li>Utilisez le GIF si vous avez besoin d&rsquo;animation (mais <a href=\"https:\/\/woorkup.com\/compress-animated-gif\/\" target=\"_blank\" rel=\"noopener noreferrer\">compressez vos GIFs anim\u00e9s<\/a>).<\/li>\n<li>Utilisez PNG si vous avez besoin de d\u00e9tails et de r\u00e9solutions \u00e9lev\u00e9es.<\/li>\n<li>Utilisez JPG pour les photos g\u00e9n\u00e9rales et les captures d&rsquo;\u00e9cran.<\/li>\n<li>Supprimez les m\u00e9tadonn\u00e9es d&rsquo;image inutiles.<\/li>\n<li>Automatisez le processus autant que possible.<\/li>\n<li>Dans certains cas, vous pouvez vouloir\u00a0<a href=\"https:\/\/kinqsta.com\/fr\/blog\/lazy-load-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">charger paresseusement les images<\/a> pour un rendu de premi\u00e8re page plus rapide.<\/li>\n<li>Enregistrez les images comme \u00ab\u00a0optimis\u00e9es pour le web\u00a0\u00bb dans des outils tels que Photoshop.<\/li>\n<li>Utilisez WebP dans Chrome pour servir des images plus petites.<\/li>\n<li>Utilisez la fonctionnalit\u00e9 int\u00e9gr\u00e9e d&rsquo;<a href=\"https:\/\/kinqsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/kinsta-cdn\/#image-optimization-1\">optimisation des images de Kinsta<\/a>.<\/li>\n<\/ul>\n\n<p>Une fois que vous avez optimist\u00e9 vos images pour une meilleure performance et suivi les meilleures pratiques, votre site sera plus aim\u00e9 par les moteurs de recherche, les navigateurs et les r\u00e9seaux, et se chargera plus rapidement pour vos lecteurs. Oh, et n&rsquo;oubliez pas de consulter notre tutoriel sur les <a href=\"https:\/\/kinqsta.com\/fr\/blog\/hotlinking\/\" target=\"_blank\" rel=\"noopener noreferrer\">hotlinking,<\/a> afin d&#8217;emp\u00eacher les gens de voler vos images et votre bande passante.<\/p>\n<p>Avez-vous format\u00e9 vos images pour une meilleure performance ? Les formatez-vous \u00e0 la main, utilisez-vous une extension, ou les deux ? Y a-t-il un autre outil ou une autre extension que vous recommanderiez ? Avez-vous quelque chose \u00e0 ajouter ? Faites-nous part de vos techniques et de vos meilleures pratiques dans les commentaires ci-dessous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Faites-nous confiance, vous ne voulez pas que Google d\u00e9teste votre site Web. Heureusement, vous pouvez r\u00e9duire la taille de vos images pour am\u00e9liorer les performances de &#8230;<\/p>\n","protected":false},"author":38,"featured_media":57463,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[46,33],"topic":[1041,1017,975],"class_list":["post-20577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress","topic-conception-site-web-wordpress","topic-conception-web","topic-optimisation-images"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment optimiser les images pour le Web et la performance<\/title>\n<meta name=\"description\" content=\"Les images sont souvent l&#039;\u00e9l\u00e9ment #1 responsable de la lenteur des temps de chargement des pages. Apprenez comment optimiser les images pour le web, ainsi que la performance sur votre site WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment optimiser les images pour le Web et la performance\" \/>\n<meta property=\"og:description\" content=\"Les images sont souvent l&#039;\u00e9l\u00e9ment #1 responsable de la lenteur des temps de chargement des pages. Apprenez comment optimiser les images pour le web, ainsi que la performance sur votre site WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-22T01:24:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-27T09:45:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Les images sont souvent l&#039;\u00e9l\u00e9ment #1 responsable de la lenteur des temps de chargement des pages. Apprenez comment optimiser les images pour le web, ainsi que la performance sur votre site WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Comment optimiser les images pour le Web et la performance\",\"datePublished\":\"2018-08-22T01:24:05+00:00\",\"dateModified\":\"2023-10-27T09:45:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\"},\"wordCount\":4930,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"Tutoriels sur la performance WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\",\"name\":\"Comment optimiser les images pour le Web et la performance\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg\",\"datePublished\":\"2018-08-22T01:24:05+00:00\",\"dateModified\":\"2023-10-27T09:45:49+00:00\",\"description\":\"Les images sont souvent l'\u00e9l\u00e9ment #1 responsable de la lenteur des temps de chargement des pages. Apprenez comment optimiser les images pour le web, ainsi que la performance sur votre site WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimisation des images\",\"item\":\"https:\/\/kinqsta.com\/fr\/sujets\/optimisation-images\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment optimiser les images pour le Web et la performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment optimiser les images pour le Web et la performance","description":"Les images sont souvent l'\u00e9l\u00e9ment #1 responsable de la lenteur des temps de chargement des pages. Apprenez comment optimiser les images pour le web, ainsi que la performance sur votre site WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment optimiser les images pour le Web et la performance","og_description":"Les images sont souvent l'\u00e9l\u00e9ment #1 responsable de la lenteur des temps de chargement des pages. Apprenez comment optimiser les images pour le web, ainsi que la performance sur votre site WordPress.","og_url":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2018-08-22T01:24:05+00:00","article_modified_time":"2023-10-27T09:45:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg","type":"image\/jpeg"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Les images sont souvent l'\u00e9l\u00e9ment #1 responsable de la lenteur des temps de chargement des pages. Apprenez comment optimiser les images pour le web, ainsi que la performance sur votre site WordPress.","twitter_image":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg","twitter_creator":"@brianleejackson","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Brian Jackson","Dur\u00e9e de lecture estim\u00e9e":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Comment optimiser les images pour le Web et la performance","datePublished":"2018-08-22T01:24:05+00:00","dateModified":"2023-10-27T09:45:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/"},"wordCount":4930,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg","keywords":["webperf","WordPress"],"articleSection":["Tutoriels sur la performance WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/","url":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/","name":"Comment optimiser les images pour le Web et la performance","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg","datePublished":"2018-08-22T01:24:05+00:00","dateModified":"2023-10-27T09:45:49+00:00","description":"Les images sont souvent l'\u00e9l\u00e9ment #1 responsable de la lenteur des temps de chargement des pages. Apprenez comment optimiser les images pour le web, ainsi que la performance sur votre site WordPress.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#primaryimage","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2018\/08\/how-to-optimize-images-for-web-and-performance.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Optimisation des images","item":"https:\/\/kinqsta.com\/fr\/sujets\/optimisation-images\/"},{"@type":"ListItem","position":3,"name":"Comment optimiser les images pour le Web et la performance"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/fr\/#website","url":"https:\/\/kinqsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinqsta.com\/fr\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/20577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/comments?post=20577"}],"version-history":[{"count":19,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/20577\/revisions"}],"predecessor-version":[{"id":73982,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/20577\/revisions\/73982"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/it"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/fr"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/se"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/20577\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media\/57463"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media?parent=20577"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/tags?post=20577"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/topic?post=20577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}