Base64 Image Converter
Use local file
Click below to select
Your base-64 encoded image!
How to use this
First of all, this is using HTML5 FileReader() to read and convert the local file and canvas API to display the result.
This can only convert local image from your hard drive.
The browser will do all the work.
The front-end application here is the "conductor" so that the browser will do the intended task.
This is a local JavaScript-based tool. No data will be sent elsewhere.
- Follow the instruction text on the right side of the arrow image.
- Pick the image from your hard drive. Allowed formats are:
jpgjpegpnggifbmpwebP(developed by Google)svg— This part was just updated 2015-09-16. Somebody forgot to include thesvgfilter.
- Then the result will be displayed.
This can convert static or animated (gif) image to base64 URI.
This will only accept file less than 500KB in size.
We put a bit of decoration color for the canvas element.
If your image is a transparent one, don't worry, the background there is the color of canvas.
Test it by selecting the output strings, then copy that. Open a new tab, and paste the strings you copied earlier onto the address bar.
Go to that address by hitting the return, or enter, or go.
You'll see the image transparency is left intact.
Also, for animated gif, the animation won't be displayed on the canvas. But the frames are still there. You can test it using the same method like above.
Is it better to use base64 image than actual image?
Well, depends.
Using base64 URI image means the browser will constantly re-render (re-draw) the image (like, not "caching" it, sort of). It is good if the image size is considerably small (below ~5KB, usually for preload-er or button image). AND, you don't have to use external resource.
For large size images, we REALLY do not recommend using this.
It is WAY better to use a (CDN) host and set (a long) expiration cache period to minimize HTTP requests.
JavaScript reference
The earlier (and updated) demo on CodePen