Afbeelding naar Base64
Zet een afbeelding om in een data-URI die je rechtstreeks in CSS of HTML kunt plakken.
- Draait op je apparaat — het bestand wordt nergens naartoe gestuurd
- Geen aanmelding, geen watermerken, geen dagelijkse quota
- Gratis, zonder limiet op hoe vaak je het gebruikt
Hoe het werkt
Een data-URI sluit een afbeelding rechtstreeks in je broncode in, in plaats van naar een apart bestand te verwijzen. Dat scheelt één netwerkverzoek, wat telt voor piepkleine afbeeldingen die anders elk een heen-en-terugreis kosten.
Wanneer het de moeite waard is
Kleine pictogrammen, logo's en eenkleurige afbeeldingen. Onder ongeveer 2 KB weegt het bespaarde verzoek meestal op tegen de kosten. Daarboven wint een gewone bestandsverwijzing.
De groottestraf
Base64 codeert drie bytes als vier tekens, dus een data-URI is ongeveer 33% groter dan het bestand. Hij kan ook niet apart in de cache worden bewaard — hij wordt opnieuw gedownload bij elke kopie van de stylesheet of pagina die hem bevat.
Waar je het plakt
Rechtstreeks in een CSS-url() of een img-src-attribuut. De uitvoer heeft al het juiste mediatypevoorvoegsel.
Afbeelding naar Base64 — vragen
Waarom is er een groottelimiet?
Data-URI's horen in broncode thuis en zeer grote blazen elke pagina op die ze bevat. De limiet is 2 MB.
Werkt het met SVG?
SVG is tekst, dus het kan rechtstreeks inline worden gezet zonder Base64, wat kleiner is.
Wordt mijn afbeelding geüpload?
Nee. De codering gebeurt in je browser.