How to Embed an Image in an HTML Email

Bypiclinkadmin

There are three ways to include images in an HTML email. For most people, a hosted image link is the most reliable.

1. Hosted image (recommended)

Upload the image and use its direct link:

<img src="https://your-image-link.jpg" width="600" alt="Spring sale banner" style="display:block;border:0">
  • Works in Gmail, Outlook, Apple Mail and others
  • Keeps the email small
  • Images may be hidden until the reader clicks “show images”, so always add alt text

Get a link in seconds with Photo to URL.

2. CID (attached and referenced)

The image is attached to the email and referenced as cid:logo123. Most desktop clients show it, but some webmail clients display it as an attachment too, and it increases the email size.

3. Base64 (inline data)

The image is encoded into the HTML as data:image/png;base64,…. It’s blocked or ignored by several major clients, including Gmail, so it’s best avoided for important images.

Tips

  • Set width and height attributes so the layout doesn’t jump.
  • Keep images under about 200 KB each.
  • Use JPG for photos and PNG for logos with transparency.
  • Don’t put important text only inside images.
  • Make sure the image link won’t expire before people open the email.

Similar Posts