Afbeelding naar Base64

Hoe je dit gebruikt Afbeelding naar Base64

1. Kies je afbeelding.
2. Bekijk de omvang van het resultaat.
3. Kopieer als data-URI, als img-tag of als CSS-achtergrond.

Wanneer het de moeite waard is

De afweging is simpel: één verzoek minder, ongeveer een derde meer bytes.

De moeite waard bij kleine afbeeldingen die altijd nodig zijn: een icoon, een klein logo, een patroon als achtergrond. Onder ongeveer vijf kilobyte is het bijna altijd gunstig.

Niet de moeite waard bij grote afbeeldingen. Een foto van honderden kilobytes maakt je HTML of CSS navenant groter, en die worden altijd geladen — ook door bezoekers die de afbeelding nooit te zien krijgen.

Belangrijk nadeel: een ingesloten afbeelding wordt niet apart in de cache bewaard. Staat hij in je CSS, dan wordt hij bij elke wijziging van dat bestand opnieuw meegestuurd. Een los bestand blijft in de cache staan.

Voor e-mail geldt iets anders: veel e-mailprogramma's blokkeren juist externe afbeeldingen, maar veel blokkeren ook data-URI's. Insluiten in e-mail is daarom geen betrouwbare oplossing.

Praktisch

Optimaliseer de afbeelding voordat je hem omzet. Base64 op een niet-gecomprimeerde PNG is dubbel zonde.

Voor eenvoudige iconen is een SVG vaak beter dan een base64-PNG: kleiner, scherp op elke maat, en direct in HTML te plaatsen zonder codering.

Let op de opbouw: een data-URI begint met het mediatype en de aanduiding base64, gevolgd door een komma en de gegevens. Kopieer het geheel, niet alleen het laatste deel.

In CSS zet je hem tussen aanhalingstekens in de url-functie. In HTML kan hij rechtstreeks in het src-attribuut.

Alles gebeurt in je browser.

Veelgestelde vragen