How to embed an image in HTML or CSS with Base64
Turn an image into a data URI you can paste into HTML, CSS or Markdown, when that beats a normal image file and why it rarely works in email.
Normally a web page links to an image file, and the browser fetches it separately. A data URI puts the image itself inside the HTML, CSS or Markdown, written as text using Base64 encoding. For small images, that can be handy: one file instead of two, nothing to upload to a server and nothing to break if paths change.
Encoding the image
Drop or paste an image into Image to Base64. Choose the snippet you need and copy it:
- Data URI: the raw
data:image/png;base64,...value, for anywhere that accepts a URL. - CSS: a ready-made
background-imagerule. - HTML: an
<img>tag. Add a meaningfulaltdescription before you use it. - Markdown: an image you can paste into a README or notes app that supports Markdown.
The image bytes are encoded exactly as they are, so the format and quality don’t change.
When it is a good idea
Data URIs work best for small images that are part of the code:
- Icons, small logos and simple background patterns in a stylesheet.
- A single self-contained HTML file, such as a report, prototype or offline page.
- Small images in documentation where hosting a separate file is awkward.
As a rough guide, keep embedded images to a few kilobytes. SVG icons are usually the best candidates of all.
When it isn’t
- Photos and large images. Encoding adds about a third to the size, and the image is downloaded again every time the page or stylesheet changes, because it can’t be cached separately.
- Email. Gmail and several other email programs don’t display data URI images, so the reader sees a broken image. Attach the image or link to a hosted copy.
- Images that change often. Every update means re-encoding and editing the code.
Shrink it first
Since the encoded text grows with the file, make the image as small as it can be before encoding it. Resize it to the size it will actually be displayed and compress it. Converting a PNG photo to WebP or JPG can cut its size dramatically; which image format should I use? explains which format suits which image.
It isn’t a security measure
Base64 is an encoding, not encryption. Anyone who can read your HTML or CSS can decode the image back to the original file in a second, so it doesn’t hide or protect anything.
Common questions
Why is the Base64 version bigger than my image?
Base64 turns every three bytes into four text characters, so the encoded text is about a third larger than the original file. Compress the image before encoding it.
Can I use Base64 images in an email?
Not reliably. Gmail and several other email programs don’t display data URI images. For email, attach the image or link to a hosted copy instead.
Is a Base64 image slower than a normal image?
For small images, it is often faster because it saves a separate request. For larger images, it is slower: the page’s HTML or CSS gets bigger and the image can’t be cached on its own.
Does Base64 hide or protect the image?
No. Anyone can decode it back to the original file instantly. It is a way of writing the image as text, not encryption.