Implementation guide

How to Use a Base64 Image in HTML

Embed a small image directly in an HTML img element with a correctly formed Data URL.

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Description" width="320" height="180" />

Use the complete Data URL

The src value must include data:, the image MIME type, ;base64, and the encoded payload. Raw Base64 alone is not a valid image URL.

Always include alt text

Describe meaningful images for accessibility. Use an empty alt attribute for decoration, and provide width and height to reduce layout shift.

Keep inline images small

Embedded data cannot be cached separately from the HTML document. Use a regular image file for large or frequently reused assets.

Continue with the tool or reference that matches your next step.

Create the Base64 outputEncode a local image and copy the correct format.Data URL builderNormalize the prefix and inspect the payload.Base64 images in CSSCompare the other embedding method.