Volg dit voorbeeld en pas daarna dezelfde instellingen toe op je eigen afbeelding. Open Afbeelding naar Base64 converter.
Selecteer een afbeelding en bekijk het voorbeeld
Open de Afbeelding naar Base64 Converter. Selecteer een afbeelding of probeer een voorbeeld. Het voorbeeld gebruikt de 512 × 512 pixel favicon-orbit.png, die 202,491 bytes bevat. De editor toont de afbeelding boven de code zodat je kunt bevestigen dat je de juiste asset hebt geselecteerd.
PNG, JPG, WebP, GIF, BMP en AVIF worden ondersteund wanneer je browser ze kan decoderen voor een voorbeeld. De maximale bestandsgrootte is 25 MB, met limieten van 60 megapixels en 16,000 pixels per zijde. SVG-markup wordt niet geaccepteerd door deze rasterconverter.
De tool leest de originele bestandsbytes. Het gebruikt het voorbeeld niet om de afbeelding opnieuw op te bouwen, te verkleinen of opnieuw te comprimeren. Bestaande metadata en GIF-animatie blijven daarom behouden in de gecodeerde data.
Gebruik vóór het coderen Resize Image of Image Compressor als je een kleinere asset nodig hebt. Base64 zelf verkleint de afbeeldingsgrootte niet.
Kies de weergave die je project verwacht
Open Instellingen en selecteer HTML-afbeelding onder Code-indeling voor dit voorbeeld. Het resultaat is een img-tag die een Base64 data URL bevat. Het alt-attribuut is aanvankelijk leeg; schrijf nuttige alternatieve tekst wanneer de afbeelding informatie overbrengt.
Data URL begint met een prefix zoals data:image/png;base64, gevolgd door de gecodeerde data. Plain Base64 bevat alleen de data. CSS-achtergrond verpakt de data URL in een background-image declaratie. Deze weergaven dienen verschillende doelen, dus kopieer de vorm die je applicatie vereist in plaats van alleen de bestandsnaam te wijzigen.
Het codepaneel wordt direct bijgewerkt nadat je de Code-indeling wijzigt. Het kopieer-icoon kopieert de huidige weergave en geeft de bevestiging dat het gekopieerd is. Wanneer toegang tot het klembord is geblokkeerd, wordt de code geselecteerd voor handmatig kopiëren.
Een volledige HTML img-tag is niet hetzelfde als een data-URL. Gebruik alleen de src-waarde wanneer een veld om een URL vraagt.
Het voorbeeld in deze handleiding
Probeer een voorbeeld: favicon-orbit.png, 512 × 512 px, 202,491 bytes. Kies HTML afbeelding onder Code-indeling. Selecteer Start en download favicon-orbit-base64.txt.
- Origineel PNG
- 512 × 512 px · 202,491 bytes
- HTML tekst-output
- 270,029 bytes
- Coderen
- Originele bytes; geen hercompressie
Download de code en begrijp de grootte ervan
Selecteer Start en vervolgens Downloaden. Het voorbeeld slaat favicon-orbit-base64.txt op met HTML afbeeldingscode. De 270,029 bytes zijn groter dan de 202,491-byte bron. De vergelijking in het artikel toont het werkelijke begin van de gedownloade tekst, alleen ingekort voor de leesbaarheid.
Base64 zet doorgaans drie bronbytes om in vier teksttekens, wat ongeveer een derde toevoegt vóór de kleine wrapper. Het insluiten van een klein icoon kan een document zelfstandig maken, maar het plaatsen van grote afbeeldingsreeksen in HTML of CSS vergroot dat document ook en voorkomt dat de afbeelding als apart bestand wordt gecachet.
Coderen is geen versleuteling. Iedereen met de volledige Base64-reeks kan de onderliggende afbeelding herstellen. Behandel de code met dezelfde zorg als de bron als deze privégegevens bevat.
Het ingekorte fragment in dit artikel is ter toelichting. Gebruik het volledige gedownloade TXT of kopieer de volledige code uit de tool.
Veelgestelde vragen
Vermindert codering de beeldkwaliteit?
Nee. Codering behoudt de originele bytes. Het formaat wordt niet gewijzigd, gecomprimeerd of opnieuw getekend.
Waarom is de Base64-string groter dan de afbeelding?
Base64 vertegenwoordigt drie invoerbytes met vier teksttekens, dus het voegt normaal gesproken ongeveer een derde toe vóór een wrapper of prefix.
Worden GIF animaties behouden?
Codering behoudt de oorspronkelijke GIF-bytes, inclusief animatie. Een voorbeeldweergave toont mogelijk een stilstaand beeld, terwijl de gecodeerde gegevens alle frames behouden.
Is Base64 veilig voor geheime afbeeldingen?
Base64 is geen versleuteling. Houd de string privé als de onderliggende afbeelding privé is. De converter zelf verwerkt deze lokaal in je browser.
Zet de juiste afbeelding om in de juiste code.
Probeer een voorbeeld of gebruik je eigen bestand en bekijk het resultaat voordat je het deelt.
