Sådan bruger du værktøjet
- Træk en WebP-fil hen på feltet, klik for at vælge en, eller indsæt et billede. PNG- og JPEG-filer virker også.
- Vil du lave WebP ud fra et andet format, så vælg WebP under Konvertér til, og indstil Kvalitet.
- Vælg eventuelt en Maks. bredde, og sammenlign derefter den oprindelige og den kodede størrelse.
- Kopiér eller download data URI, rå Base64, img-tag til HTML, CSS background-image eller Markdown.
Hvad er WebP?
WebP er et billedformat, som Google lancerede i 2010. Det tilbyder tabsgivende komprimering baseret på videocodecet VP8, en separat tabsfri tilstand, en alfakanal og animation, alt sammen i ét format. MIME-typen er image/webp, og fordi filen er en RIFF-container, starter Base64-outputtet med UklGR. Ifølge Google er tabsfri WebP-filer ca. 26 % mindre end PNG, og tabsgivende filer er 25 til 34 % mindre end JPEG ved sammenlignelig kvalitet.
Derfor passer WebP godt til data URI'er
Base64 lægger den samme tredjedel oven i alle filer, så den mindste kildefil giver den korteste streng. Det gør WebP til et oplagt valg: Et gennemsigtigt PNG-ikon, der konverteres til WebP, beholder sin gennemsigtighed og bliver som regel mindre, og et JPEG-foto bliver mindre ved en tilsvarende visuel kvalitet. Meget høje kvalitetsindstillinger kan give en fil, der er større end en optimeret original, så tjek den kodede størrelse, før du kopierer.
Animerede WebP-filer beholder alle deres enkeltbilleder, når du koder dem uændret. Ved konvertering eller skalering gengives kun ét enkeltbillede.
Understøttelse i browsere og klienter
Alle aktuelle større browsere viser WebP: Chrome, Edge, Firefox, Opera og Safari 14 eller nyere. Kun meget gamle browsere som Internet Explorer mangler understøttelse. Med e-mail er det anderledes: Flere e-mailprogrammer til computer, blandt andre Outlook til Windows, kan ikke vise WebP, så brug PNG eller JPEG i e-mailskabeloner.
Sådan laver du WebP-data URI'er i JavaScript
// Læs en fil, som brugeren har valgt
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Kod et canvas om til WebP med 80 % kvalitet
const uri = canvas.toDataURL('image/webp', 0.8);Hvis en browser ikke kan kode WebP, falder toDataURL stiltiende tilbage til PNG, så tjek, at resultatet starter med data:image/webp.
Ofte stillede spørgsmål
Kan jeg konvertere PNG eller JPEG til WebP-Base64 her?
Ja. Indlæs billedet, vælg WebP under Konvertér til, og indstil Kvalitet. Konverteringen bruger den koder, der er indbygget i din browser, og resultatet kodes som data:image/webp.
Bevarer Base64 animationen i WebP?
Ja, forudsat at der ikke er valgt nogen konvertering og ingen Maks. bredde. Base64-strengen indeholder så den præcise fil med alle enkeltbilleder.
Viser alle browsere data:image/webp-billeder?
Det gør alle aktuelle versioner af Chrome, Edge, Firefox, Opera og Safari. Internet Explorer og Safari-versioner før 14 gør ikke.