Convert

Image to Base64 — Inline an Image as a Data URI

This converts an image file into a data URI you can paste directly into CSS or HTML, embedding the bytes in the document instead of referencing a separate file. It removes one network request, and it makes the document about a third larger than the original image.

When it helps

For genuinely small assets where the request overhead outweighs the size penalty — an icon of a few hundred bytes, a tiny gradient, a placeholder. It is also useful where a separate file is awkward: a single-file HTML export, an email template, a build artefact that must not reference external assets. Outside those cases, referencing the file is nearly always better.

Worth running automatically

The reason to watch this is that inlined assets are invisible to the usual accounting. They do not appear as requests in a waterfall, they cannot be cached separately, and they are re-downloaded with the document every time. A stylesheet that has quietly accumulated a dozen inlined images is now a large, uncacheable blocking resource, and nothing about it looks wrong. Tracking document and stylesheet size over time is what surfaces it, because the growth is gradual and each individual addition is defensible.

What you get out of it

One fewer request for genuinely tiny assets, with the size cost made visible rather than hidden. Knowing when not to use it is most of what the tool is for.

Also in Convert