Si vous souhaitez accélérer votre site WordPress, trouver des moyens de réduire la taille de vos images vous offre un grand retour sur investissement.

En moyenne, les images représentent environ la moitié de la taille du fichier d’une page web, donc même de petites améliorations peuvent avoir de grands résultats.

WebP est un format d’image moderne qui peut vous aider à réduire la taille de vos images sans en modifier l’aspect. En moyenne, apprendre à convertir une image en WebP permet de réduire sa taille d’environ 25 à 35 % sans perte de qualité perceptible.

C’est pourquoi nous allons nous plonger dans le sujet dans cet article de blog !

Prêts ? Commençons !

Qu’est-ce que le WebP ?

Alors…qu’est-ce qu’un fichier WebP ? En bref, WebP est un format d’image développé par Google. Par exemple, vous avez des formats d’image comme JPEG ou JPG et PNG, n’est-ce pas ? Eh bien, WebP est un format de fichier alternatif pour les images.

WebP s’efforce de fournir le même fichier image, mais avec une taille de fichier plus petite. En réduisant la taille de vos fichiers image, vous pouvez toujours offrir la même expérience aux visiteurs de votre site web, mais votre site se chargera plus rapidement.

Par exemple, dans son étude sur la compression WebP, Google a constaté qu’un fichier image WebP est en moyenne…

  • 25-34% plus petit qu’une image JPEG comparable.
  • 26% plus petit qu’une image PNG comparable.

C’est pourquoi, si vous utilisez PageSpeed Insights pour votre site, l’une des nombreuses recommandations est de servir les images dans des formats de nouvelle génération comme WebP :

Google PageSpeed Insights suggère d'utiliser des images WebP

Google PageSpeed Insights suggère d’utiliser des images WebP

Comment le format WebP de Google permet-il de réduire la taille des fichiers ?

Le WebP prend en charge la compression avec et sans perte, la réduction exacte dépendra donc de l’utilisation de la compression avec ou sans perte.

Avec la compression WebP avec perte (lossy), le WebP utilise ce qu’on appelle un « codage prédictif » pour réduire la taille du fichier. Le codage prédictif utilise les valeurs des pixels voisins d’une image pour prédire les valeurs et ne codifie que la différence. Il est basé sur le codage d’images clés VP8.

La compression WebP sans perte (lossless) utilise un ensemble de méthodes beaucoup plus compliquées qui ont été développées par l’équipe WebP.

Si vous souhaitez en savoir plus sur les techniques de compression WebP en détail, cet article est un bon point de départ.

Quels sont les navigateurs web qui prennent en charge WebP ?

Pour que les images WebP fonctionnent, le navigateur web d’un visiteur doit les prendre en charge. Malheureusement, si la prise en charge des navigateurs a beaucoup progressé, la compatibilité WebP n’est toujours pas universelle.

Les images WebP sont prises en charge par les navigateurs les plus courants tels que

  • Chrome (ordinateur et mobile).
  • Firefox (ordinateur et mobile).
  • Edge.
  • Opéra (ordinateur et mobile).

Cependant, le plus grand obstacle est Safari. Au moment où nous écrivons cet article, ni la version pour ordinateur ni la version mobile de Safari ne prennent en charge les images WebP. Apple a brièvement expérimenté la prise en charge du WebP pour Safari en 2016, mais il n’y a pas eu d’autre poussée depuis.

Internet Explorer ne prend pas non plus en charge WebP (mais Edge le prend en charge car il est basé sur le chrome).

Au total, environ 77 % des utilisateurs d’Internet utilisent un navigateur qui prend en charge WebP. Bien qu’il soit certainement soutenu par la majorité, ces 23 % sont trop importants pour être ignorés (dans notre tutoriel WordPress WebP ci-dessous, nous vous montrerons comment gérer cela afin que tous vos visiteurs aient une expérience agréable) :

Support WebP

Support WebP

Comparaison des tailles WebP, JPG et PNG

Selon les tests de Google, les images WebP sont :

  • 25-34 % plus légères que les images JPEG comparables.
  • 26 % plus légères que les images PNG comparables.

Si vous souhaitez en savoir plus sur la méthodologie de Google, vous pouvez trouver des liens directs vers les résultats complets ci-dessous :

Les deux tests sont basés sur plus de 11 000 images dont :

Comment utiliser les images WebP sur WordPress

Comme tous les navigateurs ne prennent pas en charge les images WebP, vous ne pouvez pas simplement téléverser des fichiers d’images WebP dans votre bibliothèque et les utiliser directement dans WordPress comme vous le feriez avec des JPEG et des PNG.

Là encore, 23 % des personnes (y compris tous les utilisateurs de Safari) utilisent un navigateur web qui ne prend pas en charge WebP. Si vous convertissez des images WebP et les utilisez directement dans votre contenu, ces visiteurs ne pourront pas voir vos images, ce qui ruinera leur expérience de navigation.

Ne vous inquiétez pas, il y a une solution !

Au lieu de téléverser les images WebP directement dans WordPress, vous pouvez utiliser une extension WordPress qui convertit vos images originales au format WebP et fournit également l’image originale comme solution de repli si le navigateur d’un visiteur ne prend pas en charge WebP.

Par exemple, si vous téléversez un fichier JPEG sur votre site, l’extension :

  • Convertira le fichier JPEG en WebP et utilisera la version WebP pour les visiteurs qui naviguent avec Chrome, Firefox, etc.
  • Affichera le fichier JPEG original aux visiteurs qui naviguent avec Safari et d’autres navigateurs qui ne prennent pas en charge WebP.

Ainsi, tout le monde peut voir votre image et tout le monde en profite le plus rapidement possible.

Ci-dessous, nous allons passer en revue quelques-uns des meilleures extensions WordPress pour WebP, qui fonctionnent toutes avec Kinsta et le CDN de Kinsta.

Info

Si vous êtes hébergé chez Kinsta, vous devrez contacter notre support afin que nous puissions créer une règle Nginx pour les caches WebP pour certaines de ces extensions.

ShortPixel

Extension WordPress ShortPixel

Extension WordPress ShortPixel

ShortPixel est une extension WordPress d’optimisation d’images très populaire qui peut vous aider à redimensionner et à compresser automatiquement les images que vous téléversez sur votre site WordPress.

Dans le cadre de sa liste de fonctionnalités, ShortPixel peut également vous aider à convertir automatiquement des images en WebP et à les transmettre aux navigateurs qui prennent en charge WebP.

ShortPixel propose un plan gratuit limité qui vous permet d’optimiser gratuitement ~100 images par mois. Ensuite, les plans payants commencent à 4,99 $ par mois pour un maximum de 5 000 images/crédits ou 9,99 $ pour un pack de 10 000 crédits.

ShortPixel compte comme un crédit chaque taille d’image WordPress que vous optimisez. Ainsi, si vous souhaitez optimiser plusieurs tailles de miniatures d’images, une image pourrait en principe utiliser plusieurs crédits. Il n’y a pas de limite de taille de fichier pour les images.

Vous pouvez répartir vos crédits ShortPixel sur un nombre illimité de sites web – il n’y a pas de limite par site (et tous vos sites web peuvent utiliser le même compte ShortPixel).

Pour utiliser ShortPixel pour servir des images WebP sur WordPress, vous devez installer l’extension depuis WordPress.org et ajouter votre clé API (que vous pouvez obtenir en vous inscrivant pour un compte ShortPixel gratuit).

Dans l’onglet Général, vous pouvez définir les réglages de base du fonctionnement de l’optimisation des images. Par exemple, le niveau de compression à utiliser et le redimensionnement ou non des images :

Comment définir le niveau de compression et les dimensions de l'image dans ShortPixel

Comment définir le niveau de compression et les dimensions de l’image dans ShortPixel

Pour activer les images WebP, allez dans l’onglet Avancé et :

  1. Cochez la case pour les images WebP
  2. Cochez la case pour livrer les versions WebP. (ceci apparaît après avoir coché la première case)
  3. Sélectionnez la case d’option Utiliser la syntaxe de la balise <PICTURE> (elle apparaît après avoir coché la case précédente)
  4. Laisser la sélection par défaut Uniquement via les crochets (hooks) WordPress
Comment activer les images WordPress WebP dans ShortPixel

Comment activer les images WordPress WebP dans ShortPixel

Ensuite, enregistrez vos modifications.

Si vous êtes hébergé chez Kinsta, ShortPixel vous donnera un message d’avertissement sur la configuration des fichiers de configuration du serveur sur Nginx. Pour configurer ces paramètres, vous pouvez contacter le support de Kinsta et nous serons heureux de mettre en place la configuration du serveur pour vous.

Imagify

Extension WordPress Imagify

Extension WordPress Imagify

Imagify est une extension d’optimisation d’images très populaire, du même développeur que WP Rocket (qui est l’une des rares extensions de mise en cache qui fonctionne avec Kinsta).

Elle peut automatiquement compresser et redimensionner les images que vous téléversez sur votre site WordPress. Ensuite, elle peut également vous aider à les convertir en WebP et à en proposer des versions WebP aux visiteurs dont les navigateurs le prennent en charge.

En termes de fonctionnalités, ShortPixel et Imagify partagent de nombreuses similitudes. La plus grande différence se situe au niveau des prix. Alors que ShortPixel vous facture en fonction des images sans limite de taille par image, Imagify vous facture en fonction de la taille globale du fichier, sans limite d’image.

Ainsi, si vous devez optimiser de nombreuses images de grande taille, l’approche de ShortPixel pourrait être moins coûteuse. Mais si vous devez optimiser un grand nombre de petites images, l’approche d’Imagify pourrait être moins coûteuse.

Imagify dispose d’un niveau gratuit limité qui permet d’obtenir 25 Mo d’optimisations par mois. Après cela, les plans payants commencent à 4,99 $ par mois pour un maximum de 1 Go ou 9,99 $ pour un crédit unique de 1 Go.

Comme pour ShortPixel, vous pouvez répartir les limites de votre compte sur un nombre illimité de sites web.

Pour utiliser Imagify afin de fournir des images WebP WordPress, vous devez installer l’extension depuis WordPress.org et ajouter votre clé API pour commencer.

Une fois que vous avez activé l’extension, vous pouvez utiliser les réglages généraux pour choisir votre niveau de compression.

Comment définir le niveau de compression dans Imagify

Comment définir le niveau de compression dans Imagify

Pour activer les images WebP, faites défiler la page vers le bas jusqu’à la section Optimisation et trouvez la section Format WebP :

  1. Cochez la case pour créer des versions webp des images
  2. Cochez la case pour afficher les images au format webp
  3. Sélectionnez le bouton radio pour utiliser les balises <picture>.
  4. Si vous êtes hébergé chez Kinsta et utilisez le CDN de Kinsta, saisissez l’URL de votre CDN de Kinsta dans la case Si vous utilisez un CDN box (nous vous dirons comment trouver l’URL du CDN de Kinsta ci-dessous)
Comment activer les images WordPress WebP dans Imagify

Comment activer les images WordPress WebP dans Imagify

Si vous utilisez le CDN de Kinsta, vous pouvez trouver l’URL de votre CDN en ouvrant votre site dans le tableau de bord MyKinsta et en vous rendant dans l’onglet Kinsta CDN des réglages du site :

Comment trouver l'URL du CDN de Kinsta

Comment trouver l’URL du CDN de Kinsta

Comme pour ShortPixel, si vous êtes hébergé chez Kinsta, vous devez créer une règle Nginx pour les caches WebP (contactez simplement le support Kinsta).

Optimole

Extension WordPress Optimole

Extension WordPress Optimole

Optimole est une extension WordPress d’optimisation d’images qui fonctionne un peu différemment d’Imagify et ShortPixel. Optimole peut automatiquement compresser et redimensionner vos images. Cependant, elle possède également deux autres caractéristiques notables :

  1. Elle peut servir vos images via son propre CDN (alimenté par Amazon CloudFront).
  2. Elle offre des images adaptatives en temps réel, grâce auxquelles Optimole fournit l’image de taille optimale pour chaque visiteur. Par exemple, une personne naviguant sur un petit écran obtiendra une image de plus faible résolution qu’une personne naviguant sur un écran Retina.

Cette approche est similaire à d’autres services d’optimisation/manipulation en temps réel comme Cloudinary, imgix, KeyCDN Image Processing, etc.

Dans le cadre de cette optimisation des images en temps réel, Optimole peut également fournir des images WebP aux visiteurs dont les navigateurs le supportent.

Optimole a un plan gratuit limité qui peut gérer la diffusion d’images à environ 5 000 visiteurs par mois. Ensuite, les plans payants commencent à 19 $ par mois pour environ 25 000 visiteurs.

Pour commencer, vous devez installer l’extension depuis WordPress.org et l’activer avec une clé API (que vous pouvez obtenir en vous inscrivant pour un compte Optimole gratuit).

Une fois que vous aurez fait cela, Optimole commencera à optimiser automatiquement vos images et à les diffuser via son CDN. Le support WebP est activé par défaut, il n’est donc pas nécessaire de l’activer manuellement.

Pour configurer d’autres réglages, comme les niveaux de compression et le comportement de mise à l’échelle, vous pouvez aller sur Media Optimole Réglages :

La zone des réglages d'Optimole - Les images WordPress WebP sont activées par défaut

La zone des réglages d’Optimole – Les images WordPress WebP sont activées par défaut

Comme Optimole se charge de livrer vos images via son propre CDN, il n’est pas nécessaire de définir des règles Nginx si vous êtes hébergé chez Kinsta.

Augmentez la vitesse du site ⬆️ tout en diminuant la taille des images ⬇️. Apprenez à tirer parti du format WebP sur votre site #WordPress 💥Click to Tweet

Résumé

Les images de votre site WordPress représentent une grande partie de la taille du fichier d’une page moyenne. Si vous pouvez trouver des moyens de réduire la taille de vos images, vous pouvez accélérer votre site sans modifier l’expérience de vos visiteurs.

WebP est un format d’image moderne qui peut offrir une réduction d’environ 25 % de la taille des fichiers par rapport aux fichiers JPEG ou PNG.

La plupart des navigateurs modernes prennent en charge WebP et environ 77 % des internautes ont un navigateur qui prend en charge WebP. Toutefois, certains navigateurs, notamment Safari, ne prennent toujours pas en charge WebP, de sorte que vous ne pouvez pas servir des images WebP à tous les visiteurs.

Pour résoudre ce problème, vous pouvez utiliser une extension WordPress qui convertit les images en WebP et en fournit des versions WebP aux visiteurs dont les navigateurs prennent en charge ce format, tout en utilisant les images originales aux visiteurs dont les navigateurs ne le prennent pas en charge.

Voici trois extensions qui peuvent vous aider à le faire :

  • ShortPixel.
  • Imagify.
  • Optimole.

Pour plus de tactiques d’optimisation des images, consultez notre guide complet d’optimisation des images pour les performances du web.

Vous avez des questions sur l’utilisation de WebP sur WordPress ? Posez-les nous dans les commentaires.


Si vous avez aimé cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Accélérez votre site Web et obtenez le support 24/7 de notre équipe de vétérans de WordPress. Notre infrastructure propulsée par Google Cloud met l’accent sur la mise à l’échelle automatique, la performance et la sécurité. Laissez-nous vous montrer la différence de Kinsta ! Découvrez nos plans