🖼️ Base64-billedkonverter

Konvertér billeder til Base64-strenge eller gendan Base64 til billeder.

Billedfil

📁

Klik eller træk og slip et billede

Inkludér Data URL

GUIDE

Laes mere

1. Hvad er Base64-kodning

Base64 er en kodningsmetode, der konverterer binære data til ASCII-strenge. Den gør det muligt at repræsentere binære filer som billeder, lyd og video i tekstformat, så binære data kan overføres via tekstbaserede protokoller som e-mail, JSON og XML. Den bruger kun 64 ASCII-tegn (A-Z, a-z, 0-9, +, /) til at repræsentere alle binære data. Det er nyttigt til indlejring af billeder direkte i HTML med Data URL'er eller til at inkludere billeder i API-svar. Til gengæld øger det den oprindelige størrelse med cirka 33%.

2. Brugsscenarier for Base64-billeder

Base64-billeder bruges i forskellige webudviklingsscenarier. Indlejring af små ikoner direkte som CSS background-image reducerer antallet af HTTP-anmodninger og forbedrer indlæsningstiden. Det bruges i e-mailskabeloner for at omgå blokering af eksterne billeder. Når hele websider udrulles som enkeltstående HTML-filer, kan alle billeder inkluderes som Base64. I RESTful API'er kan billeder direkte inkluderes i JSON-svar uden separate filuploads. Det bruges også, når billeder oprettet med Canvas API sendes til servere.

3. Data URL-format

Data URL er en skematype til at repræsentere filer som URL'er. Format: data:[<mediatype>][;base64],<data>. Eksempel: data:image/png;base64,iVBORw0KG... Mediatype angiver MIME-type som image/png, image/jpeg, image/gif. ;base64 angiver kodningsmetoden, efterfulgt af den faktiske Base64-streng. Kan bruges direkte i HTML img-tags som <img src="data:image/png;base64,...">. Bruges også i CSS som background: url(data:image/svg+xml;base64,...). Browseren behandler Data URL'er som almindelige URL'er for at vise billeder.

4. Overvejelser om ydeevneoptimering

Ydeevnen bør overvejes, når man bruger Base64-billeder. Små billeder (under 1-2KB) har fordel af indlejring frem for overhead fra HTTP-anmodninger. Store billeder kan faktisk blive langsommere på grund af 33% større størrelse og parser-overhead fra Base64. Base64-billeder kan ikke bruge browsercache og downloades sammen med HTML/CSS hver gang. Billeder, der bruges ofte, bør leveres som separate filer for caching. Gzip-komprimering er effektiv på Base64-strenge, så aktivér det på servere. Det er passende at bruge Base64 til dekorative billeder eller ikoner, ikke til kritisk indhold.

5. Sikkerhedsovervejelser

Der findes sikkerhedsrisici ved Base64-billeder. Når du viser brugeruploadede billeder, der er konverteret til Base64, skal du være opmærksom på XSS-angreb. SVG-billeder er særligt farlige, da de kan indeholde JavaScript. Content-Security-Policy-headere kan begrænse brugen af data:-skemaet. Sæt filstørrelsesgrænser for at forhindre angreb med hukommelsesudtømning. Valider billedtyper for kun at behandle tilladte MIME-typer (image/png, image/jpeg). Server-side verifikation bør bekræfte, at det faktisk er billedfiler, og tjekke for skadelig kode.

6. Base64-konvertering efter programmeringssprog

De fleste programmeringssprog har indbygget understøttelse af Base64-kodning. JavaScript bruger btoa() til kodning, atob() til dekodning og FileReader API til at læse filer som Base64. Python tilbyder b64encode() og b64decode() i modulet base64. PHP bruger funktionerne base64_encode() og base64_decode(). Java bruger getEncoder() og getDecoder() via klassen java.util.Base64. Node.js koder med Buffer.from(data).toString("base64") og dekoder med Buffer.from(base64, "base64"). Det er nemt at læse billedfiler og konvertere dem til Base64 med standardbiblioteker i alle sprog.

Ofte stillede sporgsmal

Hvornår skal jeg slå indstillingen "Inkludér Data URL" til eller fra?

Lad den være slået til, hvis du vil indsætte resultatet direkte i et HTML img-tag eller som CSS background-image, da det kræver præfikset data:image/png;base64,. Slå den fra, hvis du kun har brug for den rå Base64-streng til en server-API.

Hvilke billedformater (PNG, JPG, GIF, SVG) understøttes?

Du kan uploade de fleste raster- og vektorformater, som browseren understøtter - PNG, JPG, GIF, WebP, SVG og flere - for at konvertere til Base64, og dekodning gendanner billedet med dets oprindelige MIME-type.

Hvis jeg konverterer en Base64-streng tilbage til et billede, er det så identisk med originalen?

Ja, Base64 er en tabsfri kodning, så dekodning gendanner en kopi, der er pixel-for-pixel identisk med den oprindelige fil.

Hvorfor føles konvertering af et stort billede langsom, eller hvorfor bliver strengen meget lang?

Base64-kodning øger størrelsen med cirka 33% i forhold til den oprindelige binære fil, og fordi det behandles som en streng i browserens hukommelse, tager større billeder længere tid og giver længere outputstrenge.

Er det sikkert at bruge den konverterede Base64 direkte på min hjemmeside?

Til almindelig billedindlejring er det fint, men hvis du viser brugeruploadede filer som de er, kan SVG'er indeholde indlejrede scripts, så produktionstjenester bør også tilføje server-side validering.