Mode d’emploi
- Déposez un fichier WebP sur la zone de dépôt, cliquez pour en choisir un ou collez une image. Les fichiers PNG et JPEG fonctionnent aussi.
- Pour créer du WebP à partir d’un autre format, choisissez WebP dans « Convertir en » et réglez la « Qualité ».
- Si besoin, définissez une « Largeur max. », puis comparez la taille d’origine et la taille encodée.
- Copiez ou téléchargez le data URI, le Base64 brut, la balise img HTML, le background-image CSS ou le Markdown.
Qu’est-ce que WebP ?
WebP est un format d’image lancé par Google en 2010. Il réunit dans un même format une compression avec perte fondée sur le codec vidéo VP8, un mode sans perte distinct, un canal alpha et l’animation. Le type MIME est image/webp et, comme le fichier est un conteneur RIFF, la sortie Base64 commence par UklGR. Selon Google, les fichiers WebP sans perte sont environ 26 % plus petits que les PNG, et les fichiers avec perte 25 à 34 % plus petits que les JPEG à qualité comparable.
Pourquoi WebP se prête bien aux data URI
Base64 ajoute le même tiers à chaque fichier : la source la plus petite donne donc la chaîne la plus courte. WebP s’impose ainsi naturellement : une icône PNG transparente convertie en WebP garde sa transparence et devient généralement plus légère, et une photo JPEG rétrécit à qualité visuelle similaire. Des réglages de qualité très élevés peuvent produire un fichier plus gros qu’un original optimisé : vérifiez donc la taille encodée avant de copier.
Les WebP animés conservent toutes leurs images lorsque vous les encodez sans modification. Une conversion ou un redimensionnement redessine une seule image.
Prise en charge par les navigateurs et les clients
Tous les grands navigateurs actuels affichent le WebP : Chrome, Edge, Firefox, Opera et Safari 14 ou version ultérieure. Seuls de très anciens navigateurs comme Internet Explorer ne le prennent pas en charge. L’e-mail est un cas à part : plusieurs clients de messagerie de bureau, dont Outlook pour Windows, n’affichent pas le WebP ; utilisez donc PNG ou JPEG dans vos modèles d’e-mail.
Créer des data URI WebP en JavaScript
// Lire un fichier sélectionné par l’utilisateur
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Réencoder un canvas en WebP avec une qualité de 80 %
const uri = canvas.toDataURL('image/webp', 0.8);Si un navigateur ne sait pas encoder le WebP, toDataURL se rabat silencieusement sur le PNG : vérifiez donc que le résultat commence par data:image/webp.
Questions fréquentes
Puis-je convertir un PNG ou un JPEG en WebP Base64 ici ?
Oui. Chargez l’image, choisissez WebP dans « Convertir en » et réglez la « Qualité ». La conversion utilise l’encodeur intégré à votre navigateur, et le résultat est encodé en data:image/webp.
Base64 conserve-t-il l’animation WebP ?
Oui, à condition de ne sélectionner aucune conversion et de ne définir aucune largeur maximale. La chaîne Base64 contient alors le fichier exact, avec toutes ses images.
Tous les navigateurs affichent-ils les images data:image/webp ?
Toutes les versions actuelles de Chrome, Edge, Firefox, Opera et Safari les affichent. Ce n’est pas le cas d’Internet Explorer ni des versions de Safari antérieures à la 14.