Bild till Base64

Koda bilder som Base64 data-URI:er

En Base64 data-URI gör om en bild till en vanlig textsträng som du kan klistra in direkt i din HTML eller CSS. Webbläsaren avkodar den direkt, så bilden visas utan en separat filförfrågan – praktiskt för små ikoner, e-postmallar och fristående sidor i en enda fil.

Verktyget läser din fil lokalt och ger dig hela data:-URI:n, plus färdiga <img>- och CSS-background-image-kodsnuttar som du kan kopiera med ett klick. Inget laddas upp – kodningen sker helt i din webbläsare.

När du bör bädda in (och när inte)

Inbäddning tar bort en HTTP-förfrågan, vilket kan göra små, kritiska bilder snabbare. Men Base64 är ungefär 33 % större än binärfilen och kan inte cachas separat, så undvik det för stora foton eller bilder som återanvänds på många sidor. Som tumregel kan du bädda in ikoner på några kilobyte och behålla större bilder som vanliga filer.

Så använder du resultatet

Data-URI:n behåller filens ursprungliga typ, till exempel data:image/png;base64, följt av de kodade byten, och statusraden visar hur många kilobyte text som skapades. Använd de tre kopieringsknapparna beroende på var den ska användas: den rena URI:n för ett src- eller href-värde, <img>-taggen för HTML (lägg sedan till en meningsfull alt-text) eller CSS-raden för en stilmall.

Praktiska förbehåll

• En lång Base64-sträng gör din HTML- eller CSS-fil större och långsammare att läsa, och den laddas ner på nytt med varje sida som innehåller den. Gzip eller Brotli återvinner en del av överskottet, men bilddatan är redan komprimerad, så vinsten är begränsad.
• Om din webbplats använder en Content Security Policy måste img-src tillåta data:-URI:er.
• Många e-postklienter blockerar eller tar bort data-URI:er, så testa innan du förlitar dig på dem i nyhetsbrev.
• Komprimera eller ändra storlek på bilden först; en mindre källa ger en mycket kortare sträng.

Bra kandidater för inbäddning

Små ikoner, pyttesmå platshållarbilder, laddningssnurror, enkla logotyper och bilder i HTML-demos med en enda fil passar bäst. Foton, hero-banners och bilder som visas på många sidor serveras bättre som separata filer så att webbläsaren kan cacha dem. Kodningen sker i din webbläsare och texten du kopierar lämnar aldrig din enhet förrän du själv klistrar in den någonstans.