Comment utiliser des images WebP dans WordPress (3 méthodes)

Nous comprenons l’importance d’équilibrer la qualité de l’image avec des temps de chargement plus rapides. De nombreux propriétaires de sites nous interrogent sur la meilleure façon d’utiliser les images WebP à cette fin.

Les images WebP sont un format d’image moderne qui offre une meilleure compression d’image en réduisant la taille du fichier sans sacrifier de manière significative la qualité de l’image. Cela permet à votre site de se charger plus rapidement et d’enregistrer la bande passante.

Le problème est que WordPress ne permet pas de téléverser ou d’afficher des images WebP.

Dans cet article, nous allons vous afficher comment utiliser facilement des images WebP dans WordPress.

Qu’est-ce que WebP ?

WebP est un format de fichier plus récent pour les images à utiliser sur le web. En utilisant le format d’image WebP, vos images seront de 25 à 34 % moins volumineuses que les formats PNG et JPEG, sans perdre en qualité.

Si les images ralentissent votre site, leur conversion au format WebP peut améliorer les résultats des tests de vitesse de chargement des pages.

Pour en savoir plus sur la compression des images, consultez notre guide sur l ‘optimisation des images pour le web.

Comme WebP est un nouveau format de fichier, il n’est pas encore supporté par tous les navigateurs. Cependant, la plupart des navigateurs modernes, comme Google Chrome, Firefox et Microsoft Edge, supportent les images WebP.

Faut-il utiliser des images WebP dans WordPress ?

Les images WebP peuvent vous aider à accélérer votre site WordPress. Il s’agit d’une meilleure pratique recommandée à utiliser avec un plugin de mise en cache WordPress, un CDN, et plus encore.

Depuis WordPress 5.8, WordPress supporte les images WebP par défaut. Cela signifie que vous pouvez enregistrer et téléverser vos images WebP sur votre site WordPress sans utiliser d’extension.

Cela dit, vous pourriez tout de même souhaiter utiliser une extension de compression d’images sur votre site WordPress. Si beaucoup de vos utilisateurs/utilisatrices utilisent des navigateurs non pris en charge, alors vous devriez envisager d’utiliser une extension de compression d’image.

Les extensions de compression d’images peuvent convertir vos images existantes au format WebP et afficher les images JPEG ou PNG comme option de repli sur les navigateurs qui ne supportent pas encore le format WebP.

Si votre site utilise beaucoup d’images et que celles-ci ralentissent votre blog WordPress, vous devriez certainement envisager d’utiliser des images WebP.

Voici comment utiliser les images WebP dans WordPress. Nous allons vous afficher plusieurs méthodes afin que vous puissiez choisir celle qui vous convient le mieux :

Tutoriel vidéo

Subscribe to WPBeginner

Si vous préférez les instructions écrites, continuez à lire.

Méthode 1 : Utiliser des images WebP dans WordPress avec EWWW Optimizer

EWWW Image Optimizer est l’un des meilleurs plugins WordPress de compression d’images qui vous permet d’optimiser vos images WordPress. Il prend également en charge les images WebP et peut les afficher automatiquement sur les navigateurs supportés. Consultez notre avis sur EWWW Image Optimizer pour plus de détails.

La première chose à faire est d’installer et d’activer l’extension EWWW Image Optimizer. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, allez sur la page Réglages  » EWWW Image Optimizer pour configurer les options de l’extension. Vous serez accueilli par un assistant de configuration, mais vous pouvez cliquer sur le lien  » Je sais ce que je fais  » pour quitter l’assistant.

Sur l’écran suivant, vous verrez une série d’options d’extension.

Défilez vers le bas et cochez la case située à côté de l’option « Conversion WebP ».

Cliquez ensuite sur le bouton « Enregistrer les modifications » pour stocker vos réglages.

Ensuite, vous devez défiler vers le bas jusqu’à la section Conversion WebP. L’extension va maintenant vous afficher quelques règles de réécriture avec une image de prévisualisation rouge.

Vous devez cliquer sur le bouton « Insert Rewrite Rules », et l’extension essaiera automatiquement d’insérer ces règles de réécriture dans votre fichier .htaccess.

Si l’extension réussit à ajouter ces règles, la Prévisualisation de l’image rouge deviendra verte avec le texte ‘WebP’.

Il arrive parfois que l’extension ne soit pas en mesure d’insérer les règles. Dans ce cas, vous devez copier les règles de réécriture depuis la page des Réglages du plugin et les coller au bas de votre fichier .htaccess manuellement.

Une fois que vous avez terminé, retournez à la page des réglages du plugin et cliquez à nouveau sur le bouton  » Enregistrer les modifications « . Si l’image de Prévisualisation devient verte, cela signifie que vous avez bien activé la distribution d’images WebP sur votre site WordPress.

Vous pouvez également choisir les méthodes JS WebP Rewriting ou WebP Rewriting comme options de distribution WebP. Ces méthodes sont un peu plus lentes que la méthode .htaccess, mais elles permettent de faire le travail.

Convertissez en masse vos anciennes images en versions WebP

EWWW Image Optimizer vous permet de convertir facilement vos outils téléversés en images WebP. Il vous suffit de vous rendre sur la page Médiathèque  » Bibliothèque et de passer à la vue en liste.

Ensuite, vous devez cliquer sur le bouton « Options de l’écran » et modifier le « Nombre d’articles par page » en le fixant à 999. Si vous avez plus de 1000 images, celles-ci apparaîtront sur la page suivante.

De cette façon, vous pourrez sélectionner rapidement un grand nombre d’images pour une optimisation en bloc. Ensuite, cliquez sur la case à cocher Sélectionner tout en haut pour sélectionner toutes les images.

Ensuite, cliquez sur le menu déroulant ‘Actions groupées’ et sélectionnez l’option ‘Optimisation groupée’. Enfin, cliquez sur le bouton « Appliquer ».

Sur l’écran suivant, l’extension vous donnera l’option de passer la compression des images et de les convertir uniquement en WebP. Vous pouvez cocher cette option si vos images sont déjà optimisées.

Après cela, cliquez sur le bouton  » Scanner les images non optimisées  » pour continuer. L’extension vous affichera alors le nombre d’images qu’elle a trouvées, afin que vous puissiez cliquer sur le bouton Optimiser pour continuer.

Vos images seront maintenant optimisées, et EWWW Optimizer générera des versions WebP pour vos images.

Test de la distribution d’images WebP

Une fois que vous avez optimisé vos images, vous pouvez vous rendre sur une publication de blog contenant plusieurs images.

Passez la souris sur n’importe quelle image et cliquez avec le bouton droit de la souris pour ouvrir l’image dans un nouvel onglet.

L’image s’ouvre alors dans un nouvel onglet du navigateur.

Vous verrez qu’il porte l’extension .webp dans la barre d’adresse.

Si l’extension n’est pas en mesure de servir l’image WebP, vous pouvez retourner à la page des Réglages de l’extension. À partir de là, vous pouvez modifier l’option de distribution WebP en optant pour les méthodes ‘JS WebP Rewriting’ ou ‘WebP Rewriting’.

Méthode 2 : Utiliser des images WebP dans WordPress avec Imagify

Imagify est un plugin d’optimisation d’images WordPress créé par les gens derrière WP Rocket, le meilleur plugin de mise en cache WordPress. Il vous permet d’optimiser et de convertir facilement des images au format WebP. Consultez notre test d’Imagify pour en savoir plus.

La première chose à faire est d’installer et d’activer l’extension Imagify. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous devez vous rendre sur la page Réglages  » Imagify pour définir les paramètres de l’extension. À partir de là, cliquez sur le bouton  » Créer une clé API gratuite  » pour continuer.

Il vous sera demandé de saisir une adresse e-mail professionnelle. Après cela, vous pouvez vérifier votre boîte réception pour un e-mail contenant votre clé API. Copiez et collez la clé dans la page des réglages du plugin et cliquez sur le bouton  » Enregistrer les modifications « .

Ensuite, vous devez défiler vers le bas jusqu’à la section Optimisation. Là, vous devez cocher les options situées à côté des options  » Créer des versions webp des images  » et  » Afficher les images au format webp sur le site « .

En dessous, vous pouvez choisir entre deux méthodes de distribution pour afficher les images WebP dans WordPress. La première est la méthode .htaccess, et la seconde consiste à utiliser une identification.

La méthode .htaccess est plus rapide, mais elle ne fonctionne pas si vous utilisez un service CDN. La méthode identifiée fonctionne également avec les CDN, mais elle peut perturber certains thèmes WordPress.

Vous pouvez choisir celui qui convient le mieux à votre site. Cliquez ensuite sur le bouton « Enregistrer et aller à l’optimiseur de masse » en bas de page.

Vous accéderez ainsi à la page Media  » Bulk Optimization.

L’extension commencera automatiquement à optimiser toutes vos images WordPress en arrière-plan.

Si vous avez beaucoup d’images, cela peut prendre un certain temps. Ne vous inquiétez pas, vous pouvez fermer la page et y revenir ultérieurement car la fermeture de la page n’arrêtera pas le processus d’optimisation des images.

Tester vos images WebP dans WordPress

Une fois l’optimisation effectuée, vous pouvez visiter une page ou une publication contenant quelques images. Passez votre souris sur une image, puis cliquez avec le bouton droit de la souris pour sélectionner « Ouvrir l’image dans un nouvel onglet ».

L’image s’ouvre alors dans un nouvel onglet du navigateur.

Vous pourrez voir l’extension .webp dans la barre d’adresse.

Méthode 3 : Utiliser des images WebP dans WordPress avec SG Optimizer

Cette méthode est recommandée si vous êtes utilisateurs/utilisatrices de SiteGround.

SiteGround est l’une des meilleures entreprises d’hébergement WordPress. Ils offrent une extension SG Optimizer gratuite à leurs utilisateurs/utilisatrices, ce qui vous permet d’optimiser les performances de WordPress. Il comprend également l’option d’optimisation des images WordPress.

Tout d’abord, vous devez installer et activer l’extension SG Optimizer.

Une fois activé, le plugin ajoutera un nouvel élément de menu dans votre colonne latérale d’administration libellé « SG Optimizer ». En cliquant dessus, vous accéderez à la page de réglages de l’extension.

À partir de là, vous pouvez activer les Réglages de mise en cache si vous souhaitez utiliser le système de mise en cache intégré de SiteGround.

Ensuite, vous pouvez passer à l’onglet Optimisation des médias et activer l’option  » Générer des copies WebP des nouvelles images « .

En dessous, vous verrez l’option « Bulk Generate WebP Files » (Générer des fichiers WebP en masse).

En cliquant sur le bouton de basculement de cette option, vous commencerez à générer des copies WebP de tous les fichiers images de votre médiathèque WordPress.

Une fois cette opération terminée, votre site WordPress commencera à afficher des images WebP.

Test des images WebP dans SG Optimizer

Pour savoir si votre site sert des images WebP, vous devez ouvrir une page de votre site contenant quelques images.

Ensuite, cliquez avec le bouton droit de la souris et sélectionnez l’outil Inspecter. Cela ouvrira la console développeur/développeuse, où vous devez passer à l’onglet Réseau.

À partir de là, cliquez sur l’onglet « img », puis rechargez la page (CTRL+R sur Windows et Command+R sur Mac). Au fur et à mesure que votre site se recharge, vous verrez toutes les images chargées dans la console développeur/développeuse.

Guides d’experts sur l’utilisation des images dans WordPress

Maintenant que vous savez comment utiliser les images WebP dans WordPress, vous pouvez consulter d’autres guides sur l’utilisation des images sur votre site WordPress :

• Comment ajouter correctement des images dans WordPress (étape par étape)
• Comment ajouter des images mises en avant ou des miniatures de publication dans WordPress ?
• WebP vs. PNG vs. JPEG : Le meilleur format d’image pour WordPress
• Comment optimiser les images pour le Web sans en perdre la qualité ?
• Comparaison des meilleures extensions de compression d’images WordPress
• Outils pour créer de meilleures images pour vos publications de blog
• Excellentes extensions WordPress pour la gestion des images (mise à jour)
• Image Alt Text vs Image Title dans WordPress – Quelle est la différence ?
• Où WordPress stocke-t-il les images sur votre site ?
• Comment charger facilement des images paresseuses dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment utiliser les images WebP dans WordPress. Vous pouvez également consulter notre guide sur la création d’une newsletter par e-mail et nos choix d’experts pour les meilleurs services de téléphonie d’entreprise pour votre site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.