Base64 in HTML <img>
The simplest way to show a Base64 image is to put a data URI into the src attribute of an <img> tag.
Example
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAK..." alt="Search icon" width="16" height="16" />Notes
- Always set width and height to avoid layout shift (it improves Core Web Vitals).
- Data URI images are not lazy-loadable in a useful way, because the bytes are already inside the HTML.
- Use the Image to Base64 converter to generate the tag automatically.
Comments (0)
Questions, ideas or a bug in “Base64 in HTML <img>”? Leave a comment, rate the tool, or reply to others.
No comments yet. Be the first to share your feedback!