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 :
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.
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 :
- La célèbre image de Lenna
- 24 images de la suite d’images en couleurs Kodak
- 100 images de Tecnick.com
- Un échantillon aléatoire de plus de 11 000 images provenant de la recherche d’images de Google
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.
La fonctionnalité d’optimisation des images de Kinsta
Cette première n’est pas exactement une extension, mais plutôt une fonctionnalité intégrée : L’optimisation des images de Kinsta.
Cette fonctionnalité – accessible via le tableau de bord personnalisé de Kinsta, MyKinsta – crée automatiquement des copies WebP optimisées des images originales de votre site, puis sert le plus petit des deux fichiers image à vos visiteurs.
En s’assurant toujours que le plus petit fichier possible est récupéré, l’optimisation d’image augmente immédiatement les temps de chargement, ce qui peut améliorer considérablement vos résultats de SEO et l’expérience de vos utilisateurs. La fonctionnalité tire directement parti du CDN ultrarapide de Kinsta pour livrer les fichiers encore plus rapidement.
Les propriétaires de sites peuvent choisir entre une compression avec ou sans perte pour leurs images WebP, en fonction de leurs besoins. L’optimisation peut également être activée ou désactivée à volonté si vous avez besoin de faire des tests.
La fonctionnalité d’optimisation des images est entièrement gratuite pour tous les clients de Kinsta. Voici comment l’activer :
- Téléversez vos images dans votre médiathèque WordPress hébergée par Kinsta.
- Connectez-vous à votre tableau de bord MyKinsta.
- Naviguez vers WordPress Sites > Nom du site > CDN.
- Cliquez sur le bouton Réglages sous la section Optimisation des images.
- Choisissez entre la compression sans perte et la compression avec perte, puis cliquez sur Enregistrer les réglages.
Si vous n’êtes pas encore sur la plateforme Kinsta, vous pouvez effectuer un essai gratuit de cette fonctionnalité en planifiant une démonstration.
Compression sans perte ou avec perte
Vous pouvez choisir entre la compression sans perte et la compression avec perte pour vos fichiers. Bien que les deux méthodes compriment vos fichiers d’images et retirent leurs métadonnées, il y a une grande différence entre elles :
- L’optimisation des images sans perte : La compression d’image sans perte n’a aucun impact sur la qualité de vos images. Vous devriez choisir cette option si la qualité de l’image est plus importante pour vous que la vitesse.
- Optimisation d’image avec perte : La compression d’image avec perte peut réduire la qualité de vos images. Choisissez cette option pour maximiser et privilégier la vitesse à la qualité de l’image.
Ensuite, nous examinerons certaines extensions WordPress installables pour l’optimisation.
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 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 :
Pour activer les images WebP, allez dans l’onglet Avancé et :
- Cochez la case pour les images WebP
- Cochez la case pour livrer les versions WebP… (ceci apparaît après avoir coché la première case)
- 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)
- Laisser la sélection par défaut Uniquement via les crochets (hooks) WordPress
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
Imagify est une extension d’optimisation d’images très populaire, du même développeur que WP Rocket.
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.
Pour activer les images WebP, faites défiler la page vers le bas jusqu’à la section Optimisation et trouvez la section Format WebP :
- Cochez la case pour créer des versions webp des images
- Cochez la case pour afficher les images au format webp…
- Sélectionnez le bouton radio pour utiliser les balises <picture>
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
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 :
- Elle peut servir vos images via son propre CDN (alimenté par Amazon CloudFront).
- 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 :
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.
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. Et n’oubliez pas que les clients de Kinsta peuvent générer automatiquement des images WebP compressées, sans cout d’espace disque, en utilisant la fonctionnalité gratuite et intégrée d’optimisation des images de Kinsta.
Si vous avez des questions sur l’utilisation de WebP sur WordPress, n’hésitez pas à nous les poser dans les commentaires ci-dessous !
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Laisser un commentaire