How do you convert an image to a Base64 data URI?
To convert an image to Base64, drop a JPG, PNG, GIF, SVG or WebP file and the complete data URI appears instantly, starting with data:image/png;base64, or the matching type, with its size shown in KB. Copy it straight into an img src attribute or a CSS background. Encoding runs in the browser and adds about 33% to the size.
When should you use a Base64 image instead of a file?
Inline Base64 suits tiny images such as icons and tracking pixels under roughly 2 KB, where saving an HTTP request outweighs the 33% size overhead. For anything larger, a normal image file is better: it can be cached separately, compressed by the server, and lazy-loaded, whereas Base64 bloats the HTML or CSS on every page load.
Runs in your browser. Your files and text never leave your device - nothing is uploaded.
