{"id":61815,"date":"2021-10-28T18:55:21","date_gmt":"2021-10-28T18:55:21","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-utiliser-les-fichiers-webp-dans-wordpress\/"},"modified":"2021-10-28T18:55:21","modified_gmt":"2021-10-28T18:55:21","slug":"comment-utiliser-les-fichiers-webp-dans-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-utiliser-les-fichiers-webp-dans-wordpress\/","title":{"rendered":"Comment utiliser les fichiers WebP dans WordPress"},"content":{"rendered":"

\n<\/p>\n

La plupart d’entre nous savent d\u00e9j\u00e0 que l’optimisation des images est tr\u00e8s importante car elle joue un r\u00f4le \u00e9norme dans les temps de chargement totaux de votre site WordPress. Aujourd’hui, nous voulons partager avec vous une alternative simple sur la fa\u00e7on d’int\u00e9grer les fichiers Google WebP dans votre site WordPress. Certains utilisateurs ont constat\u00e9 des r\u00e9ductions de taille de fichier image de plus de 70\u00a0%\u00a0!<\/p>\n

<\/span>Qu’est-ce que WebP ?<\/span><\/h2>\n

Si vous n’\u00eates pas familier avec WebP, il s’agit d’un format de fichier image cr\u00e9\u00e9 par l’\u00e9quipe de performances Web de Google dans le but de cr\u00e9er des images plus petites et plus rapides. Il a \u00e9t\u00e9 annonc\u00e9 pour la premi\u00e8re fois en 2010 et propose des m\u00e9thodes de compression avec et sans perte. Les images sont envoy\u00e9es au navigateur Web \u00e0 partir d’un serveur Web en fonction du type MIME qu’il utilise, \u00e0 savoir image \/ webp.<\/p>\n

Les images WebP sans perte sont 26% plus petites que les PNG, et les images WebP avec perte sont 25% \u00e0 34% plus petites que les JPEG.<\/p>\n

Des entreprises comme YouTube et eBay utilisent d\u00e9j\u00e0 WebP pour alimenter discr\u00e8tement bon nombre de leurs sites. Voici un exemple d’eBay, o\u00f9 ils ont en moyenne environ 30 fichiers WebP sur leur page d’accueil.<\/p>\n

\"utilisation<\/p>\n

Pourquoi WebP est-il si important ? Selon Httparchive, en ao\u00fbt 2016, les images repr\u00e9sentent plus de 64% du poids moyen d’une page web<\/strong>. C’est g\u00e9n\u00e9ralement plus que CSS, JS et HTML combin\u00e9s. Par cons\u00e9quent, le choix d’une m\u00e9thode d’optimisation d’image robuste et d’un format d’image comme WebP est crucial afin de r\u00e9duire au maximum le poids de votre page. En r\u00e8gle g\u00e9n\u00e9rale, plus votre page est petite, plus elle se chargera rapidement. Et cela plaira non seulement \u00e0 vos visiteurs, mais aussi \u00e0 Google, car la vitesse de la page est un facteur de classement.<\/p>\n

<\/span>Prise en charge de WebP<\/span><\/h2>\n

Maintenant, si WebP est tr\u00e8s int\u00e9ressant, il est \u00e9galement important de mentionner la compatibilit\u00e9 du navigateur. Tous les navigateurs modernes ne sont actuellement pas compatibles avec WebP. Selon caniuse, WebP prend actuellement en charge Chrome 23+, Opera 39+, toutes les versions d’Opera mini, le navigateur Android 4.3+ et Chrome pour Android.<\/p>\n

\"prise<\/p>\n

Mais attendez! Ne soyez pas trop d\u00e9\u00e7u, car dans le tutoriel que nous allons vous montrer ci-dessous, il existe une m\u00e9thode pour fournir des fichiers WebP aux navigateurs pris en charge et JPG \/ PNG en tant que sauvegarde<\/strong>. Cela signifie que les navigateurs non pris en charge ne verront pas une image cass\u00e9e, ils ne verront que ce qu’ils voyaient auparavant. Consid\u00e9rez WebP comme un ajout \u00e0 votre site WordPress, plut\u00f4t que comme une migration.<\/p>\n

Selon W3Schools, Chrome d\u00e9tient un monopole sur la part de march\u00e9 des navigateurs \u00e0 un peu plus de 70 %. Mais ne consid\u00e9rez pas simplement la part de march\u00e9 comme une preuve solide, examinez les donn\u00e9es de vos propres visiteurs et voyez quels navigateurs ils utilisent, car ils peuvent diff\u00e9rer en fonction de votre cr\u00e9neau. Cependant, vous pourriez \u00eatre surpris de voir \u00e0 quel point les statistiques sont biais\u00e9es. Dans Google Analytics, sous “Audience”, vous pouvez cliquer sur “Navigateur et syst\u00e8me d’exploitation” et voir quels navigateurs les gens utilisent lorsqu’ils viennent sur votre site. Nous avons sorti un site Web au hasard et, comme vous pouvez le voir ci-dessous, 67% des visiteurs viennent de Chrome et 1% d’Opera. Ensuite 68% de ces personnes peuvent voir et b\u00e9n\u00e9ficier de WebP<\/strong> format de fichier image !<\/p>\n

\"navigateurs<\/p>\n

<\/span>Comment utiliser les fichiers WebP dans WordPress<\/span><\/h2>\n

Dans l’exemple d’aujourd’hui, nous allons utiliser une combinaison de deux plugins WordPress diff\u00e9rents pour que WebP soit op\u00e9rationnel sur WordPress. Ceux-ci sont cr\u00e9\u00e9s et d\u00e9velopp\u00e9s par l’\u00e9quipe de KeyCDN, qui est un r\u00e9seau mondial de diffusion de contenu (CDN).<\/p>\n

    \n
  1. [premium] Optimus Image Optimizer – Plugin de compression d’images sans perte pour WordPress, convertir des images en WebP<\/li>\n
  2. [free] WordPress Cache Enabler – Plugin de mise en cache qui vous permet de servir WebP aux navigateurs pris en charge<\/li>\n<\/ol>\n

    <\/span>Optimus d’image Optimus<\/span><\/h3>\n

    Vous pouvez t\u00e9l\u00e9charger Optimus Image Optimizer depuis le r\u00e9f\u00e9rentiel WordPress, depuis optimus.io ou depuis le tableau de bord de votre plugin. Remarque : N\u00e9cessite une licence premium si vous souhaitez convertir vos images en WebP. Une fois install\u00e9, vous pouvez activer “WebP File Creation” dans les param\u00e8tres du plugin.<\/p>\n

    \"cr\u00e9ation<\/p>\n

    Une fois WebP activ\u00e9, cela cr\u00e9e essentiellement une image suppl\u00e9mentaire pour tout ce qui est converti. Ainsi, si vous t\u00e9l\u00e9chargez un fichier PNG ou JPG, il existe d\u00e9sormais \u00e9galement une version .webp de votre image. N’oubliez pas que les fichiers PNG \/ JPG sont toujours requis car ils sont toujours utilis\u00e9s pour des navigateurs non pris en charge. Optimus effectue une compression sans perte, de sorte que vos fichiers PNG et JPG sont \u00e9galement compress\u00e9s.<\/p>\n

    \"fichiers<\/p>\n

    Il existe \u00e9galement une option d’optimisation en masse au cas o\u00f9 vous auriez d\u00e9j\u00e0 compress\u00e9 vos images et que vous deviez encore les convertir en WebP.<\/p>\n

    \"optimiseur<\/p>\n

    <\/span>Activeur de cache WordPress<\/span><\/h3>\n

    Alors maintenant que vous avez des images WebP, vous avez besoin d’un moyen de dire \u00e0 WordPress de fournir des images WebP aux navigateurs pris en charge et PNG \/ JPG \u00e0 d’autres navigateurs. Ceci peut \u00eatre r\u00e9alis\u00e9 avec le plugin gratuit WordPress Cache Enabler. Vous pouvez t\u00e9l\u00e9charger le plugin \u00e0 partir du r\u00e9f\u00e9rentiel WordPress ou l’installer \u00e0 partir de votre panneau de configuration de plugin. Une fois install\u00e9, vous pouvez activer “Cr\u00e9er une version suppl\u00e9mentaire en cache de WebP” dans les param\u00e8tres du plugin.<\/p>\n

    \"param\u00e8tres<\/p>\n

    Une fois que vous avez activ\u00e9 cette option, une version WebP suppl\u00e9mentaire en cache de votre page est cr\u00e9\u00e9e.\"versions<\/p>\n

    Et c’est tout! Vous devriez maintenant avoir des fichiers WebP en cours d’ex\u00e9cution sur votre site Web WordPress.<\/p>\n

    <\/span>Comparaison JPG \u00e0 WebP<\/span><\/h2>\n

    Nous effectuons une comparaison JPG vs WebP pour montrer les diff\u00e9rences qu’il peut atteindre.<\/p>\n\n\n\n\n\n\n\n\n
    NOM DE FICHIER<\/th>\nJPG ORIGINAL<\/th>\nJPG COMPRIM\u00c9<\/th>\nFORMAT WEBP<\/th>\nDIFF\u00c9RENCE DE TAILLE\u00a0%<\/th>\n<\/tr>\n
    jpg-a-webp-1.jpg<\/td>\n758 Ko<\/td>\n685 Ko<\/td>\n109 Ko<\/td>\n86%<\/td>\n<\/tr>\n
    jpg-a-webp-2.jpg<\/td>\n599 Ko<\/td>\n529 Ko<\/td>\n58,8 Ko<\/td>\n90%<\/td>\n<\/tr>\n
    jpg-a-webp-3.jpg<\/td>\n960 Ko<\/td>\n881 Ko<\/td>\n200 Ko<\/td>\n79%<\/td>\n<\/tr>\n
    jpg-vers-webp-4.jpg<\/td>\n862 Ko<\/td>\n791 Ko<\/td>\n146 Ko<\/td>\n83%<\/td>\n<\/tr>\n
    jpg-vers-webp-5.jpg<\/td>\n960 Ko<\/td>\n877 Ko<\/td>\n71,7 Ko<\/td>\n93%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    WebP a abouti \u00e0 un Baisse de 85,87 % de la taille moyenne de l’image<\/strong>.<\/p>\n

    <\/span>Comparaison PNG \u00e0 WebP<\/span><\/h2>\n

    Encore une fois, nous avons \u00e9galement fait une comparaison PNG vs WebP pour montrer les diff\u00e9rences qu’il peut atteindre.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    nom de fichier<\/th>\nPNG d’origine<\/th>\npng compress\u00e9<\/th>\nFormat WebP<\/th>\nDiff\u00e9rence de taille%<\/th>\n<\/tr>\n
    png-vers-webp-1.png<\/td>\n44 Ko<\/td>\n34 Ko<\/td>\n30 Ko<\/td>\n32%<\/td>\n<\/tr>\n
    png-vers-webp-2.png<\/td>\n46 Ko<\/td>\n35 Ko<\/td>\n33 Ko<\/td>\n28%<\/td>\n<\/tr>\n
    png-vers-webp-3.png<\/td>\n43 Ko<\/td>\n31 Ko<\/td>\n25 Ko<\/td>\n42%<\/td>\n<\/tr>\n
    png-a-webp-4.png<\/td>\n30 Ko<\/td>\n24 Ko<\/td>\n18 Ko<\/td>\n40%<\/td>\n<\/tr>\n
    png-to-webp-5.png<\/td>\n15 Ko<\/td>\n11 Ko<\/td>\n8 Ko<\/td>\n47%<\/td>\n<\/tr>\n
    png-a-webp-6.png<\/td>\n34 Ko<\/td>\n24 Ko<\/td>\n18 Ko<\/td>\n47%<\/td>\n<\/tr>\n
    png-vers-webp-7.png<\/td>\n15 Ko<\/td>\n13 Ko<\/td>\n8 Ko<\/td>\n47%<\/td>\n<\/tr>\n
    png-to-webp-8.png<\/td>\n63 Ko<\/td>\n47 Ko<\/td>\n44 Ko<\/td>\n30%<\/td>\n<\/tr>\n
    png-vers-webp-9.png<\/td>\n48 Ko<\/td>\n36 Ko<\/td>\n33 Ko<\/td>\n31%<\/td>\n<\/tr>\n
    png-vers-webp-10.png<\/td>\n17 Ko<\/td>\n14 Ko<\/td>\n11 Ko<\/td>\n35%<\/td>\n<\/tr>\n
    png-vers-webp-11.png<\/td>\n18 Ko<\/td>\n13 Ko<\/td>\n9 Ko<\/td>\ncinquante%<\/td>\n<\/tr>\n
    png-vers-webp-12.png<\/td>\n61 Ko<\/td>\n45 Ko<\/td>\n39 Ko<\/td>\n36%<\/td>\n<\/tr>\n
    png-a-webp-13.png<\/td>\n32 Ko<\/td>\n25 Ko<\/td>\n21 Ko<\/td>\n35%<\/td>\n<\/tr>\n
    png-vers-webp-14.png<\/td>\n26 Ko<\/td>\n21 Ko<\/td>\n17 Ko<\/td>\n35%<\/td>\n<\/tr>\n
    png-vers-webp-15.png<\/td>\n14 Ko<\/td>\n12 Ko<\/td>\n9 Ko<\/td>\n36%<\/td>\n<\/tr>\n
    png-vers-webp-16.png<\/td>\n36 Ko<\/td>\n27 Ko<\/td>\n24 Ko<\/td>\n33%<\/td>\n<\/tr>\n
    png-vers-webp-17.png<\/td>\n14 Ko<\/td>\n12 Ko<\/td>\n8 Ko<\/td>\n43%<\/td>\n<\/tr>\n
    png-a-webp-18.png<\/td>\n21 Ko<\/td>\n18 Ko<\/td>\n13 Ko<\/td>\n38%<\/td>\n<\/tr>\n
    png-vers-webp-19.png<\/td>\n42 Ko<\/td>\n30 Ko<\/td>\n27 Ko<\/td>\n36%<\/td>\n<\/tr>\n
    png-a-webp-20.png<\/td>\n23 Ko<\/td>\n20 Ko<\/td>\n18 Ko<\/td>\n22%<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    WebP a abouti \u00e0 un Diminution de 42,8% de la taille moyenne de l’image<\/strong>.<\/p>\n

    <\/span>r\u00e9sum\u00e9<\/span><\/h2>\n

    Comme vous pouvez le voir, WebP est tr\u00e8s facile \u00e0 impl\u00e9menter sur votre site WordPress et peut atteindre des tailles de fichier image consid\u00e9rablement plus petites. Il n’y a pas de compression d’image comparable aux \u00e9conomies de WebP. Oh, et avons-nous mentionn\u00e9 que WebP a la possibilit\u00e9 d’utiliser une compression sans perte\u00a0? Cela signifie que vous ne verrez aucune perte de qualit\u00e9 notable. Si vous cherchez un meilleur moyen d’acc\u00e9l\u00e9rer WordPress, WebP peut \u00eatre une excellente solution.<\/p>\n

    \n
    \n

    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n