Følg dette eksempelet, og tilpass deretter de samme kontrollene til ditt eget bilde. Åpne Bilde til Base64-konverterer.
Velg et bilde og forhåndsvis identiteten
Åpne Bilde til Base64-konverterer. Velg et bilde eller Prøv et eksempel. Eksempelet bruker 512 × 512 piksler favicon-orbit.png, som inneholder 202,491 bytes. Editoren viser bildet over koden slik at du kan bekrefte at du valgte riktig ressurs.
PNG, JPG, WebP, GIF, BMP og AVIF støttes når nettleseren din kan dekode dem for forhåndsvisning. Maksimal filstørrelse er 25 MB, med grenser på 60 megapiksler og 16,000 piksler per side. SVG-oppmerking godtas ikke av denne rasterkonvertereren.
Verktøyet leser de originale filbytene. Det bruker ikke forhåndsvisningen til å gjenoppbygge bildet, endre størrelse på det eller komprimere det på nytt. Eksisterende metadata og GIF-animasjon beholdes derfor i de kodede dataene.
Før koding, bruk Endre bildestørrelse eller Bildekomprimering hvis du trenger en mindre ressurs. Base64 i seg selv reduserer ikke bildestørrelsen.
Velg representasjonen prosjektet ditt forventer
Åpne Innstillinger og velg HTML-bilde under Kodeformat for dette eksempelet. Resultatet er en img-tag som inneholder en Base64-data-URL. Alt-attributtet er i utgangspunktet tomt; skriv nyttig alternativ tekst når bildet formidler informasjon.
Data-URL starter med et prefiks som data:image/png;base64, etterfulgt av de kodede dataene. Plain Base64 inneholder bare dataene. CSS-bakgrunn pakker inn data-URL-en i en background-image-deklarasjon. Disse representasjonene tjener forskjellige destinasjoner, så kopier formen som forespørres av applikasjonen din i stedet for å bare endre filnavnet.
Kodepanelet oppdateres umiddelbart etter at du endrer Kodeformat. Kopier-ikonet kopierer den gjeldende representasjonen og gir bekreftelse på at det er kopiert. Når tilgang til utklippstavlen er blokkert, velges koden for manuell kopiering.
En fullstendig HTML img-tagg er ikke det samme som en data-URL. Bruk kun src-verdien når et felt ber om en URL.
Eksempelet i denne veiledningen
Prøv et eksempel: favicon-orbit.png, 512 × 512 piksler, 202,491 bytes. Velg HTML-bilde under Kodeformat. Velg Start og last ned favicon-orbit-base64.txt.
- Original PNG
- 512 × 512 piksler · 202,491 bytes
- HTML tekstutdata
- 270,029 bytes
- Koding
- Originale bytes; ingen rekomprimering
Last ned koden og forstå størrelsen dens
Velg Start, deretter Last ned. Eksempelet lagrer favicon-orbit-base64.txt som inneholder HTML bildekode. Dens 270,029 bytes er større enn kilden på 202,491 bytes. Artikkelens sammenligning viser den faktiske begynnelsen på den nedlastede teksten, forkortet kun for lesbarhet.
Base64 konverterer vanligvis tre kilde-bytes til fire teksttegn, noe som legger til omtrent en tredjedel før den lille innpakningen. Å bygge inn et lite ikon kan gjøre et dokument selvstendig, men å plassere store bildestrenger inne i HTML eller CSS forstørrer også dokumentet og hindrer at bildet blir bufret som en separat fil.
Koding er ikke kryptering. Alle med den fullstendige Base64-strengen kan gjenopprette det underliggende bildet. Behandle koden med samme forsiktighet som kilden hvis den inneholder privat informasjon.
Det forkortede utdraget i denne artikkelen er forklarende. Bruk den fullstendige nedlastede TXT eller kopier hele koden fra verktøyet.
Vanlige spørsmål
Vil koding redusere bildekvaliteten?
Nei. Koding bevarer de originale bytene. Den endrer ikke størrelse, komprimerer eller tegner bildet på nytt.
Hvorfor er Base64-strengen større enn bildet?
Base64 representerer tre inndatabyter ved hjelp av fire teksttegn, så den legger vanligvis til omtrent en tredjedel før en innpakning eller prefiks.
Blir GIF-animasjoner bevart?
Koding bevarer de originale GIF-bytene, inkludert animasjon. En forhåndsvisning kan vise et stillbilde mens den kodede dataen beholder alle bilder.
Er Base64 trygt for hemmelige bilder?
Base64 er ikke kryptering. Hold strengen privat hvis det underliggende bildet er privat. Selve konverteren behandler det lokalt i nettleseren din.
Gjør det rette bildet om til den rette koden.
Prøv et eksempel eller bruk din egen fil, og gå gjennom resultatet før du deler.
