Base64 bildavkodare | Avkoda & Förhandsgranska bilder online

Vad är en base64-avkodare för bilder?

En base64-avkodare för bilder är ett verktyg som omvandlar en base64-kodad textsträng tillbaka till en bild. Base64 är ett sätt att skriva binärdata, till exempel bytena i en bildfil, med endast 64 vanliga texttecken (bokstäver, siffror, +, / och = som utfyllnad). Webbläsare, e-postmeddelanden och många API:er lagrar bilder på detta sätt, så att en bild kan skickas inuti vanlig text i stället för som en separat fil. Avkodaren återställer processen: klistra in strängen, så visas originalbilden.

Data-URL-formatet

På webben skrivs en base64-bild vanligtvis som en data-URL. Mönstret är:

Till exempel:

Varje del har en funktion:

• data: markerar den som en data-URL, inte som en vanlig webbadress.
• image/png är MIME-typen, som talar om för webbläsaren vilken typ av fil det är.
• ;base64 anger att datan efter kommatecknet är base64-kodad.
• Allt efter kommatecknet är den kodade bilden.

Så fungerar avkodaren

Avkodningen sker i fyra steg.

1. Verktyget kontrollerar om strängen börjar med data:. En data-URL som anger en annan medietyp än en bild, till exempel data:text/plain, avvisas direkt eftersom den aldrig kan visas som en bild.
2. Alla mellanslag, tabbtecken och radbrytningar tas bort, eftersom långa base64-strängar ibland delas upp över flera rader. En nyttolast som använder procentkodning i stället för base64, vilket även RFC 2397 tillåter, lämnas oförändrad.
3. Base64-texten avkodas tillbaka till råa byte.
4. De första bytena i resultatet granskas. Alla vanliga bildformat börjar med en fast bytesekvens som kallas signatur eller ”magiskt tal”. PNG-filer börjar med 89 50 4E 47, JPEG-filer börjar med FF D8 FF och så vidare. Avkodaren jämför dessa signaturer och anger den bildtyp som de identifierar.

Bytena väger tyngre än etiketten. Om en data-URL anger data:image/png men bytena börjar med FF D8 FF, bygger avkodaren om URL:en till data:image/jpeg, så att strängen som erbjuds av knappen ”Kopiera bildens URL” aldrig beskriver sitt eget innehåll fel.

Om strängen saknar prefixet data: behandlar avkodaren den som rå base64-data, avkodar den och läser signaturen på samma sätt. Om bytena inte överensstämmer med någon känd bildsignatur och inte ser ut som SVG-text, rapporterar avkodaren att strängen inte verkar vara en bild. Den gissar inte formatet och använder ingen standardtyp som reserv.

SVG hanteras annorlunda eftersom SVG är ett textformat (XML), inte binärt, och därför saknar en fast bytesignatur. Avkodaren söker i de första 1024 bytena av den avkodade texten efter en <svg-tagg, en XML-deklaration som <?xml version="1.0"?> följd av en sådan tagg, eller en SVG-dokumenttypsdeklaration följd av en sådan tagg. En byteordningsmarkör allra först, som vissa redigerare lägger till i UTF-8-filer, ignoreras. Eftersom SVG inte kan identifieras med en bytesignatur behåller en data-URL som anger image/svg+xml den angivna typen.

Formel för bildstorlek i base64

Base64 omvandlar var 3 byte binärdata till 4 texttecken. Formeln för den kodade längden är:

Symbolerna ⌈ ⌉ betyder ”avrunda uppåt till nästa heltal”, eftersom base64 alltid arbetar i grupper om 4 tecken och fyller ut en ofullständig grupp med =-tecken.

För stora filer innebär detta ungefär en ökning av storleken med 33 %, eftersom 4 ÷ 3 ≈ 1,33. Små filer kan visa en större procentuell ökning, eftersom avrundningen uppåt till nästa grupp med 4 tecken spelar större roll när den ursprungliga datamängden är liten.

Räkneexempel

PNG-exemplet ovan avkodas till 85 byte bilddata. Med formeln:

Base64-strängen är faktiskt 116 tecken lång, vilket stämmer. Det är en ökning med 36 % jämfört med de ursprungliga 85 bytena (116 ÷ 85 ≈ 1,36), något över värdet 33 % eftersom filen är så liten.

Bildformat som stöds

Avkodaren läser bytesignaturen i den avkodade datan för att identifiera formatet. Den känner igen följande typer:

Så avkodar du en base64-bild

1. Kopiera base64-strängen, med eller utan prefixet data:image/..., från HTML, CSS, ett API-svar eller ett e-postmeddelande.
2. Klistra in den i inmatningsfältet.
3. Bilden avkodas automatiskt en stund efter att du slutat skriva, eller när du trycker på avkodningsknappen.
4. Den avkodade bilden visas i förhandsvisningsområdet. Dess data-URL kan kopieras med knappen ”Kopiera bildens URL”, och själva bilden kan sparas genom att högerklicka på den i förhandsvisningen och välja att spara bilden, eftersom den visas som ett vanligt bildelement i webbläsaren.

Vanliga användningsområden för base64-bilder

• Inbäddning i HTML, CSS eller JavaScript: genom att lägga bilddatan direkt i koden behövs ingen separat filförfrågan.
• E-postmallar: vissa e-postklienter blockerar externt länkade bilder som standard, men en inbäddad base64-bild visas ändå.
• HTML-verktyg i en enda fil: en hel sida, inklusive bilderna, kan levereras som en enda fristående fil.
• API-svar: en bild kan skickas inuti en JSON-nyttolast i stället för att behöva en egen slutpunkt.
• CSS-bakgrunder och ikoner: små ikoner skrivs ibland direkt i en stilmall som en data-URL.

Nackdelar med base64-bilder

Base64-kodning är praktisk men har ett pris:

• Den kodade texten är ungefär en tredjedel större än originalfilen.
• Webbläsare kan inte cacha en inbäddad bild på samma sätt som en länkad fil, så den laddas ned igen varje gång den omgivande sidan eller stilmallen gör det.
• Webbläsaren måste avkoda base64-texten innan den kan visa bilden, vilket kräver lite extra beräkningsarbete.
• På grund av den ökade storleken och den uteblivna cachningen passar base64-inbäddning bäst för små bilder som ikoner och enkla logotyper. Större fotografier bör vanligtvis levereras som vanliga bildfiler.

Vanliga frågor

Vad är en base64-avkodare för bilder?

Det är ett verktyg som omvandlar en base64-kodad textsträng tillbaka till en visningsbar bild, till exempel en PNG-, JPEG-, GIF-, WebP-, BMP- eller SVG-fil.

Hur avkodar jag en base64-bild?

Klistra in base64-strängen, med eller utan prefixet data:image/..., i avkodaren. Den läser strängen, avkodar den och visar den resulterande bilden.

Kan en base64-sträng avkodas utan data-URL-prefixet?

Ja. Avkodaren behandlar den som rå base64-data, avkodar bytena och läser de första bytena för att identifiera formatet utifrån signaturen, till exempel PNG, JPEG, GIF, WebP, BMP eller ICO. SVG identifieras genom att avkodaren söker efter en <svg-tagg i den avkodade texten. Om ingen av dessa matchar rapporterar avkodaren att strängen inte verkar vara en bild i stället för att gissa ett format.

Varför avkodas inte min base64-bild?

Tre orsaker täcker de flesta fallen. Strängen kan innehålla tecken utanför det vanliga base64-alfabetet, som är A–Z, a–z, 0–9, +, / och =; varianten base64url, som används i vissa webbtokens, skriver i stället - och _ och accepteras inte. Strängen kan ha kapats halvvägs, så att längden är ett mer än en multipel av fyra, vilket en giltig base64-sträng aldrig har. Eller så tillhör bytena helt enkelt inget av de bildformat som stöds. Att =-utfyllnad saknas är i sig inget problem, och mellanslag eller radbrytningar tas bort före avkodningen.

Är base64-kodning en form av säkerhet eller kryptering?

Nej. Base64 är bara ett sätt att representera byte som text; den döljer ingenting. Vem som helst kan avkoda en base64-sträng på några sekunder med ett kostnadsfritt verktyg, så den ska aldrig användas för att skydda privata bilder eller andra data.

Hur mycket större är en base64-sträng än originalbilden?

Ungefär en tredjedel större för större filer, eftersom var 3 byte av originaldatan blir 4 texttecken. En bild på 100 KB blir ungefär 133 KB när den har kodats. Små bilder kan visa en något större procentuell ökning på grund av avrundningen.

Historia

Base64 utvecklades ur kodningsscheman från 1970- och 1980-talen för att skicka binärdata genom e-postsystem som bara hanterade vanlig text. Det formaliserades för e-post i RFC 989 (1987) och senare RFC 1421. Användningen för att bädda in bilder på webbsidor blev möjlig när data:-URL-schemat definierades i RFC 2397 (1998), och blev vanligare i mitten av 2000-talet när utvecklare sökte sätt att minska antalet separata HTTP-förfrågningar, särskilt vid långsamma mobilanslutningar.

Referenser

1. RFC 4648: Base16-, Base32- och Base64-datakodningar
2. RFC 2397: ”data”-URL-schemat
3. MDN Web Docs: data-URL:er
4. WHATWG:s standard för MIME-sniffning