Een icoon van 2 KB heeft geen eigen HTTP-verzoek nodig. Schrijf het als tekst in het stijlblad, en de browser heeft één bestand minder op te halen. Afbeelding naar Base64 zet een PNG-, JPG-, GIF-, WebP-, BMP- of SVG-bestand om in die tekst. Het werkt ook andersom: plak een string en krijg de afbeelding terug.
Vijf uitvoeren uit één neergezet bestand
Zet één afbeelding in het neerzetvak, of klik op het vak en kies een bestand. De tool toont een voorbeeld, de bestandsnaam, het MIME-type, de grootte in bytes en de grootte in pixels. Daaronder staan vijf vakken, elk met een eigen kopieerknop: de data URI, de ruwe Base64, een HTML-<img>-tag, een CSS-regel background-image en een Markdown-afbeelding. Elk vak heeft ook een knop die zijn tekst als .txt-bestand opslaat.
Als de pagina opent, wordt een kleine voorbeeldafbeelding geladen, zodat de vakken nooit leeg zijn.
De bestandsnaam wordt de alternatieve tekst van de HTML- en Markdown-fragmenten. Aanhalingstekens en punthaken in de naam worden geëscaped, dus een bestand met de naam my "logo".png breekt de tag niet.
Waarom de tekst een derde groter is dan het bestand
Base64 schrijft elke 3 bytes als 4 tekens. De tekst is dus ongeveer 33 % groter dan de afbeelding en de tool toont het exacte cijfer voor jouw bestand. Een inline afbeelding kan ook niet zelfstandig worden gecachet, omdat ze in het HTML- of CSS-bestand zit. Boven 100 KB aan Base64-tekst toont de tool een waarschuwing. Bij een foto is dat meestal het punt waarop een gewoon afbeeldingsbestand de betere keuze is.
Stappen van bestand naar fragment
- Laat de knop "Afbeelding naar Base64" geselecteerd.
- Zet de afbeelding in het neerzetvak, of klik op het vak en kies het bestand.
- Bekijk het voorbeeld en de cijfers.
- Druk op "Kopiëren" in het vak dat je nodig hebt, of op ".txt downloaden" om die tekst op te slaan.
Een string terugzetten naar een afbeelding
Selecteer "Base64 naar afbeelding" en plak een volledige data URI of kale Base64. Het URL-veilige alfabet (- en _), ontbrekende opvulling en regeleinden worden allemaal geaccepteerd. Een data URI zonder ;base64 wordt gelezen als met procenten gecodeerde tekst, wat bij SVG gebruikelijk is.
De tool leest de eerste bytes om het type te vinden: PNG, JPEG, GIF, WebP en BMP aan hun handtekeningen, SVG aan het begin <svg. Als de data URI een ander type noemt dan de bytes tonen, meldt de tool dat en vertrouwt hij de bytes. De downloadknop slaat image.png, image.jpg enzovoort op. Tekst die geen geldige Base64 is, krijgt een foutmelding, geen leeg voorbeeld.
De limiet van 20 MB en wat op je machine blijft
Coderen accepteert één bestand tegelijk, tot 20 MB. Een groter bestand wordt geweigerd voordat het wordt gelezen. Decoderen stopt bij dezelfde 20 MB aan afbeeldingsgegevens. Bij zeer lange uitvoer tonen de vakken de eerste 100.000 tekens en zeggen dat ook; kopiëren en downloaden gebruiken altijd de volledige tekst.
Niets verlaat de browser. Het bestand wordt gelezen met de eigen bestands-API van de browser, het voorbeeld komt van een lokale blob-URL en er wordt geen verzoek verstuurd. De tool slaat niets op, dus herladen wist alles. Het klembord wordt alleen gebruikt als je op een kopieerknop drukt.