Afbeelding naar Base64

Deze afbeelding-naar-Base64-converter maakt van een afbeelding een data-URI, een lange tekststring waarin de afbeelding direct is ingebed, plus een kant-en-klaar CSS-achtergrondfragment. Zo kun je een afbeelding inline plaatsen in plaats van naar een apart bestand te linken.

Het draait lokaal in je browser, dus je afbeelding wordt op je apparaat gelezen en nooit geüpload.

Een data-URI draagt de hele afbeelding in de markup mee, zodat de browser geen aparte netwerkaanvraag doet om die op te halen. Voor kleine assets zoals iconen kan die bespaarde rondgang een pagina sneller laten aanvoelen.

Het addertje zit in grootte en caching. Base64 voegt ongeveer 33 procent overhead toe omdat het binaire gegevens weergeeft met een beperkt tekstalfabet, en een inline afbeelding kan niet apart worden gecachet, dus wordt die opnieuw gedownload met elke pagina die haar bevat.

De vuistregel is om kleine afbeeldingen inline te plaatsen, iconen, kleine logo's of een sprite, waar het vermijden van een aanvraag de overhead waard is, en om grotere afbeeldingen als gewone bestanden te houden die de browser kan cachen en parallel laden.

Data-URI's werken overal waar een URL wordt geaccepteerd: een img src, een CSS-achtergrond of een veld in JSON of een e-mailsjabloon. Dat maakt ze handig voor op zichzelf staande fragmenten.