Wanneer afbeeldingen inline plaatsen
Het coderen van een afbeelding naar Base64 ruilt een netwerkverzoek in voor een groter bestand. Dat is een overwinning voor kleine, veelgebruikte assets (pictogrammen, kleine logo's, spacer-afbeeldingen) waarbij de latentie heen en terug meer kost dan de extra bytes. Bewaar grote foto's als afzonderlijke bestanden.
Gegevens-URI's gebruiken in CSS en HTML
Een gegevens-URI is slechts een tekenreeks die begint met data:image/png;base64,. Plaats het in een CSS-achtergrondafbeelding of een HTML img src en de browser geeft het inline weer. Deze tool genereert beide fragmenten, zodat u de juiste direct kunt plakken.
De afweging tussen afmetingen
Base64-codering voegt grofweg 33% toe aan de bestandsgrootte omdat het binaire gegevens in tekst vertegenwoordigt. Inlining betekent ook dat het item niet afzonderlijk op verschillende pagina's in de cache kan worden opgeslagen. Gebruik het bewust voor kleine, paginakritische afbeeldingen in plaats van voor alles.
- 01
- Afbeeldingscodering met slepen en neerzetten
- 02
- Genereren van CSS-achtergrondafbeeldingsfragmenten
- 03
- HTML img src gegevens-URI-uitvoer
- 04
- Directe Base64-decodering
