Comment intégrer des images WebP dans son site WordPress

Vous envisagez d’utiliser, dans votre site WordPress, des images WebP ? Les images WebP sont un format d’image moderne qui offre une meilleure compression d’image en réduisant la taille du fichier. Cela accélère le chargement de votre site Web et économise de la bande passante. Dans cet article, on vous explique comment utiliser facilement les images WebP dans WordPress.

Qu’est-ce que le format WebP ?

WebP est un nouveau format de fichier pour les images à utiliser sur le Web. En utilisant le format d’image WebP, vos images seront 25 à 34% plus petites en taille de fichier que PNG et JPEG sans perte de qualité.

Si les images ralentissent votre site Web, les convertir au format WebP peut améliorer les résultats des tests de vitesse de chargement de votre page.

Étant donné que WebP est un nouveau format de fichier, il n’est pas encore pris en charge par tous les navigateurs. Cependant, la plupart des navigateurs modernes tels que Google Chrome, Firefox et Microsoft Edge prennent en charge les images WebP.

Pourquoi utiliser des images WebP dans WordPress?

Les images WebP peuvent vous aider à accélérer votre site Web WordPress. Il s’agit d’une bonne pratique recommandée à utiliser avec un plugin de mise en cache WordPress, un CDN, etc. Par défaut, WordPress ne prend pas en charge les images WebP et le téléchargement d’une image WebP affichera une erreur.

Pour résoudre ce problème, vous devrez utiliser un plugin de compression d’image pour convertir les images au format d’image WebP. Vous continuerez de télécharger vos images dans des formats de fichiers pris en charge par WordPress tels que PNG, JPEG et GIF, afin qu’elles puissent être utilisées comme sauvegarde.

Si votre site utilise beaucoup d’images et qu’elles ralentissent votre blog WordPress, vous devriez certainement envisager d’utiliser des images WebP.

Comment intégrer des images WebP dans WordPress ?

Dans cet article, on vous explique comment intégrer des images WebP dans votre site WordPress, à travers l’utilisation de 3 plugins différents mais tous aussi efficaces.

Méthode 1. Utilisation d’images WebP dans WordPress avec EWWW Optimizer

Le plugin EWWW Image Optimizer est l’un des meilleurs plugins de compression d’images WordPress qui vous permet d’optimiser vos images WordPress. Il prend également en charge les images WebP et peut les afficher automatiquement sur les navigateurs pris en charge.

La première chose à faire est d’installer et d’activer le plugin EWWW Image Optimizer. Lors de l’activation, accédez à la Paramètres »Optimiseur d’image EWWW pour configurer les options du plugin.

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 un tas d’options de plugin. Faites défiler vers le bas et cochez la case à côté de l’option «Conversion WebP».

Après cela, cliquez sur le bouton Enregistrer les modifications pour enregistrer vos paramètres. Ensuite, vous devez faire défiler jusqu’à la section Conversion WebP. Le plugin va maintenant vous montrer quelques règles de réécriture avec une image de prévisualisation rouge.

Vous devez cliquer sur le bouton «Insérer des règles de réécriture», et le plugin essaiera automatiquement d’insérer ces règles de réécriture dans votre fichier .htaccess. Si le plugin réussit à ajouter ces règles, l’aperçu de l’image rouge deviendra vert avec le texte ‘WebP’.

Parfois, le plugin peut ne pas être en mesure d’insérer les règles. Dans ce cas, vous devez copier les règles de réécriture depuis la page des paramètres du plugin et les coller manuellement au bas de votre fichier .htaccess.

Une fois que vous avez terminé, revenez à la page des paramètres du plugin et cliquez à nouveau sur le bouton Enregistrer les modifications. Si l’image d’aperçu devient verte, cela signifie que vous avez activé avec succès la livraison d’images WebP sur votre site WordPress.

Vous pouvez également choisir parmi les méthodes de réécriture JS WebP ou WebP Rewriting comme options de livraison WebP. Celles-ci sont un peu plus lentes que la méthode .htaccess, mais elles feront le travail. Convertissez en masse vos anciennes images en version WebPEWWW Image Optimizer vous permet de convertir facilement vos fichiers image précédemment téléchargés en images WebP. Allez simplement à Médiathèque et passez à la vue de liste.Ensuite, vous devez cliquer sur le bouton Options d’écran et changer le «Nombre d’éléments par page» en 999. Si vous avez plus de 1000 images, ces images apparaîtront sur la page suivante.De cette façon, vous serez en mesure de 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.Après cela, cliquez sur le menu déroulant Actions en masse et sélectionnez l’option Optimiser en masse. Enfin, cliquez sur le bouton Appliquer. Sur l’écran suivant, le plugin vous donnera une option pour ignorer la compression d’image et 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 «Rechercher les images non optimisées» pour continuer. Le plugin vous montrera alors le nombre d’images qu’il a trouvées, vous pouvez donc cliquer sur le bouton Optimiser pour continuer. Vos images seront maintenant optimisées et l’optimiseur EWWW générera des versions WebP pour vos images.Test de votre diffusion d’images WebPUne fois que vous avez optimisé vos images, vous pouvez accéder à un article de blog ou à une page 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.Cela ouvrira l’image dans un nouvel onglet du navigateur et vous pourrez voir qu’elle a une extension .webp dans la barre d’adresse. Si le plugin ne peut pas servir l’image webp, vous pouvez revenir à la page des paramètres du plugin. De là, vous pouvez changer l’option de livraison WebP en méthodes «JS WebP Rewriting» ou « WebP Rewriting». Méthode 2. Utilisation d’images WebP dans WordPress avec ImagifyImagify est un plugin d’optimisation d’image 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 d’image WebP.La première chose à faire est d’installer et d’activer le plugin Imagify.  Lors de l’activation, vous devez visiter Paramètres »Imagify pour configurer les paramètres du plugin. D’ici. cliquez sur le bouton «Créer une clé API gratuite» pour continuer.Vous serez invité à saisir une adresse e-mail professionnelle, après quoi vous pourrez rechercher dans votre boîte de réception un e-mail contenant votre clé API. Copiez et collez la clé sur la page des paramètres du plugin et cliquez sur le bouton Enregistrer les modifications.Ensuite, vous devez faire défiler jusqu’à la section Optimisation. Là, vous devez cocher les options à 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 parmi deux méthodes de livraison pour afficher des images WebP dans WordPress. Le premier est la méthode .htaccess, et le second utilise la balise . La méthode .htaccess est plus rapide, mais elle ne fonctionne pas si vous utilisez un service CDN. La méthode de balise fonctionne également avec les CDN, mais elle peut casser certains thèmes WordPress.  Vous pouvez choisir celui qui fonctionne bien pour votre site. Après cela, cliquez sur le bouton `Enregistrer et accéder à l’optimiseur de masse  » en bas.Cela vous amènera à Médias »Optimisation en masse. Le plugin 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 plus tard car la fermeture de la page n’interrompra pas le processus d’optimisation de l’image.Tester vos images WebP dans WordPressUne fois l’optimisation terminée, vous pouvez visiter une page ou un article contenant quelques images. Passez la souris sur une image, puis cliquez avec le bouton droit de la souris pour sélectionner «Ouvrir l’image dans un nouvel onglet».Cela ouvrira l’image dans un nouvel onglet du navigateur et vous pourrez voir l’extension .webp dans la barre d’adresse.Méthode 3. Utilisation d’images WebP dans WordPress avec SG OptimizerCette méthode est recommandée si vous êtes un utilisateur de SiteGround. SiteGround est l’une des meilleures sociétés d’hébergement WordPress. Ils offrent un plugin SG Optimizer gratuit à leurs utilisateurs qui vous permet d’optimiser vos performances WordPress.Il comprend également la possibilité d’optimiser les images WordPress. Tout d’abord, vous devez installer et activer le plugin SG Optimizer.Lors de l’activation, le plugin ajoutera un nouvel élément de menu à votre barre latérale d’administration intitulée «SG Optimizer». En cliquant dessus, vous serez redirigé vers la page des paramètres du plugin.À partir de là, vous pouvez activer les paramètres de mise en cache si vous souhaitez utiliser le système de mise en cache intégré de SiteGround.Après cela, vous pouvez passer à l’onglet Optimisation des médias et activer l’option «Générer des copies WebP de nouvelles images».En dessous, vous verrez l’option` Générer en masse des fichiers WebP  ». En cliquant dessus, vous commencerez à générer des copies WebP pour tous les fichiers image de votre médiathèque WordPress.Une fois terminé, votre site WordPress commencera à servir des images WebP.Test des images WebP dans SG OptimizerPour voir si votre site Web diffuse des images WebP, vous devez ouvrir une page de votre site avec quelques images. Après cela, cliquez avec le bouton droit de la souris et sélectionnez l’outil Inspecter. Cela ouvrira la console développeur où vous devez basculer vers l’onglet Réseau.De là, cliquez sur l’onglet ‘img’ puis rechargez la page (CTRL + R sous Windows et Commande + R sur Mac). Au fur et à mesure que votre site Web se recharge, vous verrez toutes les images chargées dans la console développeur.Comment intégrer les images WebP dans WordPress ? Notre conclusionNous espérons que cet article vous a aidé à apprendre à utiliser les images WebP dans WordPress. Ces trois méthodes ont été testées et sont approuvées par nos soins. Vous souhaitez développer vitre site ? On évoque dans un article dédié, les façons d’autoriser un utilisateur à télécharger vos images, n’hésitez pas à y jeter un oeil !

Convertissez en masse vos anciennes images en version WebP

EWWW Image Optimizer vous permet de convertir facilement vos fichiers image précédemment téléchargés en images WebP. Allez simplement à Médiathèque et passez à la vue de liste.

Ensuite, vous devez cliquer sur le bouton Options d’écran et changer le «Nombre d’éléments par page» en 999. Si vous avez plus de 1000 images, ces images apparaîtront sur la page suivante.

De cette façon, vous serez en mesure de 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.

Après cela, cliquez sur le menu déroulant Actions en masse et sélectionnez l’option Optimiser en masse. Enfin, cliquez sur le bouton Appliquer. Sur l’écran suivant, le plugin vous donnera une option pour ignorer la compression d’image et 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 «Rechercher les images non optimisées» pour continuer. Le plugin vous montrera alors le nombre d’images qu’il a trouvées, vous pouvez donc cliquer sur le bouton Optimiser pour continuer. Vos images seront maintenant optimisées et l’optimiseur EWWW générera des versions WebP pour vos images.

Test de votre diffusion d’images WebP

Une fois que vous avez optimisé vos images, vous pouvez accéder à un article de blog ou à une page 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.

Cela ouvrira l’image dans un nouvel onglet du navigateur et vous pourrez voir qu’elle a une extension .webp dans la barre d’adresse. Si le plugin ne peut pas servir l’image webp, vous pouvez revenir à la page des paramètres du plugin. De là, vous pouvez changer l’option de livraison WebP en méthodes «JS WebP Rewriting» ou « WebP Rewriting». Méthode 2. Utilisation d’images WebP dans WordPress avec ImagifyImagify est un plugin d’optimisation d’image 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 d’image WebP.La première chose à faire est d’installer et d’activer le plugin Imagify.  Lors de l’activation, vous devez visiter Paramètres »Imagify pour configurer les paramètres du plugin. D’ici. cliquez sur le bouton «Créer une clé API gratuite» pour continuer.Vous serez invité à saisir une adresse e-mail professionnelle, après quoi vous pourrez rechercher dans votre boîte de réception un e-mail contenant votre clé API. Copiez et collez la clé sur la page des paramètres du plugin et cliquez sur le bouton Enregistrer les modifications.Ensuite, vous devez faire défiler jusqu’à la section Optimisation. Là, vous devez cocher les options à 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 parmi deux méthodes de livraison pour afficher des images WebP dans WordPress. Le premier est la méthode .htaccess, et le second utilise la balise . La méthode .htaccess est plus rapide, mais elle ne fonctionne pas si vous utilisez un service CDN. La méthode de balise fonctionne également avec les CDN, mais elle peut casser certains thèmes WordPress.  Vous pouvez choisir celui qui fonctionne bien pour votre site. Après cela, cliquez sur le bouton `Enregistrer et accéder à l’optimiseur de masse  » en bas.Cela vous amènera à Médias »Optimisation en masse. Le plugin 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 plus tard car la fermeture de la page n’interrompra pas le processus d’optimisation de l’image.Tester vos images WebP dans WordPressUne fois l’optimisation terminée, vous pouvez visiter une page ou un article contenant quelques images. Passez la souris sur une image, puis cliquez avec le bouton droit de la souris pour sélectionner «Ouvrir l’image dans un nouvel onglet».Cela ouvrira l’image dans un nouvel onglet du navigateur et vous pourrez voir l’extension .webp dans la barre d’adresse.Méthode 3. Utilisation d’images WebP dans WordPress avec SG OptimizerCette méthode est recommandée si vous êtes un utilisateur de SiteGround. SiteGround est l’une des meilleures sociétés d’hébergement WordPress. Ils offrent un plugin SG Optimizer gratuit à leurs utilisateurs qui vous permet d’optimiser vos performances WordPress.Il comprend également la possibilité d’optimiser les images WordPress. Tout d’abord, vous devez installer et activer le plugin SG Optimizer.Lors de l’activation, le plugin ajoutera un nouvel élément de menu à votre barre latérale d’administration intitulée «SG Optimizer». En cliquant dessus, vous serez redirigé vers la page des paramètres du plugin.À partir de là, vous pouvez activer les paramètres de mise en cache si vous souhaitez utiliser le système de mise en cache intégré de SiteGround.Après cela, vous pouvez passer à l’onglet Optimisation des médias et activer l’option «Générer des copies WebP de nouvelles images».En dessous, vous verrez l’option` Générer en masse des fichiers WebP  ». En cliquant dessus, vous commencerez à générer des copies WebP pour tous les fichiers image de votre médiathèque WordPress.Une fois terminé, votre site WordPress commencera à servir des images WebP.Test des images WebP dans SG OptimizerPour voir si votre site Web diffuse des images WebP, vous devez ouvrir une page de votre site avec quelques images. Après cela, cliquez avec le bouton droit de la souris et sélectionnez l’outil Inspecter. Cela ouvrira la console développeur où vous devez basculer vers l’onglet Réseau.De là, cliquez sur l’onglet ‘img’ puis rechargez la page (CTRL + R sous Windows et Commande + R sur Mac). Au fur et à mesure que votre site Web se recharge, vous verrez toutes les images chargées dans la console développeur.Comment intégrer les images WebP dans WordPress ? Notre conclusionNous espérons que cet article vous a aidé à apprendre à utiliser les images WebP dans WordPress. Ces trois méthodes ont été testées et sont approuvées par nos soins. Vous souhaitez développer vitre site ? On évoque dans un article dédié, les façons d’autoriser un utilisateur à télécharger vos images, n’hésitez pas à y jeter un oeil !

Méthode 2. Utilisation d’images WebP dans WordPress avec Imagify

Imagify est un plugin d’optimisation d’image 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 d’image WebP.

La première chose à faire est d’installer et d’activer le plugin Imagify.  Lors de l’activation, vous devez visiter Paramètres »Imagify pour configurer les paramètres du plugin. D’ici. cliquez sur le bouton «Créer une clé API gratuite» pour continuer.

Vous serez invité à saisir une adresse e-mail professionnelle, après quoi vous pourrez rechercher dans votre boîte de réception un e-mail contenant votre clé API. Copiez et collez la clé sur la page des paramètres du plugin et cliquez sur le bouton Enregistrer les modifications.

Ensuite, vous devez faire défiler jusqu’à la section Optimisation. Là, vous devez cocher les options à 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 parmi deux méthodes de livraison pour afficher des images WebP dans WordPress. Le premier est la méthode .htaccess, et le second utilise la balise . La méthode .htaccess est plus rapide, mais elle ne fonctionne pas si vous utilisez un service CDN. La méthode de balise fonctionne également avec les CDN, mais elle peut casser certains thèmes WordPress.  Vous pouvez choisir celui qui fonctionne bien pour votre site. Après cela, cliquez sur le bouton `Enregistrer et accéder à l’optimiseur de masse  » en bas.Cela vous amènera à Médias »Optimisation en masse. Le plugin 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 plus tard car la fermeture de la page n’interrompra pas le processus d’optimisation de l’image.Tester vos images WebP dans WordPressUne fois l’optimisation terminée, vous pouvez visiter une page ou un article contenant quelques images. Passez la souris sur une image, puis cliquez avec le bouton droit de la souris pour sélectionner «Ouvrir l’image dans un nouvel onglet».Cela ouvrira l’image dans un nouvel onglet du navigateur et vous pourrez voir l’extension .webp dans la barre d’adresse.Méthode 3. Utilisation d’images WebP dans WordPress avec SG OptimizerCette méthode est recommandée si vous êtes un utilisateur de SiteGround. SiteGround est l’une des meilleures sociétés d’hébergement WordPress. Ils offrent un plugin SG Optimizer gratuit à leurs utilisateurs qui vous permet d’optimiser vos performances WordPress.Il comprend également la possibilité d’optimiser les images WordPress. Tout d’abord, vous devez installer et activer le plugin SG Optimizer.Lors de l’activation, le plugin ajoutera un nouvel élément de menu à votre barre latérale d’administration intitulée «SG Optimizer». En cliquant dessus, vous serez redirigé vers la page des paramètres du plugin.À partir de là, vous pouvez activer les paramètres de mise en cache si vous souhaitez utiliser le système de mise en cache intégré de SiteGround.Après cela, vous pouvez passer à l’onglet Optimisation des médias et activer l’option «Générer des copies WebP de nouvelles images».En dessous, vous verrez l’option` Générer en masse des fichiers WebP  ». En cliquant dessus, vous commencerez à générer des copies WebP pour tous les fichiers image de votre médiathèque WordPress.Une fois terminé, votre site WordPress commencera à servir des images WebP.Test des images WebP dans SG OptimizerPour voir si votre site Web diffuse des images WebP, vous devez ouvrir une page de votre site avec quelques images. Après cela, cliquez avec le bouton droit de la souris et sélectionnez l’outil Inspecter. Cela ouvrira la console développeur où vous devez basculer vers l’onglet Réseau.De là, cliquez sur l’onglet ‘img’ puis rechargez la page (CTRL + R sous Windows et Commande + R sur Mac). Au fur et à mesure que votre site Web se recharge, vous verrez toutes les images chargées dans la console développeur.Comment intégrer les images WebP dans WordPress ? Notre conclusionNous espérons que cet article vous a aidé à apprendre à utiliser les images WebP dans WordPress. Ces trois méthodes ont été testées et sont approuvées par nos soins. Vous souhaitez développer vitre site ? On évoque dans un article dédié, les façons d’autoriser un utilisateur à télécharger vos images, n’hésitez pas à y jeter un oeil !

La méthode .htaccess est plus rapide, mais elle ne fonctionne pas si vous utilisez un service CDN. La méthode de balise fonctionne également avec les CDN, mais elle peut casser certains thèmes WordPress.  Vous pouvez choisir celui qui fonctionne bien pour votre site. Après cela, cliquez sur le bouton \`\` Enregistrer et accéder à l’optimiseur de masse  » en bas.

Cela vous amènera à Médias »Optimisation en masse. Le plugin 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 plus tard car la fermeture de la page n’interrompra pas le processus d’optimisation de l’image.

Tester vos images WebP dans WordPress

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

Cela ouvrira l’image dans un nouvel onglet du navigateur et vous pourrez voir l’extension .webp dans la barre d’adresse.

Méthode 3. Utilisation d’images WebP dans WordPress avec SG Optimizer

Cette méthode est recommandée si vous êtes un utilisateur de SiteGround. SiteGround est l’une des meilleures sociétés d’hébergement WordPress. Ils offrent un plugin SG Optimizer gratuit à leurs utilisateurs qui vous permet d’optimiser vos performances WordPress.

Il comprend également la possibilité d’optimiser les images WordPress. Tout d’abord, vous devez installer et activer le plugin SG Optimizer.

Lors de l’activation, le plugin ajoutera un nouvel élément de menu à votre barre latérale d’administration intitulée «SG Optimizer». En cliquant dessus, vous serez redirigé vers la page des paramètres du plugin.

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

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

En dessous, vous verrez l’option \`\` Générer en masse des fichiers WebP  ». En cliquant dessus, vous commencerez à générer des copies WebP pour tous les fichiers image de votre médiathèque WordPress.

Une fois terminé, votre site WordPress commencera à servir des images WebP.

Test des images WebP dans SG Optimizer

Pour voir si votre site Web diffuse des images WebP, vous devez ouvrir une page de votre site avec quelques images. Après cela, cliquez avec le bouton droit de la souris et sélectionnez l’outil Inspecter. Cela ouvrira la console développeur où vous devez basculer vers l’onglet Réseau.

De là, cliquez sur l’onglet ‘img’ puis rechargez la page (CTRL + R sous Windows et Commande + R sur Mac). Au fur et à mesure que votre site Web se recharge, vous verrez toutes les images chargées dans la console développeur.

Comment intégrer les images WebP dans WordPress ? Notre conclusion

Nous espérons que cet article vous a aidé à apprendre à utiliser les images WebP dans WordPress. Ces trois méthodes ont été testées et sont approuvées par nos soins. Vous souhaitez développer vitre site ? On évoque dans un article dédié, les façons d’autoriser un utilisateur à télécharger vos images, n’hésitez pas à y jeter un oeil !