Si vous souhaitez accélérer votre site WordPress, la réduction de la taille de fichier de vos images offre un retour sur investissement significatif. En moyenne, les images représentent environ la moitié de la taille du fichier d’une page web, donc même des améliorations mineures peuvent donner des résultats énormes. WebP peut vous aider énormément à cet égard !

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.

La plupart des navigateurs modernes et WordPress 5.8+ supportent d’emblée WebP. Dans cet article, nous allons nous plonger dans ce nouveau format d’image passionnant et vous afficher comment vous pouvez en tirer parti.

Prêts ? Commençons !

Qu’est-ce que le WebP ?

Alors, qu’est-ce qu’un fichier WebP ? En un mot, WebP est un format d’image développé par Google pour optimiser les images mieux que les formats d’image populaires (à l’époque). Par exemple, vous avez des formats d’image comme JPEG ou JPG et PNG.

Note : vérifiez comment les différents types de fichiers d’image peuvent avoir un impact sur la vitesse de votre site.

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 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)
  • Microsoft Edge
  • iOS et macOS Safari (macOS 11 Big Sur et versions ultérieures uniquement)
  • Opéra (ordinateur et mobile)

Au moment où nous rédigeons cet article, Safari ne supporte que partiellement les images WebP.

Internet Explorer ne dispose pas non plus du support WebP (mais Edge le prend en charge car il est basé sur Chromium). Cependant, l’utilisation d’IE s’est réduite à moins de 1 % du total des utilisateurs d’Internet. C’est une aubaine pour tout le monde sur le web !

Au total, environ 95 % des utilisateurs d’Internet utilisent un navigateur qui prend en charge WebP. Donc, bien qu’il bénéficie certainement du support de la majorité, ces 5 % sont un obstacle mineur, surtout quand il s’agit d’utilisateurs de Safari sur d’anciennes versions de macOS. Dans notre tutoriel WordPress WebP ci-dessous, nous vous montrerons comment gérer cette situation pour que tous vos visiteurs aient une bonne expérience.

Support de WebP sur les principaux navigateurs.
Support de WebP sur les principaux navigateurs.

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 petit que les images PNG similaires

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

À partir de WordPress 5.8, vous pourrez utiliser le format d’image WebP de la même manière que les formats JPEG, PNG et GIF. Téléversez simplement vos images dans votre bibliothèque de médias et incluez-les dans votre contenu. Comme WordPress 5.8+ supporte le format WebP par défaut, vous n’avez pas besoin d’installer des extensions tierces pour téléverser des images WebP. Cela devrait suffire pour la plupart des cas d’utilisation courants.

Pour commencer immédiatement, vous pouvez vous référer à notre guide d’introduction rapide sur l’utilisation des images WebP dans WordPress 5.8+. Nous vous suggérons de lire les mises en garde concernant le support de WebP dans WordPress.

Cependant, environ 5 % des personnes (principalement les utilisateurs de Safari sur les anciens macOS) utilisent un navigateur web qui ne supporte pas 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.

De plus, la génération d’images WebP n’est pas aussi simple que celle d’une image JPG/JPEG, qui est le format de fichier image par défaut sur la plupart des appareils photo, des smartphones et des bibliothèques d’images en ligne. WordPress ne supporte pas (encore !) la conversion automatique des images au format WebP.

Ne vous inquiétez pas ! Il existe une solution.

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 :

  • Convertissez le fichier JPEG en WebP et servez la version WebP pour Chrome, Firefox, Edge, etc.
  • Affichez le fichier JPEG original aux visiteurs naviguant avec Safari (sur les anciennes versions de macOS) et d’autres navigateurs qui ne supportent pas 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.

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. 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>
Comment activer les images WordPress WebP dans Imagify
Comment activer les images WordPress WebP dans Imagify

Comme pour ShortPixel, si vous êtes hébergé chez Kinsta, vous devez créer une règle Nginx pour les caches WebP (contactez 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 d’image en temps réel, Optimole peut également présenter des images WebP aux visiteurs avec des navigateurs qui 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 nuire à l’expérience utilisateur. WebP est un format d’image moderne qui fait exactement cela en offrant une réduction d’environ 25 % de la taille du fichier par rapport aux fichiers JPEG ou PNG comparatifs.

Environ 95 % des utilisateurs d’Internet utilisent déjà un navigateur qui supporte WebP. Les versions 5.8+ de WordPress supportent également WebP dès le départ. Il n’y a donc aucune raison de ne pas l’utiliser.

Toutefois, une minorité de navigateurs, notamment Safari sur les anciennes versions de macOS, n’offrent toujours pas de support WebP. Par conséquent, vous ne pouvez pas encore 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 sert les versions WebP aux visiteurs dont les navigateurs le supportent tout en utilisant les images originales aux visiteurs dont les navigateurs ne le supportent pas.

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

Si vous avez des questions sur l’utilisation de WebP sur WordPress, n’hésitez pas à nous les poser dans les commentaires ci-dessous !


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 35 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.