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.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Instagram rutnätsdelare

Dela en bred bild i ett 3×3-rutnät för Instagram, eller valfritt antal rader. Rutorna är numrerade så att de är enkla att ladda upp i omvänd ordning.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Linjerat papper-generator

Skapa utskrivbart linjerat papper gratis. Välj college-, bred eller smal linjering, ange radavstånd i mm, pappersstorlek och en marginallinje, och skriv sedan ut eller ladda ner SVG:n.

Verktyget finns på andra språk