Converter van afbeelding naar Base64 + SVG naar data-URI | We.Inc
Zet PNG-, JPG-, WebP-, GIF- of SVG-afbeeldingen in uw browser om naar Base64-data-URI's. Kopieer als img-tag, CSS-achtergrond of JSON, krijg een kleinere URL-gecodeerde versie voor SVG en zie of inline plaatsen de moeite waard is.
Base64 zet de bytes van een afbeelding om in tekst, zodat die als data-URI in HTML of CSS kan staan, bijvoorbeeld src="data:image/png;base64,...". De tekst is ongeveer een derde groter dan het bestand. Zet hieronder een afbeelding neer om de data-URI te krijgen, kant-en-klare img- en CSS-fragmenten, en advies over of inline plaatsen de moeite waard is.
Wanneer inline plaatsen helpt en wanneer het schaadt
Afbeelding
Inline plaatsen?
Waarom
Icoon onder 4 kB
Meestal wel
Bespaart een verzoek tegen weinig kosten
SVG-logo of -icoon
Ja, URL-gecodeerd
Kleiner dan Base64 en nog steeds leesbaar
Afbeelding boven de vouw, 4 tot 20 kB
Soms
Alleen als ze op één pagina verschijnt
Foto of alles boven 20 kB
Nee
Maakt elke lading zwaarder en kan niet los worden gecachet
Zet één afbeelding of meerdere neer. Elke afbeelding krijgt haar Base64-data-URI en, voor SVG-bestanden, een URL-gecodeerde versie die meestal kleiner is. Kopieer elk ervan als img-tag, CSS-achtergrond of JSON-waarde. Bestanden verlaten uw apparaat nooit.
Sleep afbeeldingen naar het vak of klik om ze te kiezen. PNG, JPG, WebP, GIF, AVIF, ICO en SVG werken allemaal.
De browser leest elk bestand lokaal en codeert het. Er wordt niets geüpload.
Vergelijk de oorspronkelijke grootte met de gecodeerde grootte en lees het oordeel over inline plaatsen.
Kopieer het formaat dat u nodig hebt: ruwe data-URI, img-tag, CSS background-image of JSON.
Eerst comprimeren, dan coderen. Een foto van 300 kB coderen geeft u ongeveer 400 kB tekst, en dat is slechter dan het bestand waarmee u begon.
Voor SVG slaat de URL-gecodeerde vorm Base64 helemaal over. Die is meestal kleiner en u kunt de markup nog steeds lezen en bewerken.
Data-URI's in CSS worden met de stylesheet gedownload, en die blokkeert het renderen. Beperk ze tot kleine iconen die elke pagina nodig heeft.
Denk aan de alt-tekst. Een inline afbeelding heeft nog steeds een beschrijving voor schermlezers nodig, of alt="" als ze decoratief is.
Veelgestelde vragen
Waarom is de Base64-versie groter dan mijn afbeelding?
Base64 gebruikt vier teksttekens voor elke drie bytes, dus de uitvoer is ongeveer 33% groter, plus een paar bytes opvulling en het voorvoegsel data:. Gzip- of Brotli-compressie op de pagina wint daar een deel van terug, maar zelden alles.
Moet ik Base64 gebruiken voor SVG?
Meestal niet. SVG is al tekst, dus het kan in een data-URI met slechts een paar tekens geëscapet. Die versie is doorgaans kleiner dan Base64 en blijft leesbaar. Gebruik Base64 alleen als een tool waarin u plakt de URL-gecodeerde vorm weigert.
Werken data-URI's in e-mails?
De ondersteuning is wisselend. Verschillende grote e-mailprogramma's blokkeren of verwijderen data-URI-afbeeldingen, dus host de afbeelding voor nieuwsbrieven en link ernaar, of voeg haar als bijlage toe met een content-ID.
Is er een groottelimiet voor data-URI's?
Huidige browsers accepteren zeer lange data-URI's in img-tags en CSS, veel langer dan een verstandige afbeelding. De praktische grens is prestaties: grote inline afbeeldingen vertragen het bestand waarin ze staan. Sommige oudere tools en e-mailprogramma's knippen ze wel af.
Hoe een data-URI is opgebouwd
Een data-URI heeft drie delen: het schema data:, het mediatype zoals image/png, en de inhoud. Bij binaire afbeeldingen is de inhoud Base64 en wordt het type gevolgd door ;base64. Bij tekstformaten zoals SVG kan de inhoud de markup zelf zijn, met een handvol tekens percent-gecodeerd.
Browsers behandelen een data-URI als elke andere afbeeldingsbron. Hij wordt in het geheugen gedecodeerd, dus er is geen extra verzoek, maar er is ook geen aparte cache-vermelding: de afbeelding wordt opnieuw gedownload telkens wanneer de pagina of stylesheet waarin ze staat wordt gedownload.
Betere opties voor de meeste afbeeldingen
Voor alles wat groter is dan een icoon is een normaal bestand via HTTP/2 of HTTP/3 bijna altijd sneller. Meerdere verzoeken delen één verbinding, de afbeelding wordt apart gecachet en de browser kan haar lazy laden of op het juiste formaat met srcset.
Inline plaatsen blijft zinvol voor piepkleine iconen in één component, voor placeholders die worden getoond terwijl een echte afbeelding laadt, en voor zelfstandige HTML-bestanden zoals rapporten of offline demo's.
Klein genoeg om inline te plaatsen. Het bespaart een verzoek en voegt weinig toe aan het bestand waarin het staat.
Twijfelgeval. Plaats het alleen inline als het boven de vouw op één pagina verschijnt; anders cachet een normaal bestand beter.
Data-URI
JSON
onbekend type
, {w} bij {h} px
Bestand {file}, gecodeerd {encoded} ({pct}% van het bestand)
SVG-codering
URL-gecodeerde SVG ({size})
Base64 ({size})
Formaat om te kopiëren
... ({n} tekens; gebruik Kopiëren voor de volledige tekst)
Uitvoer van {name}
Kopiëren
{name} is geen afbeelding en is daarom overgeslagen.
Afbeeldingen coderen
Zet afbeeldingen hier neer of klik om te kiezen. Ze blijven op uw apparaat.