Home > Articles > Tutorials > How to Prepare Images for Email Marketing: Complete Guide (2025)
Tutorials

How to Prepare Images for Email Marketing: Complete Guide (2025)

Master email image optimization with this complete guide. Learn format selection, file size limits, dimensions, testing strategies, and avoid common mistakes that break email campaigns.

  • 15 min read
  • Updated:
  • By Convert a Document
In this guide:

Master email image optimization with this complete guide. Learn format selection, file size limits, dimensions, testing strategies, and avoid common mistakes that break email campaigns.

Why Email Images Are Different (And More Difficult)

Email isn't like the web. Email clients are notoriously inconsistent, have limited format support, and handle images unpredictably. Here's what makes email images uniquely challenging:

The Email Image Reality Check

  • Images are blocked by default - Many clients require users to "click to display images"
  • Format support is limited - Forget WebP, AVIF, or even animated GIFs in some clients
  • File size matters more - Large images affect deliverability and can trigger spam filters
  • Responsive behavior varies - What's responsive on web may not be in email
  • Rendering is inconsistent - Same image looks different in Gmail vs Outlook vs Apple Mail
  • Loading affects the entire email - Slow images = slow email experience

The Email Image Preparation Workflow

Follow this step-by-step process for every image in your email campaigns:

6-Step Email Image Workflow

  1. Select the right format (JPG or PNG only)
  2. Size your images correctly (dimensions for email)
  3. Optimize file size (target under 100 KB per image)
  4. Add proper HTML attributes (width, height, alt text)
  5. Test across email clients (Gmail, Outlook, Apple Mail, etc.)
  6. Monitor deliverability (check if images affect spam scores)

Step 1: Choose the Right Format

Email clients have terrible format support compared to web browsers. You have essentially two choices that work universally.

JPG: Your Primary Choice

Use JPG for:

  • Product photos - Best compression for photos
  • Hero images - Large promotional banners
  • Lifestyle imagery - Photography with people, environments
  • Complex graphics - Images with gradients and many colors

Quality settings: 80-85% is the sweet spot for email. Higher quality = larger files with minimal visual benefit.

Why lower quality is okay: Email viewing conditions are different from web. Smaller email preview panes mean compression artifacts are less visible.

PNG: Use Sparingly

Use PNG only for:

  • Logos and branding - Sharp edges must stay crisp
  • Text-heavy graphics - Screenshots, infographics with readable text
  • Simple graphics - Icons, badges, buttons with few colors
  • Transparency requirements - Though email backgrounds are usually solid anyway

Warning: PNG files are much larger than JPG for photos. A 400 KB PNG photo might be 60 KB as JPG - that matters for email deliverability.

Formats to AVOID in Email

❌ Do NOT Use:

  • WebP - Not supported in most email clients (Gmail strips it, Outlook doesn't display it)
  • AVIF - Zero email client support
  • SVG - Blocked for security reasons in virtually all email clients
  • Animated GIF - Works in some clients but not Outlook (first frame shows only), often very large files
  • BMP - Unnecessarily large, poor compatibility
  • TIFF - Not supported in email

Quick Format Conversion for Email

If you have images in other formats, convert them before adding to email:

Step 2: Size Your Images Correctly

Email image dimensions are different from web images. Here's what actually works:

The Email Width Constraint: 600-650px Maximum

Most email clients display emails at 600-650px wide on desktop. Going wider causes horizontal scrolling or image cropping.

Standard Email Image Dimensions

Image Type Recommended Width Typical Height Notes
Header/Logo 200-400px 60-100px Keep it compact, recognizable
Hero Image (full-width) 600px 300-400px Matches email width exactly
Product Image (single) 400-600px 400-600px Square or portrait works well
Product Grid (2 columns) 280-300px each 280-400px Leaves space for 20px gutter
Product Grid (3 columns) 180-200px each 180-250px Mobile users may struggle
Social Icons 32-48px each 32-48px Small, simple, recognizable
Button/CTA Image 200-300px 40-60px Better to use HTML button when possible

Mobile Considerations

60-70% of emails are opened on mobile devices. Your images must work on small screens:

Mobile Email Image Best Practices:

  • Design at 600px wide - Scales down nicely to 320-414px mobile screens
  • Important content in center - Edges may be cropped on narrow screens
  • Text in images readable at 50% - Test if text is legible when scaled to mobile
  • Avoid tiny details - What's visible at 600px may disappear at 320px
  • Test on actual devices - Emulators don't always show true rendering

Retina/High-DPI Displays

Many modern devices have high-resolution "retina" displays (2x or 3x pixel density). Should you create larger images?

The Retina Dilemma in Email:

The approach: Create images at 2x size, display at 1x using HTML width/height attributes

Example: For a 300px wide image, create it at 600px, then use <img src="image.jpg" width="300">

The trade-off:

  • ✅ Looks sharp on retina displays
  • ❌ File size doubles or triples
  • ❌ Slower loading, especially on mobile data
  • ❌ Can hurt deliverability with spam filters

Recommendation for email: Use 1x images and prioritize file size. Email viewing conditions make retina less critical than on web.

Step 3: Optimize File Size Aggressively

This is where most email campaigns fail. Large image files cause major problems:

  • Spam filter triggers - Emails over 100-150 KB total size are more likely flagged
  • Slow loading - Users abandon emails that take >3 seconds to load
  • Mobile data costs - Recipients on limited data plans may block images
  • Gmail clipping - Emails over 102 KB get clipped with "[Message clipped]"

The Email File Size Budget

Target File Sizes:

  • Total email size: Under 100 KB (including HTML and all images)
  • Single large image (hero): 40-60 KB maximum
  • Product photos: 20-40 KB each
  • Small images (logos, icons): 5-15 KB each
  • Absolute maximum per image: 100 KB (only if it's the only image)

Rule of thumb: If your email has 5 images, aim for 15-20 KB each to stay under 100 KB total.

How to Achieve Small File Sizes

For JPG Images:

  1. Start with correct dimensions - Don't resize later; create at target size
  2. Use 80-85% quality - Sweet spot for email (vs. 90-95% for web)
  3. Remove metadata - Strip EXIF data, color profiles, thumbnails
  4. Use progressive encoding - Loads faster, appears to load faster
  5. Optimize with tools - Use ImageOptim, TinyJPG, or our converter's optimization

Example workflow:

  • Original photo: 1920x1080px, 485 KB
  • Resize to: 600x338px
  • Save as JPG: 85% quality → 68 KB
  • Further optimize: 80% quality → 48 KB ✅ Perfect for email

For PNG Images:

  1. Use PNG only when necessary - JPG is 5-10x smaller for photos
  2. Reduce colors if possible - PNG-8 (256 colors) vs PNG-24 (millions of colors)
  3. Optimize with tools - TinyPNG, OptiPNG, or our optimization guide
  4. Consider converting to JPG - If image doesn't need transparency, convert to JPG

File Size Reality Check

Image ❌ Too Large ⚠️ Acceptable ✅ Ideal
Hero banner (600px) >150 KB 60-100 KB 40-60 KB
Product photo >100 KB 40-70 KB 20-40 KB
Logo (PNG) >50 KB 15-30 KB 5-15 KB
Icon >20 KB 5-10 KB 2-5 KB

Step 4: Implement Proper HTML for Email Images

HTML for email is stuck in the past—think 2000s-era web development. Modern CSS and HTML5 features often don't work. Here's what does:

The Essential Email Image HTML

<img src="https://yoursite.com/images/product.jpg"
     alt="Blue denim jacket on model"
     width="600"
     height="400"
     style="display: block; border: 0; outline: none;">

Breaking Down Each Attribute:

  • src="https://..." - MUST be absolute URL (no relative paths like "/images/photo.jpg")
  • alt="..." - Critical: describes image when images are blocked (and for accessibility)
  • width="600" - Explicit width in pixels (required for Outlook, helps layout before images load)
  • height="400" - Explicit height in pixels (maintains space, prevents layout shift)
  • display: block - Removes unwanted spacing below images in some clients
  • border: 0 - Removes default border in older Outlook versions
  • outline: none - Removes focus outline when linked

Writing Effective Alt Text

Alt text is critical in email because many recipients have images blocked by default. Your alt text appears in place of the image.

Alt Text Best Practices:

  • Describe the image's purpose - Not just what's in it, but why it matters
  • Keep it concise - 125 characters or less (screen readers cut off longer text)
  • Include branding when relevant - "Nike Air Max 270 in white/blue"
  • For CTAs: include the action - "Shop Now button for 30% off sale"
  • Avoid redundancy - Don't say "image of" or "picture of"

Alt Text Examples:

Image Type ❌ Bad Alt Text ✅ Good Alt Text
Product photo "product" "Classic leather wallet in cognac brown"
Hero banner "banner image" "Summer sale: 40% off all outdoor furniture"
Logo "logo" "Acme Company" (company name)
CTA button "button" "Shop the collection"
Decorative "image123.jpg" "" (empty alt for purely decorative images)

Making Images Responsive in Email

Responsive email images require different techniques than web: 

<!-- For images that should scale on mobile: -->
<img src="banner.jpg"
     alt="Summer Sale Banner"
     width="600"
     height="300"
     style="max-width: 100%; height: auto; display: block;">

How it works:

  • width="600" - Sets the maximum width and reserves space
  • max-width: 100% - Allows scaling down on smaller screens
  • height: auto - Maintains aspect ratio when scaled

Result: Image displays at 600px on desktop, scales down proportionally on mobile without distortion.

Linking Images Correctly

Most email images are clickable. Here's the proper way to link them: 

<a href="https://yoursite.com/product-page"
   target="_blank"
   style="text-decoration: none; color: #000000;">
  <img src="https://yoursite.com/images/product.jpg"
       alt="Shop the Premium Leather Bag"
       width="400"
       height="400"
       style="display: block; border: 0;">
</a>

Important Linking Details:

  • Use absolute URLs - Both for href and image src
  • target="_blank" - Opens in new tab (standard for email links)
  • Remove link underline - text-decoration: none on the link
  • Track with UTM parameters - Add ?utm_source=email&utm_campaign=newsletter to measure performance

Step 5: Test Across Email Clients

Email client rendering is wildly inconsistent. An image that looks perfect in Gmail might be broken in Outlook. Testing isn't optional.

The Major Email Clients to Test

Email Client Market Share Known Issues
Gmail (Web) ~35% Strips some CSS, blocks WebP, may resize large images
Apple Mail (iPhone) ~30% Generally good support, auto-scales images
Outlook (Desktop) ~10% Uses Word rendering engine, poor CSS support, no animated GIFs
Outlook.com ~5% Different from desktop Outlook, better support
Yahoo Mail ~3% Strips background images, decent image support
Apple Mail (Desktop) ~7% Best standards support, renders almost like browser
Android Gmail ~5% Similar to web Gmail but with mobile viewport

Testing Methods

1. Free Testing (Manual)

  • Send to yourself - Create test accounts on Gmail, Outlook, Yahoo, iCloud
  • Check on mobile - Forward to iPhone and Android devices
  • Ask colleagues - Different email clients across your team
  • Test with images disabled - Many users browse this way; alt text must work

2. Paid Testing Services

  • Litmus - Screenshots of 90+ email clients, spam testing
  • Email on Acid - Similar to Litmus, includes accessibility checks
  • Mailchimp Inbox Preview - Built into Mailchimp (limited clients)

What to Check During Testing

Email Image Testing Checklist:

  • Images display correctly (not broken/missing)
  • Images load at reasonable speed (under 3 seconds)
  • Aspect ratios are maintained (no stretching/squishing)
  • Images align properly (centered, left-aligned as intended)
  • Spacing around images is correct (no weird gaps)
  • Alt text displays when images are blocked
  • Linked images are clickable (correct URLs)
  • Images scale appropriately on mobile
  • Text in images is readable on mobile
  • Total email loads quickly (check file sizes)
  • No horizontal scrolling required
  • Images don't trigger spam filters (test spam score)

Step 6: Monitor Deliverability and Performance

After sending, track how your images perform:

Key Metrics to Monitor

  • Deliverability rate - Are emails reaching inboxes? (Large images = higher spam risk)
  • Open rate - Slow-loading images may reduce opens (people abandon before it loads)
  • Click-through rate on images - Are linked images getting clicks?
  • Image display rate - How many recipients enable images?
  • Mobile vs desktop performance - Are mobile users engaging less? (May indicate image issues)

Common Email Image Mistakes (And How to Fix Them)

Mistake 1: Using Web-Optimized Images in Email

The problem: WebP images, large retina PNGs, or SVGs that work great on your website fail in email.

The fix:

  • Convert WebP to JPG/PNG before adding to email template
  • Create email-specific versions at lower quality/smaller dimensions
  • Maintain separate image libraries: "web" and "email"

Mistake 2: Forgetting to Set Width and Height Attributes

The problem: Without explicit dimensions, email layout jumps around as images load (or doesn't reserve space at all).

The fix: Always include width and height attributes on every image tag:

<img src="photo.jpg" width="600" height="400" alt="Description">

Mistake 3: Exceeding the 100 KB Total Email Size

The problem: Gmail clips messages over 102 KB with "[Message clipped] View entire message" link. Plus spam filters penalize large emails.

The fix:

  • Check total email size before sending (HTML + all images)
  • Aggressively optimize image file sizes (aim for 15-30 KB per image)
  • Use fewer images or reduce dimensions
  • Consider hosting images on CDN and loading on demand (advanced)

Mistake 4: Using Relative Image Paths

The problem: <img src="/images/photo.jpg"> works on your site but breaks in email (no base URL to resolve from).

The fix: Always use complete absolute URLs:

<img src="https://www.yoursite.com/images/photo.jpg">

Mistake 5: Putting Critical Information Only in Images

The problem: If images are blocked (default in many clients), users see nothing.

The fix:

  • Never put important info ONLY in images (offer details, pricing, CTAs)
  • Use HTML text for critical content, images for enhancement
  • Write comprehensive alt text that conveys the message even without the image
  • Test with images disabled to ensure email still makes sense

Mistake 6: Not Testing on Outlook

The problem: Outlook (especially desktop versions) renders email using Microsoft Word's engine. It breaks things that work everywhere else.

The fix:

  • Always test on Outlook before sending (or use Litmus/Email on Acid)
  • Use table-based layouts for complex designs (Outlook doesn't support flexbox/grid)
  • Avoid background images (Outlook often doesn't display them)
  • Keep it simple—what works in Outlook works everywhere

Mistake 7: Ignoring Alt Text

The problem: Blank spaces where images should be, no context for screen reader users, poor accessibility.

The fix:

  • Write descriptive alt text for every image
  • Make alt text standalone—it should make sense without seeing the image
  • For decorative images, use empty alt text: alt=""

Email Image Preparation Checklist

Use this checklist before sending any email campaign:

Pre-Send Image Checklist:

  • All images are JPG or PNG (no WebP, SVG, AVIF)
  • Image widths don't exceed 600px
  • Each image is under 100 KB (ideally 20-60 KB)
  • Total email size is under 100 KB
  • All images have width and height attributes
  • All images have descriptive alt text
  • All image URLs are absolute (https://...)
  • Images are responsive (max-width: 100%; height: auto)
  • Linked images have proper href attributes
  • Images tested on Gmail, Outlook, and Apple Mail
  • Images tested with images disabled (alt text works)
  • Mobile rendering tested on actual devices
  • Spam score checked (SpamAssassin, Mail Tester)
  • Important information also in HTML text (not just images)

Real-World Examples: Email Image Workflows

Example 1: Product Launch Email

Scenario: Launching new product line with 6 product photos + hero banner

Image preparation:

  1. Hero banner:
    • Original: 1920x800px PNG, 850 KB
    • Resize to: 600x250px
    • Convert to: JPG at 80% quality → 42 KB ✅
  2. Product photos (6 images):
    • Original: 2000x2000px each, 480 KB average
    • Resize to: 280x280px (2-column grid)
    • Save as: JPG at 82% quality → 28 KB each = 168 KB total
  3. Logo:
    • Original: PNG 400x120px, 45 KB
    • Optimize: Reduce to PNG-8 → 12 KB ✅

Result: Total image weight = 42 + 168 + 12 = 222 KB (all images)

Issue: Exceeds 100 KB budget

Adjustment:

  • Reduce hero to 75% quality → 35 KB
  • Reduce products to 78% quality → 22 KB each = 132 KB total
  • Keep logo at 12 KB
  • New total: 35 + 132 + 12 = 179 KB (still high but manageable)
  • Alternative: Show 4 products instead of 6 → Total drops to 123 KB

Example 2: Newsletter with Lifestyle Photo

Scenario: Weekly newsletter with one hero image + social icons

Image preparation:

  1. Hero lifestyle photo:
    • Original: 3000x2000px, 2.4 MB
    • Resize to: 600x400px
    • Save as: JPG at 83% quality → 52 KB ✅
  2. Social icons (4 icons):
    • Original: 512x512px PNG each, 35 KB each
    • Resize to: 40x40px
    • Optimize: PNG-8 → 3 KB each = 12 KB total ✅

Total: 52 + 12 = 64 KB (perfect for email!) ✅

Advanced Tips for Email Image Optimization

1. Implement Image Lazy Loading Fallbacks

While lazy loading doesn't work consistently in email, you can design for it:

  • Put most important images at top of email (load first)
  • Use solid color backgrounds that show before images load
  • Style alt text to be visible and attractive when images are off

2. Use Background Colors as Loading Placeholders

<td style="background-color: #f0f0f0;">
  <img src="product.jpg" alt="Product" width="300" height="300"
       style="display: block;">
</td>

The background color shows while image loads (or if it doesn't load), preventing blank white space.

3. Track Image Engagement

Use UTM parameters on image links to track which images drive clicks: 

<a href="https://site.com/product?utm_source=email&utm_medium=image&utm_campaign=summer-sale&utm_content=hero-image">
  <img src="hero.jpg" alt="Shop Summer Sale">
</a>

4. Consider Text Overlays in Email Design Tools

Instead of burning text into images (which increases file size and hurts accessibility), use HTML text overlays:

  • Background image (optimized, low quality acceptable)
  • HTML text layer on top (loads even if images are blocked)
  • Better for accessibility (screen readers can read text)
  • Smaller file sizes (text doesn't add to image weight)

Tools and Resources

Image Conversion and Optimization

Email Testing Tools

  • Litmus - Comprehensive email testing (paid)
  • Email on Acid - Testing + spam score checking (paid)
  • Mail Tester - Free spam score testing
  • PutsMail - Free tool to send test emails

File Size Checkers

  • Gmail Size Checker - Paste HTML to check if it will be clipped
  • Email File Size Calculator - Calculate total email weight
  • Image Compression Tools - TinyJPG, ImageOptim, Squoosh

Conclusion: Email Images Done Right

Preparing images for email is more restrictive than web, but following these guidelines ensures your campaigns look great everywhere:

The Essential Principles:

  1. Stick to JPG and PNG - Email clients don't support modern formats
  2. Keep it under 600px wide - Standard email width constraint
  3. Optimize aggressively - Target 20-60 KB per image, under 100 KB total
  4. Always use absolute URLs - Relative paths break in email
  5. Write descriptive alt text - Many users won't see your images
  6. Set width and height - Required for proper layout
  7. Test across clients - What works in Gmail may break in Outlook
  8. Monitor deliverability - Large images can trigger spam filters

Email may be more limited than the web, but with proper preparation, your images will load quickly, display consistently, and drive engagement across all email clients and devices.

Ready to Optimize Your Email Images?

Start preparing email-ready images with our free converters:

Related Articles:

Key Takeaways

  • Compress images first for the largest size savings.
  • Pick formats and settings based on where the file will be used.
  • Validate quality after compression before sharing.

Related Articles

Browse all articles

Explore every guide and format on Convert a Document.

Explore converters

Find the right converter for your file type.

Ready to convert?

Use Convert a Document to convert, compress, and optimize files fast.

Explore converters Browse more articles
About Convert a Document

Convert a Document helps you understand, convert, and optimize files with simple tools and clear guidance for everyday workflows.