Afbeeldingsvoorbeeld & Info
Ruwe Base64‑string
Base64-encoded data (no prefix)
Data‑URI
Complete data URI (data:image/...;base64,...)
CSS‑achtergrond
CSS background-image property
HTML‑afbeeldingstag
Ready-to-use <img> element
Converteer elke afbeelding direct naar een Base64‑gecodeerde string. Ontvang data‑URI’s, CSS‑achtergrondfragmenten en HTML‑img‑tags – allemaal verwerkt in uw browser zonder serveruploads.
Base64‑codering is slechts één onderdeel van de puzzel. OneStepToRank biedt u een volledige reeks tools en optimalisatie‑intelligentie om uw lokale zoekresultaten te domineren.
Begin GratisBase64‑codering is een methode om binaire data om te zetten naar platte ASCII‑tekst met 64 afdrukbare tekens. Toegepast op afbeeldingen resulteert dit in een tekststring die het volledige afbeeldingsbestand vertegenwoordigt. Deze string kan direct in HTML worden ingebed via de <img>-tag met het src-attribuut, in CSS via de eigenschap background-image, of in JSON‑payloads voor API‑communicatie. De codering gebruikt de tekens A-Z, a-z, 0-9, + en /, met = als opvulling. Elke 3 bytes binaire data leveren 4 Base64‑tekens op, waardoor het gecodeerde resultaat ongeveer 33 % groter is dan het originele bestand.
Een data‑URI (Uniform Resource Identifier) embedde de bestandsinhoud direct in de URL zelf met de syntaxis data:[mediatype];base64,[data]. Voor afbeeldingen betekent dit dat u de volledige afbeelding kunt opnemen in uw HTML of CSS zonder een apart bestand op de server nodig te hebben. Dit elimineert een HTTP‑verzoek, wat voordelig kan zijn voor kleine afbeeldingen zoals iconen, logo’s en UI‑sprites. Het nadeel is dat data‑URI’s de grootte van uw HTML‑ of CSS‑document vergroten, niet onafhankelijk door de browser gecached kunnen worden, en ongeveer een derde groter zijn dan het originele binaire bestand. Als vuistregel zijn afbeeldingen onder 5‑10 KB goede kandidaten voor inline‑embed, terwijl grotere bestanden beter als apart bestand met juiste cache‑headers kunnen worden geserveerd voor betere algehele prestaties.
Hoewel het elimineren van HTTP‑verzoeken de initiële paginarendering kan versnellen, brengt het embedden van grote afbeeldingen als Base64‑strings verschillende nadelen met zich mee. Het HTML‑ of CSS‑bestand wordt aanzienlijk groter, waardoor de eerste documentdownload wordt vertraagd. De browser kan de afbeelding niet apart cachen van het omvattende document. En de 33 % overhead betekent meer data die over het netwerk wordt verzonden vergeleken met het direct serveren van het binaire bestand. Voor kritieke renderpaden kunnen kleine inline‑afbeeldingen de waargenomen laadtijd verkorten door render‑blocking verzoeken te vermijden. Maar voor content‑afbeeldingen, hero‑banners of elke afbeelding groter dan enkele kilobytes, levert het serveren van geoptimaliseerde binaire bestanden met CDN‑caching en moderne formaten zoals WebP of AVIF betere prestaties op. Gebruik Base64‑codering strategisch voor kleine, vaak gebruikte assets die profiteren van minder verzoeken.