Afbeelding naar Base64

Codeer afbeeldingen als Base64 data-URI's

Een Base64 data-URI verandert een afbeelding in een gewone tekststring die je rechtstreeks in je HTML of CSS kunt plakken. De browser decodeert hem direct, zodat de afbeelding zonder apart bestandsverzoek wordt getoond: handig voor kleine pictogrammen, e-mailtemplates en zelfstandige pagina's in één bestand.

Deze tool leest je bestand lokaal en geeft de volledige data:-URI, plus kant-en-klare <img>- en CSS-background-image-snippets die je met één klik kunt kopiëren. Er wordt niets geüpload: de codering gebeurt volledig in je browser.

Wanneer wel en niet insluiten

Insluiten scheelt een HTTP-verzoek, wat kleine, kritieke afbeeldingen kan versnellen. Maar Base64 is ongeveer 33% groter dan het binaire bestand en kan niet apart worden gecachet, dus vermijd het voor grote foto's of afbeeldingen die op veel pagina's terugkomen. Als vuistregel sluit je pictogrammen van een paar kilobyte in en houd je grotere afbeeldingen als gewone bestanden.

Het resultaat gebruiken

De data-URI behoudt het oorspronkelijke bestandstype, bijvoorbeeld data:image/png;base64, gevolgd door de gecodeerde bytes, en de statusregel toont hoeveel kilobyte tekst is ontstaan. Gebruik de drie kopieerknoppen afhankelijk van de bestemming: de kale URI voor een src- of href-waarde, de <img>-tag voor HTML (voeg daarna een betekenisvolle alt-tekst toe) of de CSS-regel voor een stylesheet.

Praktische kanttekeningen

• Een lange Base64-string maakt je HTML- of CSS-bestand groter en trager te lezen, en wordt opnieuw gedownload bij elke pagina die hem bevat. Gzip of Brotli winnen een deel van de overhead terug, maar de afbeeldingsdata is al gecomprimeerd, dus de winst is beperkt.
• Als je site een Content Security Policy gebruikt, moet img-src data:-URI's toestaan.
• Veel e-mailprogramma's blokkeren of verwijderen data-URI's, dus test voordat je erop vertrouwt in nieuwsbrieven.
• Comprimeer of verklein de afbeelding eerst; een kleinere bron levert een veel kortere string op.

Goede kandidaten om in te sluiten

Kleine pictogrammen, piepkleine plaatshouders, laadindicatoren, eenvoudige logo's en afbeeldingen in HTML-demo's met één bestand passen het best. Foto's, hero-banners en afbeeldingen die op veel pagina's staan, lever je beter als aparte bestanden zodat de browser ze kan cachen. De codering gebeurt in je browser en de tekst die je kopieert verlaat je apparaat pas wanneer je hem zelf ergens plakt.