🖼️ Base64-bildekonverterer

Konverter bilder til Base64-strenger eller gjenopprett Base64 til bilder.

Bildefil

📁

Klikk eller dra og slipp et bilde

Inkluder Data URL

GUIDE

Les mer

1. Hva er Base64-koding

Base64 er en kodingsmetode som konverterer binære data til ASCII-strenger. Den lar binære filer som bilder, lyd og video representeres i tekstformat, slik at binære data kan overføres gjennom tekstbaserte protokoller som e-post, JSON og XML. Den bruker bare 64 ASCII-tegn (A-Z, a-z, 0-9, +, /) til å representere alle binære data. Dette er nyttig for innebygd bildeinnsetting i HTML med Data URL-er eller for å inkludere bilder i API-svar. Samtidig øker den den opprinnelige størrelsen med omtrent 33%.

2. Bruksområder for Base64-bilder

Base64-bilder brukes i ulike webutviklingsscenarier. Innebygd plassering av små ikoner som CSS background-image reduserer HTTP-forespørsler og forbedrer lastetiden. Det brukes i e-postmaler for å omgå blokkering av eksterne bilder. Når hele nettsider distribueres som én enkelt HTML-fil, kan alle bilder inkluderes som Base64. I RESTful API-er kan bilder inkluderes direkte i JSON-svar uten separate filopplastinger. Det brukes også når bilder laget med Canvas API sendes til servere.

3. Data URL-format

Data URL er et skjema for å representere filer som URL-er. Format: data:[<mediatype>][;base64],<data>. Eksempel: data:image/png;base64,iVBORw0KG... Mediatype angir MIME-type som image/png, image/jpeg, image/gif. ;base64 angir kodingsmetoden, etterfulgt av den faktiske Base64-strengen. Kan brukes direkte i HTML img-tagger som <img src="data:image/png;base64,...">. Brukes også i CSS som background: url(data:image/svg+xml;base64,...). Nettlesere behandler Data URL-er som vanlige URL-er for å vise bilder.

4. Vurderinger for ytelsesoptimalisering

Ytelse bør vurderes når Base64-bilder brukes. Små bilder (under 1-2KB) har nytte av innebygd plassering fremfor HTTP-forespørselskostnad. Store bilder kan faktisk bli tregere på grunn av 33% økning i størrelse og parse-overhead fra Base64. Base64-bilder kan ikke bruke nettleserens cache, og lastes ned sammen med HTML/CSS hver gang. Bilder som brukes ofte bør leveres som separate filer for caching. Gzip-komprimering er effektiv på Base64-strenger, så aktiver det på servere. Det er egnet å bruke Base64 for dekorative bilder eller ikoner, ikke kritisk innhold.

5. Sikkerhetsvurderinger

Det finnes sikkerhetsrisikoer med Base64-bilder. Når du viser brukeropplastede bilder konvertert til Base64, må du være oppmerksom på XSS-angrep. SVG-bilder er spesielt farlige fordi de kan inneholde JavaScript. Content-Security-Policy-headere kan begrense bruk av data:-skjemaet. Sett filstørrelsesgrenser for å forhindre angrep som tømmer minnet. Valider bildetyper for å behandle bare tillatte MIME-typer (image/png, image/jpeg). Serversideverifisering bør bekrefte faktiske bildefiler og kontrollere for skadelig kode.

6. Base64-konvertering i programmeringsspråk

De fleste programmeringsspråk har innebygd støtte for Base64-koding. JavaScript bruker btoa() for koding, atob() for dekoding og FileReader API for å lese filer som Base64. Python tilbyr b64encode() og b64decode() i base64-modulen. PHP bruker funksjonene base64_encode() og base64_decode(). Java bruker getEncoder() og getDecoder() via java.util.Base64-klassen. Node.js koder med Buffer.from(data).toString("base64") og dekoder med Buffer.from(base64, "base64"). Å lese bildefiler og konvertere dem til Base64 er enkelt å implementere med standardbiblioteker i alle språk.

Vanlige sporsmal

Når bør jeg slå på eller av alternativet "Include Data URL"?

La det være på hvis du planlegger å lime inn resultatet direkte i en HTML img-tag eller CSS background-image, siden det trenger prefikset data:image/png;base64,. Slå det av hvis du bare trenger den rå Base64-strengen for et server-API.

Hvilke bildeformater (PNG, JPG, GIF, SVG) støttes?

Du kan laste opp de fleste raster- og vektorformater som støttes av nettlesere - PNG, JPG, GIF, WebP, SVG og flere - for å konvertere til Base64, og dekoding gjenoppretter bildet med det opprinnelige MIME-typen.

Hvis jeg konverterer en Base64-streng tilbake til et bilde, er det identisk med originalen?

Ja, Base64 er en tapsfri koding, så dekoding gjenoppretter en kopi som er piksel for piksel identisk med den originale filen.

Hvorfor føles det tregt å konvertere et stort bilde, eller hvorfor blir strengen veldig lang?

Base64-koding øker størrelsen med omtrent 33% sammenlignet med den opprinnelige binærfilen, og siden det behandles som en streng i nettleserens minne, tar større bilder lengre tid og gir lengre utdata-strenger.

Er det trygt å bruke den konverterte Base64-strengen direkte på nettstedet mitt?

For vanlig bildeinnbygging er det fint, men hvis du viser brukeropplastede filer som de er, kan SVG-er inneholde innebygde skript, så produksjonstjenester bør også legge til serversidevalidering.