Zo gebruik je het
- Sleep een WebP-bestand naar het sleepvak, klik om er een te kiezen of plak een afbeelding. PNG- en JPEG-bestanden werken ook.
- Wil je WebP maken van een ander formaat, kies dan WebP bij Converteren naar en stel de Kwaliteit in.
- Stel desgewenst een Max. breedte in en vergelijk daarna de originele en de gecodeerde grootte.
- Kopieer of download de data-URI, kale Base64, HTML-img-tag, CSS background-image of Markdown.
Wat is WebP?
WebP is een afbeeldingsformaat dat Google in 2010 heeft uitgebracht. Het biedt compressie met verlies op basis van de videocodec VP8, een aparte verliesvrije modus, een alfakanaal en animatie, allemaal in één formaat. Het MIME-type is image/webp, en omdat het bestand een RIFF-container is, begint de Base64-uitvoer met UklGR. Volgens Google zijn verliesvrije WebP-bestanden ongeveer 26% kleiner dan PNG, en zijn WebP-bestanden met verlies 25 tot 34% kleiner dan JPEG bij vergelijkbare kwaliteit.
Waarom WebP goed past bij data-URI's
Base64 voegt aan elk bestand hetzelfde derde toe, dus de kleinste bron geeft de kortste string. Daardoor ligt WebP voor de hand: een transparant PNG-pictogram dat naar WebP wordt geconverteerd, behoudt zijn transparantie en wordt meestal kleiner, en een JPEG-foto wordt kleiner bij een vergelijkbare visuele kwaliteit. Zeer hoge kwaliteitsinstellingen kunnen een bestand opleveren dat groter is dan een geoptimaliseerd origineel, dus controleer de gecodeerde grootte voordat je kopieert.
Geanimeerde WebP-bestanden behouden al hun frames als je ze ongewijzigd codeert. Bij converteren of verkleinen wordt slechts één frame opnieuw weergegeven.
Ondersteuning in browsers en e-mailprogramma's
Alle huidige grote browsers tonen WebP: Chrome, Edge, Firefox, Opera en Safari 14 of later. Alleen zeer oude browsers zoals Internet Explorer ondersteunen het niet. Bij e-mail ligt dat anders: verschillende e-mailprogramma's voor de desktop, waaronder Outlook voor Windows, geven WebP niet weer, dus gebruik PNG of JPEG in e-mailtemplates.
WebP-data-URI's maken in JavaScript
// Een bestand lezen dat de gebruiker heeft gekozen
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Een canvas opnieuw coderen als WebP met 80% kwaliteit
const uri = canvas.toDataURL('image/webp', 0.8);Als een browser geen WebP kan coderen, valt toDataURL stilzwijgend terug op PNG, dus controleer of het resultaat begint met data:image/webp.
Veelgestelde vragen
Kan ik hier PNG of JPEG omzetten naar WebP-Base64?
Ja. Laad de afbeelding, kies WebP bij Converteren naar en stel de Kwaliteit in. De conversie gebruikt de encoder die in je browser is ingebouwd, en het resultaat wordt gecodeerd als data:image/webp.
Blijft de animatie van WebP behouden met Base64?
Ja, op voorwaarde dat er geen conversie is gekozen en geen Max. breedte is ingesteld. De Base64-string bevat dan het exacte bestand met alle frames.
Tonen alle browsers afbeeldingen als data:image/webp?
Alle huidige versies van Chrome, Edge, Firefox, Opera en Safari doen dat. Internet Explorer en Safari-versies van vóór 14 niet.