Data URI / รูปภาพ Base64

A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.

How to use it

• Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
• Decode: paste a Data URI or raw Base64 to get the original file back for download.
• The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.

Common uses

• Embedding small icons or sprites in CSS to avoid an extra HTTP request.
• Building email templates, where external images can get blocked by the email client.
• Quickly previewing an image as a self-contained string without uploading the file anywhere.

Things to keep in mind

Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.

A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.