Softonic

Bild till BASE64-konverterare

Steg 1 / 3
Återställer vald fil...

En Base64-data-URL kombinerar bildens medietyp och kodade byte i ett textvärde, till exempel data:image/png;base64,.... Välj en bild på högst 20 MiB så skapar konverteraren värdet lokalt i webbläsaren. Innan du kopierar ser du uppgifter om originalfilen och den ungefärliga längden på den skapade data-URL:en.

Så här kodar du en bild med Base64

  1. 1

    Välj en bild

    Välj en bildfil på högst 20 MiB.

  2. 2

    Koda lokalt

    Webbläsaren läser filen och skapar en fullständig Base64-data-URL utan uppladdning.

  3. 3

    Granska resultatet

    Kontrollera medietyp, filuppgifter och den ungefärliga längden på den skapade data-URL:en.

  4. 4

    Kopiera data-URL:en

    Kopiera hela värdet `data:image/...;base64,...` till urklipp.

När du bör bädda in, när du bör länka

Base64-inbäddning sparar en HTTP-förfrågan men medför en ökning av filstorleken med 33 % – vilket är värt det för vissa tillgångar, men onödigt för andra.

Storleksberäkning

Originalstorlek Base64-storlek Ytterligare byte
1 KB 1.36 KB 360 B
10 KB 13.6 KB 3.6 KB
100 KB 136 KB 36 KB
1 MB 1.36 MB 360 KB

Beslutsguide

Användningsfall Inbäddad eller extern
Ikon under 2 KB (SVG-logotyp, sprite) Inbäddad
Markörbild i CSS (cursor: url()) Inbäddad
Liten fristående HTML- eller CSS-demo Inbäddad
Ikon inkluderad i en JavaScript-nyttolast Inbäddad
Hjältebild, större än 50 KB Extern
Allt som kan cachas separat Extern

Data-URI-format

data:[<mediatype>][;base64],<data>

Exempel:

  • data:image/png;base64,iVBORw0KGgo..., PNG
  • data:image/svg+xml;utf8,<svg>...</svg>, SVG lämpar sig ofta bättre för inbäddning utan Base64-kodning
  • data:image/jpeg;base64,/9j/4AAQS..., JPG

Tips

  • SVG är ofta bättre att använda som url() med utf8-kodning istället för Base64; det är kortare och lättare att läsa.
  • Kodningen granskar eller sanerar inte bilden. Bädda endast in betrodda filer, särskilt SVG som kan innehålla aktivt eller externt innehåll.
  • Stora bilder i JSON-nyttolaster kan komplicera analysen om de är mycket stora; överväg att använda multipart eller externa referenser.
  • CSS-background-image med Base64-inlines fungerar väl, men gör att caching mellan sidor inte fungerar.

Vanliga frågor

Base64 kodar tre byte av indata till fyra tecken, så utdata är alltid cirka 33 % större än indata. En bild på 10 KB ger en sträng med ungefär 13 600 tecken – långa strängar är vanliga.

Konverteraren tar en bild på högst 20 MiB. Det är en bearbetningsgräns, inte en rekommendation för inbäddning. Data-URL:er bör normalt vara små eftersom Base64 lägger till ungefär en tredjedel och förhindrar separat cachelagring.

Nej, Base64-kodning körs i din webbläsare. Bilden lämnar aldrig din enhet.

Inte i denna kodare. Använd det separata verktyget Base64 till bild för att göra en data-URL eller rå Base64-sträng till en nedladdningsbar bildfil.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

ARW till JPG-omvandlare

Omvandla Sony ARW RAW-foton till JPG. Få en delbar, universellt kompatibel JPEG från din kameras RAW-fil utan att öppna Lightroom.

Ändra bildstorlek

Ändra bilder till exakta pixelmått eller procentvärden och behåll proportionerna. Smidigt för flera filer, utan uppladdning.

QR-kodsgenerator

Skapa en QR-kod av text eller en URL i webbläsaren och ladda ned den som PNG.

Memgenerator

Lägg till en övertext och undertext på en JPG-, PNG- eller WebP-bild. Ställ in typsnitt, färger och kontur och ladda ned din mem som PNG.

GIF-skapare

Gör en bildsekvens till en animerad GIF. Ställ in bildfrekvens, kvalitet och storlek före export.