WebTools

File to Base64

Makes a data URI ready to paste into CSS or HTML.

Turn a file into a data URI ready to paste into a stylesheet, some HTML or a configuration file. Handy for inlining a small icon and saving a network request.

It makes sense with small files. Past a few kilobytes, inlining starts to lose: the resource can no longer be cached separately and the stylesheet gets heavier for everyone.

How to use it

  1. Drop in the file.
  2. Choose the full data URI or just the Base64.
  3. Process and download the .txt.

Frequently asked questions

Up to what size is inlining worth it?
As a rule of thumb, under about 4 kB. Above that, the 33 % growth and the lost caching usually do more harm than good.
Can I inline an SVG?
Yes, but SVG is usually better encoded with percent-escapes than Base64: it takes less room and stays readable inside the CSS.
Does the MIME type come out right?
It comes from what the operating system reports for the file. If the browser does not know the type, application/octet-stream is used and you can correct it by hand.

Related tools