Comment compresser des images WebP

Pour compresser un WebP, réencodez-le en mode avec perte avec une qualité autour de 75, la valeur par défaut de l'encodeur cwebp de Google, puis redimensionnez-le à la largeur à laquelle il est réellement affiché. Utilisez le mode sans perte ou quasi sans perte pour les graphiques en aplats et les captures d'écran. Pour une limite de taille stricte, un compresseur WebP qui accepte une cible en Ko trouve la bonne qualité pour vous.

Le WebP est déjà souvent plus léger que le JPEG et le PNG, mais un WebP mal enregistré peut quand même être lourd. Le mode, la valeur de qualité et les dimensions en pixels comptent tous, et les dimensions comptent généralement le plus.

Comment compresser des images WebP en ligne

Quand un formulaire ou un budget de page impose un chiffre fixe, un outil à taille cible est plus rapide que les essais successifs. L'outil Compresser WebP fonctionne dans votre navigateur : le fichier n'est donc pas envoyé à un serveur.

1. Ouvrez l'outil et ajoutez un ou plusieurs fichiers WebP.
2. Saisissez la taille voulue en Ko, ou réglez la qualité à la main.
3. Lancez la compression. L'outil baisse d'abord la qualité et ne réduit les dimensions que si la qualité seule ne permet pas de passer sous la cible.
4. Téléchargez le résultat et vérifiez-le avec un zoom à 100 % sur sa zone la plus chargée, comme des cheveux, du feuillage ou du petit texte.

Si vous partez d'un JPEG ou d'un PNG, convertissez-le d'abord avec PNG ou JPG en WebP. Convertissez à partir de l'original chaque fois que possible. Le WebP conserve fidèlement les artefacts en blocs d'un JPEG déjà compressé, et vous payez en octets pour les stocker.

Vous découvrez le format ? Le guide sur ce qu'est un fichier WebP explique d'où il vient, ce qu'il prend en charge et quelles applications l'ouvrent.

Avec perte, sans perte ou quasi sans perte : quel mode WebP choisir ?

WebP dispose de plusieurs façons de stocker une image, et le mode compte plus que n'importe quelle valeur de qualité.

WebP avec perte

Ce mode fonctionne comme le JPEG. Il supprime des détails que vous avez peu de chances de remarquer. Utilisez-le pour les photos, les photos de produits, les images d'en-tête et tout ce qui comporte des dégradés doux. Il gère aussi la transparence, ce que le JPEG ne sait pas faire, donc un produit détouré sur fond transparent peut rester en mode avec perte et léger.

WebP sans perte

Chaque pixel est conservé à l'identique, comme en PNG. Utilisez-le pour les logos, les icônes, les schémas et les captures d'écran avec du texte net. Le résultat est généralement plus léger que la même image enregistrée en PNG.

WebP quasi sans perte

Une option intermédiaire de l'encodeur de Google. Elle ajuste légèrement les valeurs des pixels pour que l'encodeur sans perte puisse mieux les compresser, avec peu d'effet visible. Elle convient aux captures d'écran et aux illustrations pour lesquelles le mode avec perte bavarait sur les contours mais le mode sans perte reste trop lourd.

Vous ne savez pas quel mode convient ? Exportez l'image des deux façons et comparez. Gardez le fichier le plus léger qui reste correct en taille réelle. Une capture d'écran contenant une photo collée est le cas délicat classique, et le mode quasi sans perte l'emporte souvent.

Google documente les trois modes, ainsi que les options de qualité et de taille cible, sur la page de référence de cwebp.

Quel réglage de qualité utiliser pour compresser un WebP ?

La qualité WebP va de 0 à 100, et cwebp utilise 75 quand vous n'en indiquez pas. Cette valeur par défaut est un bon point de départ pour les photos. À partir de là :

• Montez jusqu'à environ 80 à 85 pour les grandes images d'en-tête que les visiteurs regarderont de près, ou les images avec des tons chair et des textures fines.
• Descendez à environ 60 à 70 pour les miniatures, les images de cartes et les photos d'arrière-plan recouvertes de texte.
• Évitez les valeurs très basses sur les images qui contiennent du texte. Les lettres bavent vite en mode avec perte.

Les valeurs de qualité WebP ne correspondent pas exactement à celles du JPEG. Ne reprenez pas votre réglage JPEG en supposant qu'il signifie la même chose. Comparez le résultat à l'œil à la taille où il sera affiché, idéalement sur un téléphone comme sur un ordinateur portable.

Comment réduire la taille d'un WebP en le redimensionnant

Les dimensions comptent généralement plus que la qualité. Une image enregistrée en 3000 pixels de large pour un emplacement de 800 pixels à l'écran contient environ 14 fois plus de pixels que nécessaire. Aucun réglage de qualité ne compense un tel écart.

1. Repérez la plus grande largeur à laquelle l'image apparaît sur votre site. Votre thème ou les réglages de mise en page l'indiquent généralement.
2. Doublez-la si vous la voulez nette sur les écrans de téléphones et d'ordinateurs portables à haute densité.
3. Redimensionnez à cette largeur avec l'outil Redimensionner une image ou votre éditeur, en gardant le rapport largeur/hauteur verrouillé.
4. Compressez la copie redimensionnée.

Pour les sites responsives, exportez quelques largeurs et laissez le navigateur choisir avec srcset. Le guide MDN sur les images responsives explique comment fonctionne ce balisage. Le navigateur télécharge alors le petit fichier sur un téléphone et le grand sur un écran large.

Les WebP animés demandent la même réflexion. Chaque image ajoute du poids, donc réduire le nombre d'images ou la taille en pixels aide bien plus que retoucher la qualité. Une courte boucle en plus petite taille est généralement la solution pratique.

Pourquoi mon fichier WebP est-il plus gros que l'original ?

Cela arrive plus souvent qu'on ne le croit. Causes courantes :

• La source était un petit PNG bien optimisé avec peu de couleurs, converti en mode avec perte en haute qualité. Essayez le mode sans perte pour ce type d'image.
• La source était déjà un JPEG de faible qualité. Le réencoder en qualité plus élevée pousse le WebP à stocker en détail tout le bruit du JPEG.
• La qualité était réglée à 100. En mode avec perte, cela donne un gros fichier pour presque aucun gain visible.
• L'image a gardé les dimensions complètes de l'appareil photo.

Certains outils conservent automatiquement l'original si la nouvelle version est plus lourde. Si le vôtre ne le fait pas, comparez vous-même les deux tailles avant de remplacer quoi que ce soit sur votre site.

Les métadonnées sont rarement en cause avec le WebP. Par défaut, cwebp ne copie aucune donnée EXIF, XMP ou de profil de couleur depuis la source, même si d'autres applications peuvent le faire. Si les couleurs paraissent délavées après la conversion, un profil de couleur manquant en est probablement la raison. Réexportez en conservant le profil (cwebp propose une -metadata icc option pour cela).

Quels réglages de compression WebP pour les sites web et les formulaires ?

Pour un site web, raisonnez en poids de page. Une image d'en-tête est l'élément le plus lourd de la plupart des pages, alors accordez-lui le plus d'attention : bonne largeur, mode avec perte, qualité entre 70 et le début des 80. Les miniatures et les icônes peuvent descendre bien plus bas ou passer en mode sans perte. Le guide WebP ou PNG approfondit le choix des formats pour les performances d'un site.

Tous les grands navigateurs actuels affichent le WebP, il est donc sûr pour les sites web. Les formulaires d'envoi, c'est autre chose. Beaucoup de portails et d'anciennes applications de bureau le refusent encore. Sur Mac, Aperçu ouvre les fichiers WebP, mais son menu d'export ne propose pas le WebP comme format de sortie, donc vous ne pouvez pas en réenregistrer un avec.

Si un portail ou une application refuse votre fichier, convertissez-le avec WebP en image. Choisissez JPG pour les photos et PNG si l'image comporte de la transparence. Compressez ensuite le JPG ou le PNG à la limite du formulaire, comme d'habitude.

Questions fréquentes