Base64 encoded image: When using smaller images/icons on a webpage, it can be more efficient to encode the them into Base64 encoded strings and apply these directly to a HTML image tag or css class.
MIME types: The following MIME types are supported by all major browsers and can be encoded here:
- BMP: image/bmp
- GIF: image/gif
- ICO: image/x-icon
- JPEG: image/jpeg
- PNG: image/png
- SVG: image/svg
- TIFF: image/tiff
The below samples uses
image/jpeg
as MIME type and a
1x1 pixel content
. Remember to replace with your correct MIME type and content.
When copying to clipboard the MIME type will be set based on the file extension.
Usage in HTML:
<img src='data:
image/gif
;base64,
R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
'>
Usage in CSS:.myimage {
background-image: url('data:
image/gif
;base64,
R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
');
}