Utilia
Kategorier ▾
Språk: sv ▾

Bild till Base64

Konvertera en bild till Base64 eller data-URI med färdig CSS och HTML, eller avkoda Base64 till en bild med förhandsvisning. Gratis, utan uppladdning.

Bild → Base64

Base64 → bild

Så konverterar du en bild till Base64

  1. Under Bild → Base64 släpper du en bild i släppytan eller klickar på den för att välja en (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF …).
  2. Välj Utdata: Data-URI (data:image/png;base64,…), Bara Base64, CSS background-image eller HTML -tagg, som också innehåller bildens bredd och höjd.
  3. Klicka på Kopiera, eller på Ladda ner som .txt för långa resultat.

Raden under släppytan visar det verkliga formatet (avläst från filens byte, inte från namnet), måtten, filstorleken och längden på data-URI:n.

Så konverterar du Base64 tillbaka till en bild

  1. Under Base64 → bild klistrar du in texten i Base64-text eller data-URI. Du kan klistra in en ren Base64-sträng, en hel data-URI eller till och med en hel CSS-regel eller en <img>-tagg: data-URI:n hittas inuti den. Radbrytningar och mellanslag ignoreras, och URL-säker Base64 (med - och _) fungerar också.
  2. Klicka på Avkoda bild. Förhandsvisningen, typen, måtten och storleken visas.
  3. Klicka på Ladda ner bild för att spara den med rätt filändelse.

Typen kontrolleras med filens ”magiska byte”, signaturen i början av varje bildformat (till exempel 89 50 4E 47 för PNG eller FF D8 FF för JPEG). Om en data-URI påstår sig vara image/jpeg men innehåller en PNG berättar verktyget det och använder den verkliga typen. Allt som inte är en igenkänd bild avvisas, och gränsen är 20 MB bilddata.

Så fungerar Base64

Base64 gör om var tredje byte i en fil till fyra utskrivbara tecken från A–Z, a–z, 0–9, + och /, med = som utfyllnad i slutet. Därför blir den kodade texten ungefär 33 % större än filen: en ikon på 30 kB blir cirka 40 kB text. En data-URI lägger till ett kort huvud, data:<typ>;base64,, så att webbläsaren vet hur den ska läsa den.

När bilder ska bäddas in som data-URI

Data-URI:er är praktiska för:

  • små ikoner, logotyper och bakgrunder i CSS, för att spara en förfrågan;
  • HTML-mejl och HTML-dokument i en enda fil som måste fungera utan externa filer;
  • JSON-API:er och konfigurationsfiler som bara kan innehålla text.

De passar dåligt för stora foton. Texten är en tredjedel större än filen, kan inte cachas separat från sidan eller formatmallen som innehåller den och fördröjer renderingen. Över ungefär 10 till 100 kB är en vanlig bildfil med bra cachning oftast bättre, och därför visar verktyget en påminnelse för bilder över 100 kB.

Allt körs i din webbläsare: bilder och inklistrad text laddas aldrig upp.

Vanliga frågor

Är Base64 ett sätt att komprimera eller skydda en bild?

Nej. Base64 gör data ungefär 33 % större och vem som helst kan avkoda det. Det gör bara binära data till text som kan skickas där binära data inte kan.

Varför visas inte min data-URI?

De vanligaste orsakerna är en saknad eller felaktig typ i huvudet, mellanslag eller citattecken som klistrats in mitt i strängen, eller avkapad text. Klistra in den i Base64 → bild: verktyget rapporterar ogiltiga tecken och kontrollerar den verkliga typen.

Kan jag använda en SVG som data-URI?

Ja. SVG kan Base64-kodas som vilken bild som helst. För SVG är en URL-kodad data-URI (data:image/svg+xml,%3Csvg…) ofta kortare; det här verktyget avkodar båda formerna.

Fungerar det med HEIC- eller AVIF-bilder?

Kodningen fungerar med alla bildfiler. Förhandsvisningen visas bara om din webbläsare kan visa formatet, men Base64-texten och nedladdningen är alltid korrekta.

Finns det en storleksgräns?

Ja, 20 MB bilddata, åt båda hållen. Större strängar gör webbläsare långsamma och är sällan en bra idé på en webbsida.

Relaterade verktyg