Base64 Billedaflæser | Dekoder & Forhåndsvis Billeder Online

Hvad er en base64-billeddekoder?

En base64-billeddekoder er et værktøj, der omdanner en base64-kodet tekststreng tilbage til et billede. Base64 er en måde at skrive binære data, f.eks. bytes fra en billedfil, ved kun at bruge 64 almindelige teksttegn (bogstaver, cifre, +, / og = til udfyldning). Browsere, e-mails og mange API'er gemmer billeder på denne måde, så et billede kan sendes inde i almindelig tekst i stedet for som en separat fil. Dekoderen vender processen om: Indsæt strengen, så vises det oprindelige billede.

Data-URL-formatet

På nettet skrives et base64-billede normalt som en data-URL. Mønsteret er:

For eksempel:

Hver del har en funktion:

• data: markerer, at det er en data-URL og ikke en almindelig webadresse.
• image/png er MIME-typen, som fortæller browseren, hvilken type fil det er.
• ;base64 angiver, at dataene efter kommaet er base64-kodede.
• Alt efter kommaet er selve det kodede billede.

Sådan fungerer dekoderen

Dekodningen foregår i fire trin.

1. Værktøjet kontrollerer, om strengen begynder med data:. En data-URL, der angiver en anden medietype end et billede, f.eks. data:text/plain, afvises med det samme, fordi den ikke kan vises som et billede.
2. Den fjerner mellemrum, tabulatorer og linjeskift, eftersom lange base64-strenge undertiden ombrydes over flere linjer. En nyttelast, der bruger procentkodning i stedet for base64, hvilket RFC 2397 også tillader, sendes videre uændret.
3. Den dekoder base64-teksten tilbage til rå bytes.
4. Den ser på de første bytes i resultatet. Alle almindelige billedformater begynder med en fast sekvens af bytes, der kaldes en signatur eller et "magisk tal". PNG-filer begynder med 89 50 4E 47, JPEG-filer begynder med FF D8 FF osv. Dekoderen sammenligner disse signaturer og angiver billedet med den type, de identificerer.

Bytesene har forrang for etiketten. Hvis en data-URL angiver data:image/png, men bytesene begynder med FF D8 FF, opbygger dekoderen URL'en igen som data:image/jpeg, så strengen fra knappen "Kopiér billed-URL" aldrig beskriver sit eget indhold forkert.

Hvis strengen ikke har præfikset data:, behandler dekoderen den som rå base64-data, dekoder den og aflæser signaturen på samme måde. Hvis bytesene ikke svarer til nogen kendt billedsignatur og heller ikke ligner SVG-tekst, meddeler dekoderen, at strengen ikke ser ud til at være et billede. Den gætter ikke på et format og falder ikke tilbage til en standardtype.

SVG behandles anderledes, fordi SVG er et tekstformat (XML) og ikke binært, så det har ingen fast bytesignatur. Dekoderen kontrollerer de første 1024 bytes af den dekodede tekst for et <svg-tag, en XML-erklæring som <?xml version="1.0"?> efterfulgt af et sådant tag eller en SVG-dokumenttypeerklæring efterfulgt af et sådant tag. Et byteordenmærke helt i begyndelsen, som nogle redigeringsprogrammer føjer til UTF-8-filer, ignoreres. Da SVG ikke kan identificeres ud fra en bytesignatur, bevarer en data-URL, der angiver image/svg+xml, den type, den angiver.

Formel for base64-billedstørrelse

Base64 omdanner hver 3 bytes binære data til 4 teksttegn. Formlen for den kodede længde er:

Symbolerne ⌈ ⌉ betyder "rund op til det næste hele tal", fordi base64 altid arbejder i grupper på 4 tegn og udfylder en ufuldstændig gruppe med =-tegn.

For store filer giver det omtrent en 33 % stigning i størrelsen, eftersom 4 ÷ 3 ≈ 1,33. Små filer kan vise en større procentvis stigning, fordi afrundingen op til den næste gruppe på 4 tegn betyder mere, når der oprindeligt ikke er ret meget data.

Regneeksempel

PNG-eksemplet ovenfor dekodes til 85 bytes billeddata. Ved brug af formlen:

Base64-strengen er faktisk 116 tegn lang, hvilket stemmer. Det er en 36 % stigning i forhold til de oprindelige 85 bytes (116 ÷ 85 ≈ 1,36), lidt over tallet 33 %, fordi filen er så lille.

Understøttede billedformater

Dekoderen aflæser bytesignaturen for de dekodede data for at identificere formatet. Den genkender disse typer:

Sådan dekoderes et base64-billede

1. Kopiér base64-strengen, med eller uden præfikset data:image/..., fra HTML, CSS, et API-svar eller en e-mail.
2. Indsæt den i inputfeltet.
3. Billedet dekodes automatisk et øjeblik efter, at indtastningen stopper, eller ved at trykke på dekoderknappen.
4. Det dekodede billede vises i forhåndsvisningsområdet. Dets data-URL kan kopieres med knappen "Kopiér billed-URL", og selve billedet kan gemmes ved at højreklikke på det i forhåndsvisningen og vælge at gemme billedet, eftersom det gengives som et normalt image-element i browseren.

Almindelige anvendelser af base64-billeder

• Indlejring i HTML, CSS eller JavaScript: Når billeddataene placeres direkte i koden, undgås en separat filanmodning.
• E-mailskabeloner: Nogle e-mailklienter blokerer som standard billeder, der er linket eksternt, men et indlejret base64-billede vises stadig.
• HTML-værktøjer i én fil: En hel side, inklusive dens billeder, kan leveres som én selvstændig fil.
• API-svar: Et billede kan sendes i en JSON-payload i stedet for at kræve sit eget endepunkt.
• CSS-baggrunde og ikoner: Små ikoner skrives undertiden direkte ind i et stilark som en data-URL.

Ulemper ved base64-billeder

Base64-kodning er praktisk, men ikke uden omkostninger:

• Den kodede tekst er omtrent en tredjedel større end den oprindelige fil.
• Browsere kan ikke cache et indlejret billede på samme måde som en linket fil, så det downloades igen, hver gang den omgivende side eller det omgivende typografiark gør det.
• Browseren skal dekode base64-teksten, før den kan vise billedet, hvilket kræver en smule ekstra behandling.
• På grund af den øgede størrelse og den manglende caching egner base64-indlejring sig til små billeder som ikoner og enkle logoer. Større fotos leveres normalt bedre som almindelige billedfiler.

Ofte stillede spørgsmål

Hvad er en base64-billeddekoder?

Det er et værktøj, der omdanner en base64-kodet tekststreng tilbage til et billede, der kan vises, f.eks. en PNG-, JPEG-, GIF-, WebP-, BMP- eller SVG-fil.

Hvordan dekoder jeg et base64-billede?

Indsæt base64-strengen, med eller uden præfikset data:image/..., i dekoderen. Den læser strengen, dekoder den og viser det resulterende billede.

Kan en base64-streng dekodes uden data-URL-præfikset?

Ja. Dekoderen behandler den som rå base64-data, dekoder bytesene og aflæser de første bytes for at identificere formatet ud fra signaturen, f.eks. PNG, JPEG, GIF, WebP, BMP eller ICO. SVG identificeres ved at lede efter et <svg-tag i den dekodede tekst. Hvis ingen af disse passer, meddeler dekoderen, at strengen ikke ser ud til at være et billede, i stedet for at gætte på et format.

Hvorfor dekodes mit base64-billede ikke?

Tre årsager dækker de fleste tilfælde. Strengen kan indeholde tegn uden for standardalfabetet for base64, som er A–Z, a–z, 0–9, +, / og =; varianten base64url, der bruges i nogle webtokens, skriver i stedet - og _ og accepteres ikke. Strengen kan være blevet afbrudt undervejs, så længden er én mere end et multiplum af fire, hvilket ingen gyldig base64-streng har. Eller bytesene er ganske enkelt ikke et af de understøttede billedformater. Manglende =-udfyldning er i sig selv ikke et problem, og mellemrum eller linjeskift fjernes før dekodningen.

Er base64-kodning en form for sikkerhed eller kryptering?

Nej. Base64 er kun en måde at repræsentere bytes som tekst på; den skjuler intet. Alle kan dekode en base64-streng på få sekunder med et gratis værktøj, så den bør aldrig bruges til at beskytte private billeder eller andre data.

Hvor meget større er en base64-streng end det oprindelige billede?

Omtrent en tredjedel større for større filer, eftersom hver 3 bytes af de oprindelige data bliver til 4 teksttegn. Et billede på 100 KB bliver cirka 133 KB, når det er kodet. Små billeder kan vise en noget større procentvis stigning på grund af afrunding.

Historie

Base64 udsprang af kodningsordninger, der blev udviklet i 1970'erne og 1980'erne til at sende binære data gennem mailsystemer, der kun håndterede almindelig tekst. Det blev formaliseret til e-mail i RFC 989 (1987) og senere RFC 1421. Brug af kodningen til at indlejre billeder på websider blev mulig, da data:-URL-ordningen blev defineret i RFC 2397 (1998), og den blev mere almindelig i midten af 2000'erne, da udviklere søgte måder at reducere antallet af separate HTTP-anmodninger på, især på langsomme mobilforbindelser.

Referencer

1. RFC 4648: Dataformaterne Base16, Base32 og Base64
2. RFC 2397: "data"-URL-ordningen
3. MDN Web Docs: data-URL'er
4. WHATWG-standarden for MIME-sniffing