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

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

LEGO-mozaïek maken

Maak van je foto een mozaïekplan van 16 × 16, 32 × 32, 48 × 48 of 64 × 64 vakjes. Bekijk benaderde kleuren, tel 1×1-plaatjes en download een genummerd bouwschema.

Muziekpapier met notenbalken maken

Maak afdrukbaar muziekpapier: lege notenbalken, vioolsleutel of bassleutel, dubbele notenbalk voor piano of gitaartabulatuur. Kies aantal, lijnafstand, A4 of Letter en marges en download PDF of SVG.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

Afbeelding op meerdere pagina’s afdrukken

Verdeel één afbeelding over A4, Letter of grotere vellen. Stel postermaat, overlap en snijtekens in en download een afdrukklare PDF.

Avatar Maker

Maak in je browser een vlakke geïllustreerde avatar. Kies huidtint, haar, ogen, mond, kleding, achtergrond en een optionele weergavenaam, en download SVG of PNG.

Tool beschikbaar in andere talen