Email Image Best Practices: 6 Rules That Affect Inbox Placement

Images don't just affect how your email looks—they affect whether it lands in the inbox at all.

Gmail, Outlook, and Yahoo scan image patterns before analyzing content. Too many images, tracking pixels, or a high image-to-text ratio trigger spam filters before your SPF/DKIM records are even checked.

If your password reset email is 90% logo and button image, it's getting filtered. Not because it's spam—because it looks like spam.

The 6 rules that affect inbox placement

These aren't "design tips"—they're deliverability patterns that spam filters use to rank emails.

1) Keep image-to-text ratio below 40%

Spam filters penalize emails that are mostly images. Phishing attacks hide text in images to bypass content filters.

Safe pattern: 60% text, 40% images (by file size and visual weight).

A logo (5-10KB), one hero image (30-50KB), and a button background image are fine. Three full-width banners + image-heavy footer = spam folder.

Good: Logo + text + button (text-based)
Risky: Logo + 3 hero images + image footer with social icons
Spam: Single image screenshot with all text burned in

2) Use alt text on every image (even decorative ones)

Missing alt text is a red flag. Spam emails skip alt text because they don't care about accessibility or image blocking.

What to do:

Functional images (buttons, CTAs): describe action (e.g., alt="Reset password")
Logos: use company name (alt="Acme Inc.")
Hero/decorative: brief description or leave empty but include the attribute (alt="")

Gmail, Outlook, and Apple Mail block images by default for many users. Alt text ensures your email still makes sense when images don't load.

email-template.tsx

<Img
  src="https://cdn.example.com/logo.png"
  alt="Acme Inc."
  width={120}
  height={40}
/>

<Img
  src="https://cdn.example.com/hero.jpg"
  alt="Dashboard preview showing analytics"
  width={600}
  height={300}
/>

3) Host images on a reputable domain (not free CDNs)

Spam filters check image URLs. If your images are hosted on sketchy free CDNs, public S3 buckets with random names, or domains with poor sender reputation, you're getting filtered.

Safe patterns:

Your own domain: cdn.yourcompany.com
Branded subdomain on trusted CDN: assets.yourcompany.imgix.net
ESP-hosted images (Resend, SendGrid): https://resend.com/...

Risky patterns:

Generic S3 bucket: https://s3.amazonaws.com/random-bucket-42/...
Free image hosts: imgur.com, tinypic.com
IP addresses instead of domains

If your password reset email pulls images from http://192.168... or a free CDN, you're training spam filters to distrust your sending domain.

4) Avoid 1x1 tracking pixels (or use them sparingly)

Spam filters know what tracking pixels look like. A 1x1 transparent image with a unique URL is a giveaway.

What this looks like:

tracking-pixel.html

<img src="https://track.example.com/open/abc123" width="1" height="1" alt="" />

The problem: Spammers use tracking pixels to validate email addresses. If your email has 3+ tracking pixels, you're grouped with bulk senders.

Safer alternatives:

Use ESP webhooks: Resend, SendGrid, and Postmark track opens server-side without visible pixels
Track clicks instead: more reliable and less spammy than open tracking
If you must use a pixel: use one, not five; host it on your domain; include proper alt text

For transactional emails (password reset, verification), skip open tracking entirely. You don't need it, and it hurts deliverability.

5) Optimize file sizes (aim for under 100KB total)

Large images slow load times and increase the chance of being clipped by Gmail (which truncates emails over 102KB).

File size targets:

Logo: 5-15KB (PNG or SVG inline)
Hero/product image: 30-60KB (optimized JPEG or WebP)
Button backgrounds: use CSS, not images (0KB)
Total email HTML + images: under 100KB (ideally 40-60KB)

How to optimize:

Use tinypng.com or squoosh.app for compression
Serve images at 2x resolution max (600px wide for email, 1200px file)
Use progressive JPEGs for hero images
Inline small SVG logos instead of hosting separately

Gmail clips emails over 102KB and hides a "View entire message" link. Users rarely click it—your CTA gets buried.

6) Use HTTPS for all image URLs (not HTTP)

Mixed content warnings tank trust. If your email is sent over TLS but images load over HTTP, browsers and email clients flag it.

What spam filters see:

http://cdn.example.com/logo.png → risky
https://cdn.example.com/logo.png → safe

Easy fix: audit your templates and update all image URLs to HTTPS. If your CDN doesn't support HTTPS, switch CDNs.

Pre-send image checklist

Before sending any transactional email, verify:

✅ Image-to-text ratio is below 40% (by visual weight and file size)
✅ Every image has alt text (even decorative ones)
✅ All images are hosted on your domain or a trusted CDN (no free hosts)
✅ No more than one tracking pixel (or zero for transactional emails)
✅ Total email size is under 100KB (including images)
✅ All image URLs use HTTPS (not HTTP)

Test your email in Mail Tester to catch image-related spam flags before production.

Common mistakes that hurt deliverability

Mistake 1: Image-only emails

Some teams design emails in Figma, export as one big image, and send it. This is the fastest way to land in spam.

Why it's bad:

No text for spam filters to analyze (phishing pattern)
Invisible when images are blocked (most email clients)
No accessibility for screen readers
High file size (usually 200-400KB)

Fix: Use HTML + CSS for layout. Images should supplement text, not replace it.

Mistake 2: Hotlinking images from other sites

Pulling images directly from third-party sites (e.g., src="https://somewebsite.com/images/product.jpg") is a spam flag.

Why it's bad:

You don't control the domain's sender reputation
The image might be removed or changed
Spam filters see this as untrusted external content

Fix: Download and host images on your own CDN.

Mistake 3: Using generic stock photos in transactional emails

Stock photos in password resets or verification emails scream "phishing."

Pattern to avoid:

Generic smiling person in a password reset email
Office photo in an invoice receipt
Abstract shapes in an email verification flow

Better approach:

Logo only (no hero image)
Product screenshot (if relevant)
Simple icon or illustration (brand-specific)

Transactional emails should feel functional, not promotional. Skip the hero image unless it adds clear value.

How to test image deliverability

Before deploying image changes, test across email clients to catch rendering issues and spam flags.

1) Use Mail Tester for spam score

Send your email to the unique address provided by Mail Tester. It checks:

Image-to-text ratio
Missing alt text
HTTP vs HTTPS image URLs
Tracking pixel patterns

Target: 9/10 or higher. Anything below 7/10 is likely hitting spam.

2) Test with images blocked

Gmail, Outlook, and Apple Mail block images by default for many users. Send yourself a test and view it with images disabled.

What to check:

Does the email still make sense?
Is the CTA still visible and clear?
Does alt text convey the right context?

How to test:

Gmail: Right-click → "Display images below"
Outlook: File → Options → Trust Center → "Don't download pictures automatically"
Apple Mail: Preferences → "Load remote content in messages" (uncheck)

3) Check file size and load time

Use browser DevTools to measure total email size:

terminal

# Send yourself the email
# Open in Gmail web client
# Open DevTools (F12) → Network tab
# Reload email
# Check total transfer size at bottom

Target: < 100KB total

If you're over 100KB, Gmail will clip your email and hide the rest behind a "View entire message" link.

Production tips

Use CSS for buttons instead of images

Button images (PNGs with text) are unnecessary. Use <a> tags with CSS styling.

button-component.tsx

import { Button } from "@react-email/components";

<Button
  href="https://app.example.com/reset-password?token=xyz"
  style={{
    backgroundColor: "#007bff",
    color: "#ffffff",
    padding: "12px 24px",
    borderRadius: "6px",
    textDecoration: "none",
    fontWeight: 600,
  }}
>
  Reset Password
</Button>

Benefits:

Works when images are blocked
Zero file size overhead
Better accessibility (screen readers can read the text)
No HTTP/HTTPS concerns

Inline small logos as SVG (when possible)

For simple logos, inline SVG reduces HTTP requests and file size. It also works when external images are blocked.

inline-logo.tsx

<svg
  width="120"
  height="40"
  viewBox="0 0 120 40"
  xmlns="http://www.w3.org/2000/svg"
>
  <text x="10" y="30" fill="#333" fontSize="24" fontWeight="600">
    Acme
  </text>
</svg>

When to use:

Logo is simple (text-based or minimal shapes)
SVG file size is under 5KB
You need guaranteed rendering (no external image dependencies)

When to skip:

Logo is complex (lots of gradients, effects)
You need to change it frequently (external hosting is easier)

Use lazy loading for large hero images

If you need a hero image (product screenshot, onboarding visual), use lazy loading to prioritize text rendering.

hero-image.tsx

<Img
  src="https://cdn.example.com/hero.jpg"
  alt="Dashboard preview"
  width={600}
  height={300}
  loading="lazy"
/>

This ensures the email text and CTA load first, even if the image is slow.

The bottom line

Images are a deliverability signal—not just a design choice. Follow these six rules:

Keep image-to-text ratio below 40%
Use alt text on every image
Host images on a reputable domain
Avoid or minimize tracking pixels
Optimize file sizes (under 100KB total)
Use HTTPS for all image URLs

If your password resets or verification emails are landing in spam, images are likely part of the problem. Audit them first.