Slik bruker du verktøyet
- Slipp en WebP-fil i slippfeltet, klikk for å velge en, eller lim inn et bilde. PNG- og JPEG-filer fungerer også.
- For å lage WebP fra et annet format velger du WebP under Konverter til og angir Kvalitet.
- Angi eventuelt Maks. bredde, og sammenlign deretter den opprinnelige og den kodede størrelsen.
- Kopier eller last ned data URI, ren Base64, HTML img-tagg, CSS background-image eller Markdown.
Hva er WebP?
WebP er et bildeformat som Google lanserte i 2010. Det har tapsbasert komprimering basert på videokodeken VP8, en egen tapsfri modus, alfakanal og animasjon, alt i ett format. MIME-typen er image/webp, og fordi filen er en RIFF-container, begynner Base64-utdataene med UklGR. Ifølge Google er tapsfrie WebP-filer omtrent 26 % mindre enn PNG, og tapsbaserte filer 25 til 34 % mindre enn JPEG ved sammenlignbar kvalitet.
Hvorfor WebP passer til data URI-er
Base64 legger den samme tredjedelen til alle filer, så den minste kildefilen gir den korteste strengen. Det gjør WebP til et naturlig valg: et gjennomsiktig PNG-ikon som konverteres til WebP, beholder gjennomsiktigheten og blir som regel mindre, og et JPEG-bilde blir mindre ved tilsvarende visuell kvalitet. Svært høye kvalitetsinnstillinger kan gi en fil som er større enn en optimalisert original, så sjekk den kodede størrelsen før du kopierer.
Animerte WebP-filer beholder alle rammene når du koder dem uendret. Konvertering eller endring av størrelse gjengir bare én enkelt ramme på nytt.
Støtte i nettlesere og klienter
Alle aktuelle store nettlesere viser WebP: Chrome, Edge, Firefox, Opera og Safari 14 eller nyere. Bare svært gamle nettlesere som Internet Explorer mangler støtte. E-post er en annen sak: flere e-postprogrammer for skrivebordet, blant annet Outlook for Windows, viser ikke WebP, så bruk PNG eller JPEG i e-postmaler.
Lage WebP-data URI-er i JavaScript
// Les en fil som brukeren har valgt
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Kod et canvas på nytt som WebP med 80 % kvalitet
const uri = canvas.toDataURL('image/webp', 0.8);Hvis en nettleser ikke kan kode WebP, faller toDataURL stille tilbake til PNG, så sjekk at resultatet begynner med data:image/webp.
Ofte stilte spørsmål
Kan jeg konvertere PNG eller JPEG til WebP-Base64 her?
Ja. Last inn bildet, velg WebP under Konverter til og angi Kvalitet. Konverteringen bruker koderen som er innebygd i nettleseren din, og resultatet kodes som data:image/webp.
Beholder Base64 animasjonen i WebP?
Ja, så lenge ingen konvertering er valgt og Maks. bredde ikke er angitt. Base64-strengen inneholder da nøyaktig den samme filen med alle rammene.
Viser alle nettlesere data:image/webp-bilder?
Alle aktuelle versjoner av Chrome, Edge, Firefox, Opera og Safari gjør det. Internet Explorer og Safari-versjoner før 14 gjør det ikke.