Følg dette eksempel og tilpas derefter de samme kontroller til dit eget billede. Åbn Billede til Base64 konvertering.
Vælg et billede og få vist dets identitet
Åbn Image to Base64 Converter. Vælg et billede eller Prøv et eksempel. Eksemplet bruger 512 × 512 pixel favicon-orbit.png, som indeholder 202,491 bytes. Editoren viser billedet over dets kode, så du kan bekræfte, at du har valgt det tilsigtede aktiv.
PNG, JPG, WebP, GIF, BMP og AVIF understøttes, når din browser kan afkode dem til forhåndsvisning. Den maksimale filstørrelse er 25 MB, med grænser på 60 megapixels og 16,000 pixels pr. side. SVG-markup accepteres ikke af denne rasterkonverter.
Værktøjet læser de originale fil-bytes. Det bruger ikke forhåndsvisningen til at genopbygge billedet, ændre størrelsen på det eller genkomprimere det. Eksisterende metadata og GIF-animation bevares derfor i de kodede data.
Før kodning skal du bruge Resize Image eller Image Compressor, hvis du har brug for et mindre aktiv. Base64 reducerer ikke i sig selv billedstørrelsen.
Vælg den repræsentation, dit projekt forventer
Åbn Settings og vælg HTML-billede under Code format til dette eksempel. Resultatet er et img-tag, der indeholder en Base64-data URL. Alt-attributten er i starten tom; skriv nyttig alternativ tekst, når billedet formidler information.
Data URL starter med et præfiks som data:image/png;base64, efterfulgt af de kodede data. Plain Base64 indeholder kun dataene. CSS-baggrund omslutter data-URL'en i en background-image-deklaration. Disse repræsentationer tjener forskellige formål, så kopier den form, din applikation anmoder om, i stedet for kun at ændre filnavnet.
Kodepanelet opdateres umiddelbart efter, at du ændrer Code format. Kopier-ikonet kopierer den aktuelle repræsentation og giver bekræftelse på kopiering. Når adgang til udklipsholderen er blokeret, markeres koden til manuel kopiering.
Et komplet HTML img-tag er ikke det samme som en data-URL. Brug kun src-værdien, når et felt beder om en URL.
Eksemplet i denne guide
Prøv et eksempel: favicon-orbit.png, 512 × 512 px, 202,491 bytes. Vælg HTML billede under Kodeformat. Vælg Start og download favicon-orbit-base64.txt.
- Original PNG
- 512 × 512 px · 202,491 bytes
- HTML tekstoutput
- 270,029 bytes
- Kodning
- Originale bytes; ingen genkomprimering
Download koden og forstå dens størrelse
Vælg Start og derefter Download. Eksemplet gemmer favicon-orbit-base64.txt, der indeholder HTML billedkode. Dens 270,029 bytes er større end kilden på 202,491 bytes. Artiklens sammenligning viser den faktiske begyndelse af den downloadede tekst, forkortet for læsbarhedens skyld.
Base64 konverterer typisk tre kilde-bytes til fire teksttegn, hvilket tilføjer cirka en tredjedel før den lille wrapper. Indlejring af et lille ikon kan gøre et dokument selvstændigt, men placering af store billedstrenge inde i HTML eller CSS forstørrer også dokumentet og forhindrer, at billedet caches som en separat fil.
Kodning er ikke kryptering. Enhver med den komplette Base64-streng kan gendanne det underliggende billede. Behandl koden med samme omhu som kilden, hvis den indeholder private oplysninger.
Det forkortede uddrag i denne artikel er forklarende. Brug den komplette downloadede TXT eller kopiér den fulde kode fra værktøjet.
Almindelige spørgsmål
Vil kodning reducere billedkvaliteten?
Nej. Kodning bevarer de originale bytes. Den ændrer ikke størrelse, komprimerer eller tegner billedet om.
Hvorfor er Base64-strengen større end billedet?
Base64 repræsenterer tre input-bytes ved hjælp af fire teksttegn, så den tilføjer normalt omkring en tredjedel før en wrapper eller præfiks.
Bevares GIF-animationer?
Kodning bevarer de originale GIF bytes, inklusive animation. Et eksempel kan vise et stillbillede, mens den kodede data bevarer alle rammer.
Er Base64 sikker til hemmelige billeder?
Base64 er ikke kryptering. Hold strengen privat, hvis det underliggende billede er privat. Selve konverteren behandler det lokalt i din browser.
Gør det rigtige billede til den rigtige kode.
Prøv et eksempel eller brug din egen fil, og gennemse resultatet før deling.
