# Email Image Optimization: The Complete Guide

> Images in email: which formats clients support, size limits, retina handling, and the fallbacks that keep a campaign readable everywhere.

Canonical page: https://www.imageguide.dev/guides/email-image-optimization/

Published: 2026-01-19. Updated: 2026-10-17.

Publisher: ImageGuide, published by Sirv. [Editorial method](https://www.imageguide.dev/about/#how-we-write).

## Quick answer

For email, use JPEG for photographs and PNG for graphics that need transparency or crisp edges. Set an explicit display width, compress the source, and keep essential text and actions in HTML. Test your actual email clients because image blocking, responsive behavior, and modern format support vary.

Reference for this answer: [MDN image format reference](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types).

## Email vs. Web: Key Differences

| Factor | Web | Email |
|--------|-----|-------|
| Modern formats | WebP, AVIF | JPEG, PNG, GIF only |
| Lazy loading | Supported | Not supported |
| srcset/sizes | Supported | Limited support |
| Max file size | Few MB OK | Under 100KB ideal |
| CSS support | Full | Limited |
| Image blocking | Rare | Common (40%+ block by default) |

## Format Selection for Email

### Use JPEG For

- Photographs
- Complex images with gradients
- Hero images
- Product photos

```html
<img src="hero-image.jpg" alt="Summer collection now available" width="600">
```

### Use PNG For

- Logos and branding
- Images requiring transparency
- Text-heavy graphics
- Icons and buttons

```html
<img src="company-logo.png" alt="Acme Corp" width="200">
```

### Use GIF For

- Simple animations
- Animated CTAs
- Cinemagraphs (use sparingly)

```html
<img src="animated-cta.gif" alt="Click to shop now" width="300">
```

### Never Use

- WebP (Gmail only, poor fallback)
- AVIF (no email client support)
- SVG (security blocked)
- BMP/TIFF (unnecessary size)

## Size Guidelines

### File Size Limits

| Email Component | Max File Size | Ideal Size |
|----------------|---------------|------------|
| Hero image | 100 KB | 50-80 KB |
| Product image | 50 KB | 20-40 KB |
| Logo | 20 KB | 5-15 KB |
| Icon | 10 KB | 2-5 KB |
| GIF animation | 200 KB | Under 100 KB |
| **Total email** | 1 MB | Under 500 KB |

### Dimension Guidelines

| Image Type | Desktop Width | Mobile Width |
|------------|--------------|--------------|
| Full-width hero | 600px | 320px |
| Two-column | 280px | 280px |
| Three-column | 180px | 280px |
| Logo | 200px max | 150px max |

## Retina/HiDPI Support

### The 2x Technique

Export images at 2x dimensions, display at 1x:

```html
<!-- 1200px image displayed at 600px for retina -->
<img
  src="hero-1200.jpg"
  alt="Summer sale"
  width="600"
  height="400"
  style="display: block; max-width: 100%;"
>
```

### File Size Trade-off

| Approach | Visual Quality | File Size |
|----------|---------------|-----------|
| 1x only | OK on retina | Smallest |
| 1.5x | Good on retina | +50% |
| 2x | Sharp on retina | +100-150% |

**Recommendation**: Use 1.5x for most images, 2x only for logos and important graphics.

## Email Client Compatibility

### Support Matrix

| Client | JPEG | PNG | GIF | Background Images |
|--------|------|-----|-----|-------------------|
| Gmail | ✓ | ✓ | ✓ | ✓ |
| Apple Mail | ✓ | ✓ | ✓ | ✓ |
| Outlook 365 | ✓ | ✓ | ✓ | ✓ |
| Outlook Desktop | ✓ | ✓ | Static | ✗ |
| Yahoo | ✓ | ✓ | ✓ | ✓ |
| Samsung Mail | ✓ | ✓ | ✓ | ✓ |

### Outlook Desktop Workarounds

Outlook uses Word's rendering engine. For background images:

```html
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="tile" src="background.jpg" color="#ffffff"/>
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url('background.jpg'); background-size: cover; width: 600px; height: 400px;">
  <!-- Content here -->
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
```

## Image Blocking Strategy

### Design for Image-Off

40%+ of email recipients have images blocked by default. Design emails that work without images:

```html
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: #3b82f6; padding: 40px; text-align: center;">
      <!-- Image with solid background fallback -->
      <img
        src="sale-banner.jpg"
        alt="SUMMER SALE - 50% OFF EVERYTHING"
        width="560"
        style="display: block; border: 0;"
      >
    </td>
  </tr>
</table>
```

### Alt Text Best Practices

```html
<!-- Bad: No context -->
<img src="banner.jpg" alt="Banner">

<!-- Good: Full message -->
<img src="banner.jpg" alt="Summer Sale: 50% off all outdoor furniture - Shop Now">
```

### Styled Alt Text

Some clients support styled alt text:

```html
<img
  src="logo.png"
  alt="ACME CORP"
  width="200"
  height="50"
  style="font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333333;"
>
```

## Responsive Email Images

### Fluid Images

```html
<img
  src="hero.jpg"
  alt="New arrivals"
  width="600"
  style="display: block; width: 100%; max-width: 600px; height: auto;"
>
```

### Mobile Optimization

```html
<style>
  @media screen and (max-width: 480px) {
    .hero-image {
      width: 100% !important;
      height: auto !important;
    }

    .hide-mobile {
      display: none !important;
    }
  }
</style>

<img
  src="hero.jpg"
  alt="Summer collection"
  width="600"
  class="hero-image"
  style="display: block; max-width: 100%; height: auto;"
>
```

### Art Direction (Desktop vs Mobile)

```html
<!-- Desktop image (hidden on mobile) -->
<table class="hide-mobile" role="presentation">
  <tr>
    <td>
      <img src="hero-desktop.jpg" alt="Shop summer styles" width="600">
    </td>
  </tr>
</table>

<!-- Mobile image (hidden on desktop) -->
<!--[if !mso]><!-->
<div class="show-mobile" style="display: none; max-height: 0; overflow: hidden;">
  <img src="hero-mobile.jpg" alt="Shop summer styles" width="320">
</div>
<!--<![endif]-->

<style>
  @media screen and (max-width: 480px) {
    .hide-mobile { display: none !important; }
    .show-mobile {
      display: block !important;
      max-height: none !important;
    }
  }
</style>
```

## Optimization Techniques

### JPEG Optimization for Email

```bash
# Using jpegoptim
jpegoptim --max=70 --strip-all hero.jpg

# Using ImageMagick
magick hero.jpg -quality 70 -strip -sampling-factor 4:2:0 hero-optimized.jpg
```

Quality guidelines for email:
- Hero images: 60-70%
- Product photos: 70-80%
- Small thumbnails: 60-65%

### PNG Optimization

```bash
# Lossy compression for significant savings
pngquant --quality=65-80 logo.png -o logo-optimized.png

# Lossless optimization
optipng -o5 logo-optimized.png
```

### GIF Optimization

```bash
# Reduce colors and optimize
gifsicle -O3 --colors 64 animation.gif -o animation-optimized.gif
```

GIF size reduction strategies:
- Reduce colors (256 → 64 or 32)
- Reduce frame rate
- Crop to essential area
- Shorten duration

## Using Image CDNs for Email

[Sirv](https://my.sirv.com/#/signup) provides email-friendly image delivery:

```html
<!-- Sirv optimizes on-the-fly -->
<img
  src="https://your-account.sirv.com/email/hero.jpg?w=600&q=70"
  alt="Summer sale"
  width="600"
>

<!-- Retina version -->
<img
  src="https://your-account.sirv.com/email/hero.jpg?w=1200&q=60"
  alt="Summer sale"
  width="600"
>
```

Benefits:
- Automatic compression
- On-demand resizing
- Global CDN delivery
- Analytics and tracking

## Testing Checklist

### Pre-Send Testing

- [ ] All images under size limits
- [ ] Alt text is descriptive
- [ ] Images work with blocking enabled
- [ ] Retina images not too large
- [ ] GIFs play correctly
- [ ] Background images have fallbacks
- [ ] Mobile rendering is correct

### Test in These Clients

1. Gmail (web and mobile)
2. Apple Mail (macOS and iOS)
3. Outlook (365 and desktop)
4. Yahoo Mail
5. Samsung Mail

### Tools

- **Litmus** - Multi-client preview
- **Email on Acid** - Rendering tests
- **Mail Tester** - Spam score including image issues

## Common Mistakes

### 1. Images Too Large

```html
<!-- Bad: 2MB hero image -->
<img src="hero-huge.jpg" width="600">

<!-- Good: Optimized -->
<img src="hero-optimized.jpg" width="600"> <!-- 60KB -->
```

### 2. Missing Dimensions

```html
<!-- Bad: No dimensions = layout shift -->
<img src="product.jpg" alt="Product">

<!-- Good: Explicit dimensions -->
<img src="product.jpg" alt="Blue widget" width="280" height="280">
```

### 3. Relying on Images for Content

Don't put critical information only in images—always have text alternatives.

### 4. Using Unsupported Formats

```html
<!-- Bad: WebP not universally supported -->
<img src="hero.webp" alt="Sale">

<!-- Good: JPEG with optimization -->
<img src="hero.jpg" alt="Summer Sale - 50% Off">
```

## Conclusion

Email image optimization requires:

1. **JPEG/PNG/GIF only** - No modern formats
2. **Aggressive compression** - Under 100KB per image
3. **Retina support** - 1.5-2x export with 1x display
4. **Alt text strategy** - Design for image-off viewing
5. **Client testing** - Especially Outlook desktop

Use CDNs like [Sirv](https://my.sirv.com/#/signup) to simplify optimization and ensure fast delivery across all email clients.

## Sources

- [Can I email](https://www.caniemail.com/)