Slik bruker du verktøyet
- Dra bilder til slippfeltet, klikk på det for å velge filer, eller lim inn et bilde fra utklippstavlen. Du kan gjerne legge til flere filer samtidig.
- Velg eventuelt et målformat under Konverter til (PNG, JPEG eller WebP), juster Kvalitet og angi Maks. bredde.
- Sjekk dimensjonene, den opprinnelige størrelsen og den kodede størrelsen som vises for hvert bilde.
- Kopier eller last ned utdataene du trenger: data URI, ren Base64, HTML img-tagg, CSS background-image eller Markdown.
Slik fungerer konvertering fra bilde til Base64
Base64 gjør om bytene i en bildefil til ren tekst bygd opp av 64 tegn. Hver gruppe på 3 byte blir 4 tegn, så teksten er omtrent 33 % større enn filen. En data URI legger til et kort prefiks med MIME-typen, for eksempel data:image/png;base64,, slik at nettleseren kan vise teksten overalt der den forventer en bilde-URL.
Bildet leses og kodes lokalt i nettleseren din. Det lastes ikke opp, så private skjermbilder og upubliserte design blir værende på enheten din.
Hvilke utdata bør du kopiere?
- Data URI for
src-attributter, JavaScript og JSON-felt som forventer en URL. - Ren Base64 for API-er som bare vil ha de kodede bytene, vanligvis sammen med et eget felt for MIME-type eller filnavn.
- HTML img-tagg som du limer rett inn i en side eller mal.
- CSS background-image for ikoner og dekorelementer i et stilark.
- Markdown for dokumentasjon og notater. Noen visningsmotorer, deriblant GitHub, viser ikke bilder fra data URI-er.
Støttede formater i korte trekk
De første tegnene i en Base64-streng avslører filtypen, fordi de koder formatets signatur.
| Format | MIME-type | Base64 begynner med |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy eller PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | varierer |
| TIFF | image/tiff | SUkqAA eller TU0AKg |
Når det lønner seg å bygge inn et bilde
Data URI-er sparer en nettverksforespørsel og gjør en fil selvstendig. Det passer godt for små ikoner og logoer på noen få kilobyte, HTML-rapporter i én fil, bittesmå uskarpe plassholdere og bilder som sendes inne i JSON. Til store fotografier er de derimot et dårlig valg: den ekstra tredjedelen i størrelse, ingen separat hurtigbufring i nettleseren og en tyngre HTML- eller CSS-fil som må lastes ned før noe vises, koster som regel mer enn forespørselen du sparer. Hvis nettstedet ditt sender en Content-Security-Policy, må innebygde bilder også ha data: i img-src.
Ofte stilte spørsmål
Blir bildene mine lastet opp til en server?
Nei. Nettleseren leser hver fil og koder den på enheten din. Ingenting sendes til base64.is eller noe annet sted.
Hvorfor er Base64-teksten større enn bildet?
Base64 bruker 4 tegn for hver gruppe på 3 byte, så resultatet blir omtrent 33 % større, pluss prefikset til data URI-en. Vil du gjøre det kortere, angir du Maks. bredde eller konverterer til WebP eller JPEG med lavere kvalitet.
Kan jeg konvertere flere bilder samtidig?
Ja. Velg eller slipp flere filer. Hvert bilde får sin egen forhåndsvisning, størrelser og utdata, alle med knappene Kopier og Last ned.
Fungerer Base64-bilder i HTML-e-post?
cid:, mer pålitelige.