Softonic

Base64-afbeeldingsencoder

Stap 1 / 3 Laat je afbeelding hier vallen

Verwerken...

Een kleine afbeelding inline zetten als Base64-data-URI kan één HTTP-request vermijden en houdt het bestand bij de HTML of CSS die het gebruikt. Deze browsertool accepteert gevalideerde PNG-, JPEG-, GIF- en WebP-bestanden plus SVG-tekst die met een <svg>-hoofdelement kan worden verwerkt, tot 5 MiB. De uitvoer kan ruwe Base64, een data-URI, CSS, HTML of JSON zijn. Controleer of de gekozen vorm bij het doel past. SVG wordt alleen structureel gecontroleerd en kan nog steeds actieve of onveilige inhoud bevatten.

Een afbeelding encoderen

  1. 1

    Sleep je afbeelding erin

    Kies een PNG-, JPG-, GIF-, WebP- of SVG-bestand van maximaal 5 MiB. Rasterafbeeldingen mogen aan geen enkele zijde groter zijn dan 16.384 pixels en in totaal niet meer dan 33.554.432 pixels bevatten. De gecodeerde tekst blijft onder 7 MiB.

  2. 2

    Encoding draait in de browser

    Afbeeldingsbytes worden gelezen, Base64-gecodeerd en voorzien van de juiste `data:` URI-header.

  3. 3

    Kies uitvoerformaat

    Ruwe Base64, CSS `background-image`-regel, HTML `<img>`-tag of JSON-safe string.

  4. 4

    Kopieer het resultaat

    Plak in een stylesheet, template of API-body.

Wanneer afbeeldingen inline zetten de moeite waard is

Kandidaten om vóór het inline zetten te beoordelen en te testen:

  • Iconen onder 2 KB, Bespaart een HTTP-request met verwaarloosbare overhead.
  • E-mailtemplates - Data-URI’s worden niet door alle mailclients op dezelfde manier ondersteund. Test de doelclients en gebruik zo nodig CID- of gehoste afbeeldingen.
  • Hero-placeholders (LQIP), Lage-kwaliteit, geblurde versie inline; volledige afbeelding wordt daarna geladen.
  • SVG’s die eenmalig worden gebruikt, SVG is tekst; een correct procentgecodeerde data-URI kan afhankelijk van de tekens en opmaak kleiner zijn dan Base64.

Slechte kandidaten:

  • Grote afbeeldingen, Een afbeelding van 500 KB met 33% opblazen kost 166 KB verspilling.
  • Afbeeldingen die op meerdere pagina’s worden hergebruikt, Inline schakelt browsercaching over routes uit.
  • Critical CSS, Zware afbeeldingen inline zetten blaast het kritieke pad op.

Verwachte grootte

Afbeeldingsgrootte Base64-stringgrootte
500 bytes ~680 tekens
2 KB ~2.7 KB
20 KB ~27 KB
200 KB ~270 KB

Data URI-formaat

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • data:-schema
  • MIME-type
  • ;base64,-indicator
  • De gecodeerde bytes

SVG is een speciaal geval

Base64 vergroot de oorspronkelijke SVG-bytes met ongeveer een derde voordat de omringende syntaxis wordt toegevoegd; procentcodering verlengt alleen tekens die moeten worden ontsnapt. Welke vorm korter is, hangt af van de SVG. Gebruik voor de tekstvorm een correct procentgecodeerde waarde data:image/svg+xml,.... Het losse token ;utf8 is geen standaardparameter van een data-URI, en niet-ontsnapte tekens zoals #, %, aanhalingstekens of witruimte kunnen de URI breken. Deze tool controleert de SVG-structuur, maar verwijdert geen scripts, eventhandlers of externe verwijzingen. Controleer niet-vertrouwde SVG daarom vóór gebruik.

Veelgestelde vragen

Base64-tekst beslaat ongeveer 4/3 van de bronbytes, plus de data-URI of omringende code. De prestaties hangen af van multiplexing, compressie, caching, hergebruik, bundelgrootte en het content-securitybeleid. Meet de echte pagina; er is geen universele grens van 4 KB.

Inline zetten alleen heeft geen gegarandeerd SEO-effect. Een CSS-achtergrond heeft geen semantiek voor alternatieve tekst. Gebruik voor informatieve afbeeldingen een HTML-element <img> met betekenisvolle alt-tekst en houd decoratieve achtergronden buiten de inhoudsstructuur.

Nee. De encoder leest het bestand lokaal met de FileReader API en produceert de Base64-string in de browser. Niets verlaat je machine.

Ja, gebruik de Base64 to Image-tool om een data:image/... URI terug te zetten naar een downloadbaar bestand.

Gerelateerde tools

WebP naar PNG

Converteer WebP-afbeeldingen naar PNG met behoud van transparantie en pixelnauwkeurige kwaliteit voor bewerken, afdrukken en oudere ontwerptools.

PNG naar SVG vectoriseren

Trek PNG-rasterafbeeldingen in de browser over als SVG-paden. Ideaal voor logo’s, iconen en lijntekeningen. Regel drempelwaarde, aantal kleuren en afvlakking.

GIF-maker

Zet een reeks afbeeldingen of een korte video om in een geanimeerde GIF. Stel beeldsnelheid, herhalingen en afmetingen in voor het exporteren.

Barcodegenerator

Maak in de browser een 1D-barcode in Code 128, EAN, UPC, ITF-14 en andere ondersteunde formaten en download deze als SVG of PNG.

Bulk afbeeldingsresizer

Sleep meerdere afbeeldingen naar binnen, pas ze in of rek ze naar een doelgrootte en exporteer JPG, PNG of WebP in één ZIP. De verwerking blijft in je browser.

Foto-editor

Browsergebaseerde foto-editor met bijsnijden, draaien, helderheid, contrast, verzadiging, filters, tekstoverlay en export naar JPG, PNG of WebP.