Data-URI-generator: bestanden inline insluiten als base64

Wat zijn data-URI's?

Een data-URI (Uniform Resource Identifier) is een schema waarmee u bestandsinhoud rechtstreeks in een URL-string kunt insluiten in plaats van te verwijzen naar een extern bestand. Gedefinieerd door RFC 2397, coderen data-URI's de inhoud inline met het formaat data:[mediatype][;base64],data. Dit elimineert de noodzaak van een apart HTTP-verzoek om de bron op te halen.

Data-URI's worden vaak gebruikt voor het insluiten van kleine afbeeldingen, lettertypen, SVG's en andere assets rechtstreeks in HTML of CSS. In plaats van te verwijzen naar een extern bestand met een URL, wordt de volledige bestandsinhoud gecodeerd (meestal in base64) en inline geplaatst. Dit kan HTTP-verzoeken verminderen en implementatie voor kleine assets vereenvoudigen.

Hoe data-URI's te maken

Een data-URI-generator converteert bestandsinhoud of tekst naar het data-URI-formaat. Het proces omvat het identificeren van het MIME-type en het coderen van de inhoud.

• Tekstinvoer — voer tekst direct in en specificeer het MIME-type (text/plain, text/html, text/css, application/json). Tekst kan URL-gecodeerd of base64-gecodeerd worden
• Bestandsupload — upload elk bestand (afbeeldingen, lettertypen, SVG's, documenten) en de generator bepaalt automatisch het MIME-type en codeert de inhoud in base64
• MIME-type selectie — het mediatype vertelt de browser hoe de data te interpreteren. Veelgebruikte types zijn image/png, image/svg+xml, text/css en application/javascript

Wanneer data-URI's gebruiken

Data-URI's zijn het meest voordelig voor kleine, vaak gebruikte assets waarbij het elimineren van een HTTP-verzoek de prestaties verbetert.

• CSS-achtergrondafbeeldingen — sluit kleine pictogrammen of patronen direct in CSS in om extra verzoeken te vermijden. Ideaal voor afbeeldingen onder 2-4 KB
• Inline SVG's in CSS — sluit SVG-pictogrammen in als data-URI's in background-image eigenschappen wanneer het SVG niet direct in HTML kan worden geplaatst
• E-mail HTML-templates — sluit afbeeldingen direct in e-mail HTML in omdat veel e-mailclients externe afbeeldingen standaard blokkeren

Veelgestelde vragen

Is er een limiet voor de grootte van data-URI's?

Er is geen harde limiet in de specificatie, maar praktische limieten bestaan. De meeste moderne browsers verwerken data-URI's tot meerdere megabytes, maar Internet Explorer (legacy) beperkte ze tot 32 KB. Base64-codering vergroot de gegevensgrootte met ongeveer 33%. Voor assets groter dan 5-10 KB zijn externe bestanden met juiste caching meestal efficienter.

Beinvloeden data-URI's de prestaties?

Voor kleine assets verbeteren data-URI's de prestaties door HTTP-verzoeken te elimineren. Base64-gecodeerde data is echter ongeveer 33% groter dan het originele bestand, en data-URI's kunnen niet onafhankelijk worden gecached door de browser. Voor grote bestanden presteren externe bestanden met cache-headers beter.

Zijn data-URI's veilig?

Data-URI's hebben beveiligingsimplicaties. De meeste browsers blokkeren JavaScript-uitvoering in data-URI's. Data-URI's kunnen echter Content Security Policy (CSP)-regels omzeilen als deze niet correct zijn geconfigureerd. Bij het accepteren van door gebruikers gegenereerde data-URI's, valideer altijd het MIME-type.