{"id":825,"date":"2019-11-05T18:07:25","date_gmt":"2019-11-05T18:07:25","guid":{"rendered":"https:\/\/www.ezoic.com\/fr-lang\/2019\/11\/05\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/"},"modified":"2019-11-05T18:07:25","modified_gmt":"2019-11-05T18:07:25","slug":"comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/","title":{"rendered":"Comment servir des images dans des formats next-gen en utilisant WordPress"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_67_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Sommaire<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a189e270eda0\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a189e270eda0\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/#Comment_servir_des_images_dans_des_formats_next-gen_en_utilisant_WordPress\" title=\"Comment servir des images dans des formats next-gen en utilisant WordPress\">Comment servir des images dans des formats next-gen en utilisant WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/#Regardez_mon_tutoriel_sur_le_service_dimages_next-gen_dans_WordPress_ci-dessous\" title=\"Regardez mon tutoriel sur le service d&#8217;images next-gen dans WordPress ci-dessous:\">Regardez mon tutoriel sur le service d&#8217;images next-gen dans WordPress ci-dessous:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/#Puis-je_servir_des_formats_dimage_de_nouvelle_generation_si_mon_site_utilise_des_JPG_ou_des_PNG\" title=\"Puis-je servir des formats d&#8217;image de nouvelle g\u00e9n\u00e9ration si mon site utilise des JPG ou des PNG ?\">Puis-je servir des formats d&#8217;image de nouvelle g\u00e9n\u00e9ration si mon site utilise des JPG ou des PNG ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/#1_Ajouter_le_plugin_pour_servir_les_formats_next-gen_et_les_formats_dimage_existants\" title=\"1. Ajouter le plugin pour servir les formats next-gen et les formats d&#8217;image existants\">1. Ajouter le plugin pour servir les formats next-gen et les formats d&#8217;image existants<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/#2_Servir_des_images_WebP_tout_en_gardant_tous_les_fichiers_dimages_existants_en_place\" title=\"2. Servir des images WebP tout en gardant tous les fichiers d&#8217;images existants en place\">2. Servir des images WebP tout en gardant tous les fichiers d&#8217;images existants en place<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/#Vous_servez_maintenant_les_formats_dimages_de_nouvelle_generation_des_visiteurs\" title=\"Vous servez maintenant les formats d&#8217;images de nouvelle g\u00e9n\u00e9ration des visiteurs\">Vous servez maintenant les formats d&#8217;images de nouvelle g\u00e9n\u00e9ration des visiteurs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/#Assurez-vous_que_les_images_de_la_prochaine_generation_sont_correctement\" title=\"Assurez-vous que les images de la prochaine g\u00e9n\u00e9ration sont correctement\">Assurez-vous que les images de la prochaine g\u00e9n\u00e9ration sont correctement<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/#Cela_permettra_de_se_debarrasser_de_%E2%80%9Cservir_des_images_dans_des_formats_next-gen%E2%80%9D_de_Pagespeed_Insights\" title=\"Cela permettra de se d\u00e9barrasser de &#8220;servir des images dans des formats next-gen&#8221; de Pagespeed Insights\">Cela permettra de se d\u00e9barrasser de &#8220;servir des images dans des formats next-gen&#8221; de Pagespeed Insights<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Comment_servir_des_images_dans_des_formats_next-gen_en_utilisant_WordPress\"><\/span>Comment servir des images dans des formats next-gen en utilisant WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si vous avez publi\u00e9 r\u00e9cemment un rapport Google Pagespeed Insights sur votre site Web, il est probable que vous ayez vu des images \u00ab servir des images dans des formats de nouvelle g\u00e9n\u00e9ration \u00bb comme recommandation. Les formats d&#8217;images de nouvelle g\u00e9n\u00e9ration sont des formats de fichiers qui comprennent souvent des informations de compression int\u00e9gr\u00e9es dans les navigateurs modernes qui permettent de charger les images du site Web plus rapidement. Alors, comment les servir sur votre site WordPress pour le rendre plus rapide?<\/p>\n<blockquote><p>Les formats d&#8217;images comme JPEG 2000, JPEG XR et WebP offrent souvent une meilleure compression que PNG ou JPEG, ce qui signifie des t\u00e9l\u00e9chargements plus rapides et une consommation de donn\u00e9es moindre. &#8211; <strong>Description par Google des formats d&#8217;image de nouvelle g\u00e9n\u00e9ration.<\/strong> <strong><br \/>\n  <em>(Vraiment utile, non?)<\/em><br \/>\n<\/strong><\/p><\/blockquote>\n<p>Si votre site utilise WordPress comme CMS, il est probable que vous avez la plupart de vos images enregistr\u00e9es dans votre section m\u00e9dias en tant que JPEGs, GIFs, et PNGs. Cela n&#8217;a pas \u00e0 changer pour servir des images dans des formats next-gen. En fait, de nombreux navigateurs ne peuvent pas charger correctement les formats next-gen, comme WebP, et exigent que le site soit en mesure de servir un type d&#8217;image standard, comme JPEG, si le navigateur ne prend pas en charge les formats d&#8217;image next-gen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6226 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/pagespeedinsights123-min-1024x721.png\" alt=\"vitesse du site web\" width=\"908\" height=\"639\"><\/p>\n<p>Alors, comment pouvez-vous servir des images next-gen sur WordPress si vous avez besoin de garder toutes vos images existantes dans les m\u00eames formats qu&#8217;ils sont maintenant? Pouvez-vous simplement t\u00e9l\u00e9charger un plugin qui fait tout cela pour vous?<\/p>\n<p><em><strong>Pas n\u00e9 cessairement, mais c&#8217;est presque aussi facile.<\/strong><\/em><\/p>\n<p>Les bonnes nouvelles sont que cela ne n\u00e9cessite pas de codage (sauf si vous voulez) et ne vous obligera pas \u00e0 remplacer manuellement les images existantes. Il ne peut pas \u00eatre fait en t\u00e9l\u00e9chargeant <em>un<\/em> plugin JUST; cependant, il ya deux plugins qui rendent ce projet tr\u00e8s facile \u00e0 faire.<\/p>\n<p>Ci-dessous, je vais vous montrer comment servir des images dans des formats next-gen en utilisant WordPress. Il rendra votre site plus rapide et \u00e9liminera la recommandation de Pagespeed Insights tout en am\u00e9liorant votre score global de vitesse de page.<\/p>\n<p><!--more--><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Regardez_mon_tutoriel_sur_le_service_dimages_next-gen_dans_WordPress_ci-dessous\"><\/span>Regardez mon tutoriel sur le service d&#8217;images next-gen dans WordPress ci-dessous:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/ZTPnk5wixis\" width=\"640\" height=\"385\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Puis-je_servir_des_formats_dimage_de_nouvelle_generation_si_mon_site_utilise_des_JPG_ou_des_PNG\"><\/span>Puis-je servir des formats d&#8217;image de nouvelle g\u00e9n\u00e9ration si mon site utilise des JPG ou des PNG ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Servir des images de nouvelle g\u00e9n\u00e9ration de la fa\u00e7on dont je vais vous montrer ne vous oblige pas \u00e0 remplacer ou modifier les fichiers d&#8217;image existants sur votre site Web. C&#8217;est g\u00e9n\u00e9ralement ce qui confond les webmasters et emp\u00eache de nombreux sites de servir correctement les formats d&#8217;image next-gen. La plupart des sites Web sont familiers avec les formats d&#8217;image populaires comme JPEG et PNG. Ces deux formats de fichiers peuvent encore \u00eatre utilis\u00e9s tout en servant aux visiteurs des formats d&#8217;image de nouvelle g\u00e9n\u00e9ration lorsqu&#8217;ils visitent votre site Web WordPress dans des navigateurs qui prennent en charge ces types de fichiers \u00e9mergents.<\/p>\n<p>Le tutoriel vid\u00e9o ci-dessus devrait vous guider \u00e0 travers tout ce que vous devez savoir, mais au cas o\u00f9 vous \u00eates comme moi et pr\u00e9f\u00e8rent lire les directions (ou sauter rapidement), j&#8217;ai cr\u00e9\u00e9 les instructions \u00e9tape par \u00e9tape pour servir des images next-gen sur les sites WordPress dans le texte ci-dessous .<\/p>\n<p><strong>d\u00e9menti:<\/strong> <em>Il existe de multiples fa\u00e7ons de servir des formats next-gen aux visiteurs \u00e0 l&#8217;int\u00e9rieur de WordPress; cependant, c&#8217;est l&#8217;un des moyens les plus faciles que j&#8217;ai vu test\u00e9 sur plusieurs sites Web. De plus, cette strat\u00e9gie n\u00e9cessite un codage nul et peut \u00eatre r\u00e9alis\u00e9e en environ 30 minutes.<\/em><\/p>\n<p><strong>Ce que vous aurez besoin de faire ceci:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/webp-express\/\" target=\"_blank\" rel=\"noopener\">WebP Express Plugin<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/#developers\" target=\"_blank\" rel=\"noopener\">Le Plugin ShortPixel<\/a><\/li>\n<li><a href=\"https:\/\/shortpixel.com\/free-sign-up\" target=\"_blank\" rel=\"noopener\">Un compte ShortPixel<\/a><\/li>\n<\/ul>\n<p><strong>Combien de temps cela prendra-t-il?<\/strong><\/p>\n<ul>\n<li>30 minutes ou moins \u00e0 mettre en place<\/li>\n<\/ul>\n<p><em>Il peut prendre une heure ou deux pour les images \u00e0 traiter en fonction de la taille de votre site Web, mais cela ne n\u00e9cessitera aucun effort de votre part.<\/em><\/p>\n<p><strong>Quel type d&#8217;images de nouvelle g\u00e9n\u00e9ration ce tutoriel montrera-t-il comment servir :<\/strong><\/p>\n<ul>\n<li>WebP (en)<\/li>\n<\/ul>\n<p><em>WebP est un format d&#8217;image opensource next-gen qui est fortement soutenu par Google et beaucoup d&#8217;autres. Il est pr\u00e9sent\u00e9 comme le format d&#8217;image next-gen le plus populaire pour le moment.<\/em><\/p>\n<h2><span class=\"ez-toc-section\" id=\"1_Ajouter_le_plugin_pour_servir_les_formats_next-gen_et_les_formats_dimage_existants\"><\/span>1. Ajouter le plugin pour servir les formats next-gen et les formats d&#8217;image existants<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Le plugin WebP Express est \u00e0 peu pr\u00e8s aussi facile qu&#8217;il obtient. Il ajoute une ligne de code tr\u00e8s simple \u00e0 votre site Web WordPress. Le code est bas\u00e9 sur le <a href=\"http:\/\/webpjs.appspot.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">blog de<\/a> ce d\u00e9veloppeur sur le service des images WebP correctement aux visiteurs quand ils sont dans les navigateurs pris en charge et de servir les images par d\u00e9faut de votre site Web (JPEG, etc) quand ils ne sont pas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6184 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/download-2019-04-09T160035.233-min-1024x158.png\" alt=\"servir webp format next-gen sur wordpress\" width=\"1024\" height=\"158\"><\/p>\n<p>Cela pourrait ne pas \u00eatre n\u00e9cessaire pour tout le monde la lecture de ce blog, mais pour de nombreux sites WordPress, il sera n\u00e9cessaire de s&#8217;assurer que WebP est servi correctement; tout en s&#8217;assurant que vos images existantes sont servies lorsque le visiteur ne peut pas rendre un format WebP.<\/p>\n<p>Tout ce que vous avez \u00e0 faire est de t\u00e9l\u00e9charger le plugin ou de recherche pour l&#8217;int\u00e9rieur de WordPress. Ensuite, il suffit d&#8217;activer le plugin et il aura servi son but. Pas besoin de configurer les param\u00e8tres.<\/p>\n<ol>\n<li>Aller \u00e0 plugins<\/li>\n<li>S\u00e9lectionnez &#8220;ajouter du nouveau&#8221;<\/li>\n<li>Recherche de &#8220;WebP Express&#8221;<\/li>\n<li>Cliquez sur Installer<\/li>\n<li>Cliquez sur Activer<\/li>\n<li>C&#8217;est fini !<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6189 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/webpexpress-min-1024x358.png\" alt=\"servir des images webp dans wordpress\" width=\"1024\" height=\"358\"><\/p>\n<p>Cela devrait prendre moins de 5 minutes et ne devrait pas causer de probl\u00e8mes.<\/p>\n<p>Il s&#8217;agit de l&#8217;\u00e9tape la plus facile et ne devrait pas causer de modifications \u00e0 votre site Web ou ses images.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Servir_des_images_WebP_tout_en_gardant_tous_les_fichiers_dimages_existants_en_place\"><\/span>2. Servir des images WebP tout en gardant tous les fichiers d&#8217;images existants en place<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Je pense que l&#8217;une des principales raisons pour lesquelles de nombreux \u00e9diteurs WordPress ne sont pas actuellement servir formats d&#8217;image next-gen, c&#8217;est parce qu&#8217;ils croient qu&#8217;ils devront remplacer toutes leurs images existantes ou les convertir manuellement en quelque sorte et sont inquiets de l&#8217;heure, l&#8217;effort, et la difficult\u00e9 \u00e0 le faire. Heureusement, lorsque les images de nouvelle g\u00e9n\u00e9ration sont impl\u00e9ment\u00e9es correctement sur le site WordPress d&#8217;un \u00e9diteur, il ne devrait pas \u00eatre n\u00e9cessaire de remplacer activement les fichiers multim\u00e9dias existants ou les formats d&#8217;image.<\/p>\n<p>Une des fa\u00e7ons les plus faciles de le faire est d&#8217;utiliser ShortPixel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6200 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/shortpixel-plugin-min-1024x363.png\" alt=\"servir des formats d'image next-gen en wordpress avec shortpixel\" width=\"1024\" height=\"363\"><\/p>\n<p>ShortPixel est une soci\u00e9t\u00e9 de compression d&#8217;images et d&#8217;optimisation d&#8217;image qui offre plusieurs types de technologies pour les webmasters. Dans notre cas, nous profiterons du Plugin d&#8217;optimisation d&#8217;image ShortPixel.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noopener\">T\u00e9l\u00e9chargez et installez le plugin ShorPixel<\/a>. Ou, trouver le plugin \u00e0 l&#8217;int\u00e9rieur WordPress, l&#8217;installer, puis l&#8217;activer.<\/p>\n<p>Avant de configurer le plugin ShortPixel, vous voudrez <a href=\"https:\/\/shortpixel.com\/free-sign-up\" target=\"_blank\" rel=\"noopener\">cr\u00e9er un compte ShortPixel gratuit<\/a>. Il est gratuit et ne n\u00e9cessite pas de carte de cr\u00e9dit; cependant, je recommande fortement un petit investissement pour obtenir encore plus de valeur de tout ce projet.<\/p>\n<p>Une fois que vous avez cr\u00e9\u00e9 un compte et que vous vous \u00eates connect\u00e9, tout ce que vous aurez besoin d&#8217;obtenir est la cl\u00e9 API de votre menu de compte.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6206 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/download-2019-04-09T165636.063-min-1024x469.png\" alt=\"acc\u00e9l\u00e9rer le site Web en utilisant l'optimisation de l'image\" width=\"897\" height=\"411\"><\/p>\n<p>Il vaut la peine d&#8217;examiner les plans pay\u00e9s si vous avez actuellement beaucoup d&#8217;images sur votre site qui sont trop grands, ou si vous avez beaucoup de PNGs sans transparence dans le fond saupoudr\u00e9 dans tous les messages de votre site et les pages. En outre, vous devrez peut-\u00eatre faire l&#8217;investissement minimum pour s\u00e9curiser toutes les fonctionnalit\u00e9s n\u00e9cessaires si vous avez un site qui est plus ancien et contient beaucoup d&#8217;images. Les cr\u00e9dits pay\u00e9s sont assez abordables et peuvent certainement vous aider \u00e0 compresser les images, m\u00eame si vous les avez <a href=\"https:\/\/blog.ezoic.com\/image-seo-tips-website-owners-digital-publishers\/\" target=\"_blank\" rel=\"noopener\">d\u00e9j\u00e0 redimensionn\u00e9es et les ont enregistr\u00e9es pour<\/a>une utilisation web appropri\u00e9e .<\/p>\n<p>L&#8217;option payante n&#8217;est pas requise pour servir les images comme WebP en utilisant ShortPixel; Bien que j&#8217;ai toujours utilis\u00e9 l&#8217;option payante lors de cette (vous devrez peut-\u00eatre faire un investissement minimum pour s\u00e9curiser toutes les fonctionnalit\u00e9s compl\u00e8tes).<\/p>\n<p><em>Dans l&#8217;avenir, je vais \u00e9crire quelques blogs plus sur ce qui peut \u00eatre fait avec les options pay\u00e9es au-del\u00e0 de la compression, mais pour l&#8217;instant, nous allons nous concentrer uniquement sur le service d&#8217;images next-gen sur notre site WordPress.<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6211 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/shortpixel123-min-1024x367.png\" alt=\"shortpixel pour les images\" width=\"1024\" height=\"367\"><\/p>\n<p><strong>Maintenant, il est temps de configurer notre plugin et commencer \u00e0 servir nos images WebP!<\/strong><\/p>\n<p>Une fois que vous avez un compte et avez install\u00e9 les deux plugins \u00e9num\u00e9r\u00e9s ci-dessus, nous pouvons configurer ShortPixel pour commencer \u00e0 servir tous les visiteurs dans les navigateurs pris en charge images de nouvelle g\u00e9n\u00e9ration &#8211; en particulier, WebP. Ensuite, il suffit de suivre ces \u00e9tapes \u00e0 l&#8217;int\u00e9rieur de l&#8217;administrateur WordPress:<\/p>\n<ol>\n<li>Aller \u00e0 &gt; Param\u00e8tres ShortPixel<\/li>\n<li>S\u00e9lectionnez l&#8217;onglet &#8220;G\u00e9n\u00e9ral&#8221;<\/li>\n<li>Entrez la cl\u00e9 API de votre compte dans le champ \u00ab Cl\u00e9 API \u00bb<\/li>\n<li>Cliquez sur \u00ab Enregistrer les changements \u00bb en bas<\/li>\n<li>Maintenant, cliquez sur l&#8217;onglet &#8220;Advanced&#8221; en haut<\/li>\n<li>Faites d\u00e9filer vers le bas \u00e0 la section des images WebP et s\u00e9lectionnez, &#8220;Aussi cr\u00e9er des versions WebP des images, gratuitement.&#8221;<\/li>\n<li>Ensuite, s\u00e9lectionnez &#8220;Deliver the WebP versions of the images in the front-end&#8221;<\/li>\n<li>Ensuite, vous aurez trois options diff\u00e9rentes&#8230;\n<ul>\n<li>Sauf ShortPixel vous montre que vous pouvez utiliser &#8220;Sans modifier le code de page (via .htatccess)&#8221;, je recommande d&#8217;utiliser le &#8220;Seulement via wordPress crochets&#8221; option.<\/li>\n<li>J&#8217;ai eu des probl\u00e8mes avec chaque configuration <strong><em>sauf<\/em><\/strong> &#8220;Seulement via des crochets WordPress&#8221; \u00e0 un moment donn\u00e9, il est donc ma principale recommandation pour la plupart des sites.<\/li>\n<\/ul>\n<\/li>\n<li>Faites d\u00e9filer vers le bas et s\u00e9lectionnez, &#8220;Enregistrer et aller au processus en vrac&#8221;<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6216 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/download-2019-04-10T101002.158-min-1024x201.png\" alt=\"servir des images webp aux visiteurs du site Sans se d\u00e9barrasser des jpegs ou des pngs\" width=\"1060\" height=\"208\"><\/p>\n<p><strong>On a fini.<\/strong><\/p>\n<p>L&#8217;\u00e9cran de traitement en vrac s&#8217;ex\u00e9cute d\u00e9sormais dans cette fen\u00eatre. Si vous avez pay\u00e9 des cr\u00e9dits ou s\u00e9lectionn\u00e9 d&#8217;autres options d&#8217;optimisation d&#8217;image en cours de route, il peut prendre un certain temps pour traiter toutes les images. Vous devrez laisser cette fen\u00eatre ouverte en arri\u00e8re-plan jusqu&#8217;\u00e0 ce qu&#8217;elle soit compl\u00e8te.<\/p>\n<p>Si vous avez un site qui a beaucoup d&#8217;images, il peut prendre quelques heures pour terminer. La barre de progression vous montrera \u00e0 quelle distance il est.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6221 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/download-2019-04-10T101428.692-1024x326.png\" alt=\"servir des images dans des formats next-gen pour des aper\u00e7us pagespeed\" width=\"971\" height=\"309\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vous_servez_maintenant_les_formats_dimages_de_nouvelle_generation_des_visiteurs\"><\/span>Vous servez maintenant les formats d&#8217;images de nouvelle g\u00e9n\u00e9ration des visiteurs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si vous avez suivi toutes ces \u00e9tapes, votre site Web WordPress devrait maintenant servir tous vos visiteurs WebP (format next-gen) images quand ils sont dans les navigateurs pris en charge. Si le navigateur du visiteur ne prend pas en charge WebP, alors ils doivent \u00eatre servis votre format JPEG, PNG, GIF existant. Toutes vos images existantes doivent \u00eatre enregistr\u00e9es l\u00e0 o\u00f9 elles se trouvaient dans la section M\u00e9dias de votre administrateur WordPress.<\/p>\n<p>Si vous \u00eates all\u00e9 de l&#8217;avant et utilis\u00e9 ShortPixel pour faire d&#8217;autres formes de compression d&#8217;image le long du chemin, tous les visiteurs de votre site Web devraient maintenant avoir des images charg\u00e9es de la mani\u00e8re la plus rapide, la plus optimale et SEO conviviale quoi qu&#8217;il arrive.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Assurez-vous_que_les_images_de_la_prochaine_generation_sont_correctement\"><\/span>Assurez-vous que les images de la prochaine g\u00e9n\u00e9ration sont correctement<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>1.) Effacer le cache de votre site Web et afficher votre site Web.<\/strong><\/p>\n<p>Assurons-nous d&#8217;abord que toutes les images apparaissent correctement. Si vous avez appliqu\u00e9 d&#8217;autres formes de compression \u00e0 vos images \u00e0 l&#8217;aide de ShortPixel, vous voudrez vous assurer que le th\u00e8me et les composants de mise en page de base de votre site Web n&#8217;ont pas \u00e9t\u00e9 modifi\u00e9s.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6231 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/download-2019-04-10T103019.852-min-1024x256.png\" alt=\"traitement d'image pour la g\u00e9n\u00e9ration suivante\" width=\"1024\" height=\"256\"><\/p>\n<p>Si une image ou un \u00e9l\u00e9ment particulier de votre th\u00e8me est un probl\u00e8me, vous pouvez entrer dans votre section m\u00e9dias et restaurer votre version originale de cette image. voir ci-dessus.<\/p>\n<p>Si tout semble encore vraiment fou pour une raison quelconque, vous pouvez toujours revenir \u00e0 l&#8217;\u00e9cran de traitement en vrac et restaurer toutes les images \u00e0 leur forme originale avec le clic d&#8217;un bouton. Vous pouvez toujours faire le t\u00e9l\u00e9chargement en vrac \u00e0 nouveau et utiliser les r\u00e8gles d&#8217;exclusion plugins pour emp\u00eacher certaines images qui peuvent \u00eatre n\u00e9cessaires pour le th\u00e8me de votre site d&#8217;\u00eatre trait\u00e9es.<\/p>\n<p><strong>2.) Utilisez un outil pour vous assurer que votre site semble bon dans tous les navigateurs<\/strong><\/p>\n<p>Le premier test est fait. Maintenant, vous devez comprendre si tous vos visiteurs voient votre site Web correctement.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6236 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/screenshots-min-1024x322.png\" alt=\"captures d'\u00e9cran pour plusieurs navigateurs\" width=\"1024\" height=\"322\"><\/p>\n<p>Pour une utilisation unique, je recommande d&#8217;utiliser <a href=\"https:\/\/crossbrowsertesting.com\/\" target=\"_blank\" rel=\"noopener\">crossbrowsertesting.com<\/a>. Vous pouvez utiliser l&#8217;outil pour tester automatiquement un grand nombre de navigateurs diff\u00e9rents, types d&#8217;appareils et versions \u00e0 la fois. Utilisez la fonction &#8221; Capture d&#8217;\u00e9cran &#8221; sur quelques pages pour vous assurer que vos pages affichent correctement les images dans les navigateurs et les appareils les plus couramment utilis\u00e9s par vos visiteurs.<\/p>\n<p>CrossBrowserTesting est un outil\/service payant, mais vous pouvez utiliser l&#8217;essai gratuit de 7 jours sans carte de cr\u00e9dit. Si vous voulez simplement vous assurer rapidement que le projet a \u00e9t\u00e9 un succ\u00e8s, vous pouvez cr\u00e9er un compte, utiliser l&#8217;essai pour faire des captures d&#8217;\u00e9cran, et \u00e9viter tout engagement \u00e0 long terme \u00e0 l&#8217;outil.<\/p>\n<p>Si vous \u00eates curieux de savoir quels navigateurs et appareils vos visiteurs utilisent couramment, vous pouvez utiliser Google Analytics pour v\u00e9rifier.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6241 aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/analytics-browsers-min.png\" alt=\"vitesse du site Web google\" width=\"851\" height=\"658\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cela_permettra_de_se_debarrasser_de_%E2%80%9Cservir_des_images_dans_des_formats_next-gen%E2%80%9D_de_Pagespeed_Insights\"><\/span>Cela permettra de se d\u00e9barrasser de &#8220;servir des images dans des formats next-gen&#8221; de Pagespeed Insights<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Maintenant, vous devriez \u00eatre en mesure d&#8217;ex\u00e9cuter votre site WordPress \u00e0 travers Google Pagespeed Insights une fois de plus et la recommandation de servir des images dans des formats next-gen devrait \u00eatre disparu.<\/p>\n<p>Qui plus est, cela aurait \u00e9galement d\u00fb se d\u00e9barrasser de la majeure partie des recommandations suppl\u00e9mentaires qui vous demandent de &#8220;coder efficacement des images&#8221;.<\/p>\n<p>La seule optimisation d&#8217;image que cela n&#8217;a peut-\u00eatre pas r\u00e9solue est <a href=\"https:\/\/blog.ezoic.com\/speed-lazy-loading-images-serving-next-gen-formats\/\" target=\"_blank\" rel=\"noopener\">&#8220;diff\u00e9rer des images hors \u00e9cran&#8221;. C&#8217;est quelque chose que nous avons abord\u00e9 plus en d\u00e9tail ici. <\/a><\/p>\n<p>Enfin, si vous \u00eates int\u00e9ress\u00e9 \u00e0 se d\u00e9barrasser de toutes les recommandations Pagespeed Insight sur CSS dans vos rapports, vous pouvez lire notre blog sur <a href=\"https:\/\/blog.ezoic.com\/how-to-optimize-critical-css-to-make-your-website-faster\/\" target=\"_blank\" rel=\"noopener\">l&#8217;optimisation de la livraison CSS ici<\/a>. La combinaison des informations ci-dessus avec nos blogs sur les images de chargement paresseux, et l&#8217;optimisation CSS devrait permettre \u00e0 tous les sites WordPress d&#8217;afficher un score de vitesse site beaucoup plus rapide \u00e0 l&#8217;int\u00e9rieur de l&#8217;outil populaire de Google.<\/p>\n<p>Si vous avez des probl\u00e8mes ou des questions sur ce processus s&#8217;il vous pla\u00eet les laisser ci-dessous. Je suis s\u00fbr que quelqu&#8217;un d&#8217;autre le long du chemin peut apprendre de toutes les id\u00e9es ou les d\u00e9fis que vous avez v\u00e9cu et je serais heureux de les aborder dans les commentaires pour les futurs lecteurs d&#8217;apprendre de.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comment servir des images dans des formats next-gen en utilisant WordPress Si vous avez publi\u00e9 r\u00e9cemment un rapport Google Pagespeed Insights sur votre site Web, il est probable que vous ayez vu des images \u00ab servir des images dans des formats de nouvelle g\u00e9n\u00e9ration \u00bb comme recommandation. Les formats d&#8217;images de nouvelle g\u00e9n\u00e9ration sont des&hellip; <a class=\"more-link\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-servir-des-images-dans-des-formats-next-gen-en-utilisant-wordpress\/\">Continue reading <span class=\"screen-reader-text\">Comment servir des images dans des formats next-gen en utilisant WordPress<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":836,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[9],"tags":[8],"class_list":["post-825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-infrastructure-du-siteweb-amp-optimisation","tag-fr","entry"],"_links":{"self":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/825"}],"collection":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/comments?post=825"}],"version-history":[{"count":0,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/825\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media\/836"}],"wp:attachment":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media?parent=825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/categories?post=825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/tags?post=825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}