Så använder du verktyget
- Släpp en WebP-fil på släppytan, klicka för att välja en fil eller klistra in en bild. PNG- och JPEG-filer fungerar också.
- Vill du skapa WebP från ett annat format väljer du WebP under Konvertera till och ställer in Kvalitet.
- Ange vid behov en Maxbredd och jämför sedan originalstorleken med den kodade storleken.
- Kopiera eller ladda ned data URI, rå Base64, img-tagg i HTML, CSS background-image eller Markdown.
Vad är WebP?
WebP är ett bildformat som Google lanserade 2010. Det erbjuder förstörande komprimering baserad på videokodeken VP8, ett separat förlustfritt läge, alfakanal och animation, allt i ett och samma format. MIME-typen är image/webp, och eftersom filen är en RIFF-container börjar Base64-resultatet med UklGR. Enligt Google är förlustfria WebP-filer ungefär 26 % mindre än PNG, och filer med förstörande komprimering 25 till 34 % mindre än JPEG vid jämförbar kvalitet.
Därför passar WebP för data URI:er
Base64 lägger till samma tredjedel på varje fil, så den minsta källfilen ger den kortaste strängen. Det gör WebP till ett naturligt val: en transparent PNG-ikon som konverteras till WebP behåller sin transparens och krymper oftast, och ett JPEG-foto blir mindre med liknande visuell kvalitet. Mycket höga kvalitetsinställningar kan ge en fil som är större än ett optimerat original, så kontrollera den kodade storleken innan du kopierar.
Animerade WebP-filer behåller alla bildrutor när du kodar dem oförändrade. Konvertering eller storleksändring renderar om en enda bildruta.
Stöd i webbläsare och e-postklienter
Alla aktuella större webbläsare visar WebP: Chrome, Edge, Firefox, Opera och Safari 14 eller senare. Bara mycket gamla webbläsare som Internet Explorer saknar stöd. E-post är en annan sak: flera e-postprogram för datorer, bland annat Outlook för Windows, visar inte WebP, så använd PNG eller JPEG i e-postmallar.
Skapa WebP-data URI:er i JavaScript
// Läs en fil som användaren har valt
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Koda om en canvas som WebP med 80 % kvalitet
const uri = canvas.toDataURL('image/webp', 0.8);Om en webbläsare inte kan koda WebP faller toDataURL tyst tillbaka på PNG, så kontrollera att resultatet börjar med data:image/webp.
Vanliga frågor
Kan jag konvertera PNG eller JPEG till WebP i Base64 här?
Ja. Läs in bilden, välj WebP under Konvertera till och ställ in Kvalitet. Konverteringen använder webbläsarens inbyggda kodare, och resultatet kodas som data:image/webp.
Behåller Base64 animationen i WebP?
Ja, förutsatt att ingen konvertering är vald och ingen Maxbredd är angiven. Base64-strängen innehåller då exakt samma fil med alla bildrutor.
Visar alla webbläsare data:image/webp-bilder?
Alla aktuella versioner av Chrome, Edge, Firefox, Opera och Safari gör det. Internet Explorer och Safari före version 14 gör det inte.