Image to Base64
How to use the image to base64 tool?
Two easy steps
- Click the "Select an image" button in the dotted area, or directly drag a picture from the computer to the dotted area
- Click the "Copy" button, it will successfully copy the converted base64 code to your clipboard
What is the base64 encoding format of the picture?
Image conversion to base64 is to convert the image into a string in base64 encoding format. This newly generated string contains all the image information. For the img tag of html, you can directly replace the src attribute value, and the image can still be rendered.
You can replace the image address like this:
Before
<img src="https://www.mozilla.org/media/protocol/img/logos/firefox/logo-sm.f26fdae37f50.png" />
After (the effect is the same as using the original address)
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACd..." />
Why do I need to convert the image to base64?
- Reduce http requests. Every picture in the webpage needs an http to request download, and base64 can be downloaded along with html, reducing one http request. Especially small pictures, it is very suitable to be converted into base64 format and directly embedded in html
- Reduce memory usage. The base64 format is a text format, which has a small memory footprint and reduces server consumption
- Easy to import. In web development, it is often necessary to deal with the path of static resources. The path reference will be very confusing. If you use base64 encoding to embed directly, you don’t have to worry about the path