How to embed an image in HTML on a Mac
You can do this with B64 and get the finished tag, not a naked string you have to wrap yourself. Here is how, and where an embedded image is the right call.
An <img> tag normally points somewhere. That is fine until the somewhere is blocked, moved or deleted — which is exactly what happens to images in email, in an HTML file someone opens from their downloads folder, or in a bug report read six months later.
Embedding the picture in the tag itself removes the dependency. This guide covers producing that tag in B64.
The conversion runs in the app, on your Mac. Nothing is uploaded and there is no account — so the picture you are embedding does not have to visit a stranger's server on its way into your markup.
Get the tag
Open Encode
Click Encode in the sidebar or press ⌘1.
Load the image
Drag it in, press ⌘O, or press ⇧⌘V for an image on the clipboard.
Choose HTML
Pick HTML from the format menu. The result is a complete
<img>element with a correctly typed data URI already insrc.Copy and paste it in
Copy (⇧⌘C) and paste it where the image goes. There is nothing to assemble by hand.
What you get
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…" alt="…">Everything that makes the tag valid is present: the scheme, the MIME type read from the file's real bytes, the base64 marker and the payload. Add whatever else your markup needs — width, height, class, loading — around it.
An embedded image is still an image, and a screen reader still needs to know what it is. Replace the placeholder with a short description of what the picture shows. If it is purely decorative, an empty alt="" is the correct answer — not a missing one.
When embedding is the right call
| Situation | Embed? | Why |
|---|---|---|
| An HTML email | Yes, for small images | Remote images are blocked by default in most mail clients |
| A single-file page or demo | Yes | It works from disk, with no assets folder |
| A bug report or a ticket attachment | Yes | The report stays complete however it is forwarded |
| A logo or icon on a page | Usually | Small, never changes, and must never 404 |
| A hero photograph on a public page | No | Too large, cannot be cached separately, delays the page |
| A gallery | No | Every image is downloaded whether or not it is seen |
Two things an embedded image changes
Caching. A linked image is fetched once and reused everywhere. An embedded one is part of the document, so it is downloaded with every copy of the document. Embedding the same logo on forty pages downloads it forty times.
Size. Base64 adds about 33%, and that lands inside your HTML. A 200 kB photograph makes the page 267 kB bigger. The Inspector (⌥⌘I) shows the exact character count so you can decide with a number rather than a feeling.
Email in particular
Email is the case where embedding most clearly wins, because the alternative frequently does not display at all. A few notes:
- Keep it small. A signature mark or a header logo, not a photograph. Some mail systems clip long messages.
- PNG or JPEG. Those are understood everywhere; more modern types are not universally supported in mail clients.
- Test by sending it to yourself and reading it in the clients your audience actually uses.
Going the other way
If you have an <img> tag and want the picture back, paste the whole tag into Decode — the payload is found inside the attribute and decoded. See how to extract an image from an HTML img tag.
Troubleshooting
The image does not appear in an email
Check that the whole tag survived the send — some editors reformat pasted HTML and can introduce a line break in the middle of the payload. Paste your data URI into a browser tab to confirm the string itself is intact.
My editor reformatted the tag and broke it
Some editors wrap long attribute values. A newline inside the data URI invalidates it. Turn off attribute wrapping for that file, or paste into a plain-text view.
The page got much slower
You embedded something large, or embedded the same asset on many pages. Link those and keep embedding for the small, must-not-go-missing ones.
Frequently asked questions
Do I get a full img tag or just the string?
A full tag, with the data URI already in the src attribute and the MIME type read from the file's real bytes. There is nothing to assemble by hand.
Should I embed images in an HTML email?
For small ones, yes — remote images are blocked by default in most mail clients, so an embedded logo or signature mark is the version that actually displays. Keep it small, and stick to PNG or JPEG.
Does an embedded image hurt page speed?
It can. An embedded image is downloaded with every copy of the document and cannot be cached separately, and Base64 adds about a third to its size. Embed the small must-not-go-missing assets; link the big ones.
Do I still need an alt attribute?
Yes. An embedded image is still an image. Write a short description, or an explicitly empty alt if it is decorative.
Related Guides
How to create a data URI from an image on a Mac
Turn an image into a data:image/…;base64 URI on your Mac, with the right MIME type written for you, ready to paste into a browser, an href or a stylesheet.
Output formatsHow to embed an image in CSS on a Mac
Get a finished background-image rule with the picture inside it, so a stylesheet carries its own assets — produced on your Mac, nothing uploaded.
DecodingHow to extract an image from an HTML img tag on a Mac
Paste a whole tag and get the picture out — free, on your own Mac, with no need to pick the payload out of the attribute first.