How to Embed Graphics in Email | Insert Images That Display Inline

To embed graphics in email, place the image directly in the message body using the composer’s insert feature, or use HTML with a hosted URL, CID reference, or Base64 encoding.

An image that lands as a separate attachment instead of sitting inside the message body is a problem nearly everyone runs into. The fix depends on whether you are using a webmail composer or building a custom HTML email. How to embed graphics in email comes down to four real methods — one of them works in every situation, and the others exist for specific tools and workflows.

What Does Embedding a Graphic in Email Actually Mean?

Embedding means the image displays inline inside the email body when the recipient opens it, rather than appearing as an attached file they must download separately. Three technical approaches make this happen, plus the simple drag-and-drop or insert-photo buttons found in most email composers.

Each approach handles how the image is stored and referenced differently. The choice affects whether the image loads reliably across email clients, how large the message file becomes, and whether the recipient sees it at all with default security settings.

Embedding Graphics in Email: The Most Compatible Approach

Hosting the image on a public URL and referencing it in the email’s HTML is the method that works across the widest range of email clients. You upload the image to a publicly accessible server, then point an <img> tag at that URL inside an HTML email. Most email platforms that support custom templates — Mailchimp, Campaign Monitor, Constant Contact — use this method natively.

The image file must be publicly accessible without login or authentication, per Twilio’s guidance on email-image delivery. Reduce the file size before uploading. Keep the dimensions reasonable for the slot the image occupies. Test the rendered email in at least three clients before sending.

No email client blocks this method at the protocol level, but many delay image loading until the recipient clicks “show images.” That is why critical information must never live only inside a graphic.

Two Alternative Methods: CID and Base64

The CID and Base64 approaches embed the image data inside the email itself rather than loading it from an external URL. Both solve the “hosted URL may break if the server goes down” problem, but each has real trade-offs.

The CID Method

With Content-ID embedding, you attach the image file to the email, assign it a unique Content-ID header, and reference it in the message body using src="cid:YourID". Pipedrive documents this as a reliable technique for email templates sent from CRM and marketing platforms that support MIME attachments.

The image travels with the message, so it loads even when the recipient is offline. The trade-off is that the email file size increases by the full image size, and some email clients handle CID references inconsistently — especially mobile clients and webmail wrappers.

The Base64 Method

Base64 encoding converts the image file into a text string that you place directly inside a <img> tag’s src attribute: <img alt="My Image" src="data:image/jpeg;base64,...">. This keeps everything in one file with no external dependency.

The downside is file bloat. Base64 encoding adds roughly 33% to the image’s original size, and many email clients including Outlook desktop versions do not render data-URI images at all. Campaign Monitor notes this approach has limited support across mainstream email platforms and recommends it only for internal or test scenarios.

Embedding Images Directly in Gmail and Outlook

For everyday emails sent through Gmail or Outlook, the composer’s built-in insert tool is the easiest path and produces an inline image without any HTML work.

Gmail

Open Gmail and click Compose. Place the cursor in the message body where the image should appear, then click the Insert Photo icon (the camera icon near the bottom of the compose window). Choose Upload to select a file from your computer, or Web Address (URL) to insert an image hosted elsewhere. A Google support thread confirms this places the image in the body rather than attaching it.

The image appears inside the message body with sizing handles, not in the attachment line below the subject.

Outlook

Open a new message and place the cursor in the email body. Go to Insert > Pictures. Choose This Device for a local file, Stock Images for built-in graphics, or Online Pictures to search. After selecting the file, click Open. Resize the image by dragging the corner handles to maintain aspect ratio.

The image sits inline in the compose window, and recipients see it in the message body when they open the email.

Image Specs That Work Across Email Clients

Email clients vary widely in how they handle image dimensions, file sizes, and formats. A few documented guidelines keep your images from breaking layouts or failing to load.

Twilio recommends sticking with JPEG, PNG, and GIF — the three raster formats supported by every mainstream email platform. Unusual or proprietary image formats often fail to render or get stripped by security filters.

Flowium and Omnisend both cite a standard file-size ceiling of 100 KB per image for reliable deliverability and load speed. Signature images should stay under 150 pixels tall and 300 pixels wide. Broader email images commonly fit a 600 to 650 pixel width and 200 to 300 pixel height.

Drip recommends making the original image at least twice the final display size then scaling it down in the email’s HTML or template — this preserves sharpness on high-density mobile screens.

The text-to-image ratio matters for spam scores and readability. Drip cites a common benchmark of 80% text and 20% images, while Flowium notes 60:40 text-to-image as a neutral balance that reduces spam-flag risk.

Common Embedding Mistakes to Avoid

Sending an image-only email is the most frequent error. Twilio and Campaign Monitor both point out that when images are blocked — which is the default behavior in Outlook, Gmail’s mobile app, and many enterprise mail systems — an image-only message displays as a blank or broken block. Always put essential text in the email body itself.

Forgetting alt text is the second most common miss. Drip and Campaign Monitor recommend descriptive alt attributes on every <img> tag so the message remains usable when images are turned off. An empty alt="" is better than no attribute, but a meaningful description like “Invoice summary for March 2025” beats both.

Starting the email with an image hurts preview performance, according to Campaign Monitor. Email clients pull the first few lines of text for the snippet preview; if the first element is an image, the snippet field may show empty or grab a random fragment from later in the message.

Using non-public image URLs also causes failures. A linked image stored on a private server, local drive path, or password-protected folder will show a broken-icon placeholder for every recipient. Test every URL in an incognito or logged-out browser window before sending.

Choose the Right Method for Your Email

The best embedding method depends entirely on who is receiving the email and what tools you have access to:

• For a marketing or transactional email sent through a platform like Mailchimp or Campaign Monitor — use the hosted URL method with the platform’s image uploader and template editor. This produces the widest client compatibility and smallest message file size.
• For a one-off professional email from Gmail or Outlook — use the composer’s Insert Photo or Insert > Pictures button. It takes seconds and produces a reliable inline result without touching HTML.
• For a CRM-triggered email where the image must load even when offline — use the CID method inside a MIME-capable email system, and accept the larger message size that comes with it.
• For internal tests or email export files — Base64 can work, but only if you control the client environment and have verified it renders.

Whichever route you pick, include alt text, keep image files under 100 KB, and never place critical information inside a graphic alone. That combination ensures the message works whether images load or not.