Optimizing Images for Email: Complete Guide

Why Image Optimization Matters in Email

Email is one of the most unforgiving environments for images. Unlike a browser, where a large image might only slow down a page, in email a heavy or unsupported image can break layouts, trigger spam filters, or simply never display, leaving your subscribers staring at a grid of broken image icons.

The core constraints are threefold: file size (affecting load speed on mobile and load time before engagement drops), format support (which varies wildly across clients), and rendering behavior (CSS, backgrounds, and animations work very differently from client to client).

Marketers who optimize their email images consistently see higher click-through rates, lower bounce rates in ISP deliverability scoring, and faster rendering times on slow mobile connections, all of which compound over thousands of sends.

Email Client Compatibility: What Each Client Supports

Before choosing a format or technique, you need to know which email clients your audience uses. The table below covers the four dominant clients, which together represent roughly 85% of email opens worldwide.

File Size Targets and the 600 px Maximum Width

The universally accepted maximum width for email templates is 600 px. This width renders cleanly across desktop clients and scales down gracefully on mobile without triggering horizontal scroll. Any image wider than 600 px risks breaking layouts in Outlook, which does not apply max-width: 100% automatically.

Beyond layout, file size is your primary performance lever. Below are the recommended maximum sizes per image type:

JPEG vs PNG for Email

JPEG is the right choice for photographic content, hero banners, product photos, lifestyle images, and any image with gradients or complex color transitions. At quality 75–80 in most encoders, JPEG produces files small enough to meet the 100 KB target while maintaining excellent visual fidelity at 600 px screen width.

PNG should be reserved for images that require a transparent background (logos, overlaid text treatments, icons with soft edges) or images that are predominantly flat color with hard edges (screenshots, UI mockups, charts). PNG is lossless, which means files are predictably larger, a 300 × 300 product photo in PNG can easily exceed 150 KB.

A common mistake is using PNG for photographs "because it's higher quality." At the sizes used in email, JPEG quality 80 is visually indistinguishable from PNG for photos, and the file size difference can be 5× to 10×.

Do not use WebP as your primary email image format. While Apple Mail and Gmail support it, Outlook and Yahoo do not, and there is no reliable way to serve a fallback WebP vs JPEG per email client the way you can with the HTML <picture> element in a browser.

Animated GIFs and the First-Frame Fallback Rule

Animated GIFs remain the only broadly supported animation format in email. CSS animations and video (even MP4) are not reliably supported across clients. However, Outlook 2007–2021 on Windows does not animate GIFs, it displays only the first frame.

This is known as the first-frame fallback rule, and it has a direct design implication: your first frame must be self-sufficient. If your animated GIF reveals a discount code on frame 3, Outlook users will never see it. Design your first frame to contain all the key information, the headline, the offer, the call to action, and treat subsequent frames as an enhancement for clients that support animation.

To keep animated GIFs under 200 KB: limit to 3–5 frames, reduce colors to 64 or 128 (from the 256 maximum), constrain dimensions to 600 × 200 px or smaller, and use a dithering setting of 50% or less. Tools like ezgif.com and imgpact's optimizer can strip metadata and optimize frame palettes automatically.

Outlook VML Workaround for Background Images

Outlook (Windows desktop versions) ignores CSS background-image properties entirely. If your template design depends on a background image behind text, a common pattern for hero sections, Outlook users will see only the fallback background color, stripping out the visual impact of the design.

The standard solution is Microsoft's Vector Markup Language (VML), a legacy XML-based syntax that Outlook's rendering engine (which uses Word's layout engine, not a browser engine) does understand. The pattern wraps a VML v:rect element with a fill attribute around your content, inside Outlook conditional comments:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
  style="width:600px;height:200px;">
  <v:fill type="frame" src="https://example.com/hero.jpg" color="#1a1a2e"/>
  <v:textbox inset="0,0,0,0">
<![endif]-->
  <!-- Your content visible to all other clients -->
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->

The color attribute on v:fill acts as the fallback if the image fails to load. Always set it to a color that keeps your text readable.

Alt Text and the Pre-Send Checklist

Alt text is not optional in email. Corporate email environments often block images by default, meaning a significant percentage of your B2B audience may read your email seeing only alt text labels. Write descriptive, action-oriented alt text for every image, especially CTAs: alt="Shop Summer Sale, 40% off" is far more useful than alt="image1.jpg".

Use this checklist before every send:

• All images hosted on a reliable CDN (not email attachments)
• No image wider than 600 px
• Hero images ≤ 100 KB, total email image weight ≤ 600 KB
• JPEG used for photos, PNG only for logos/icons with transparency
• No WebP images (use JPEG/PNG for broadest compatibility)
• Animated GIF first frame contains all critical content
• Alt text filled in for every <img> tag
• Outlook VML fallback in place for any background images
• Tested in Apple Mail, Gmail (web), Outlook 2019, and Gmail app on Android
• Total HTML source size under 100 KB (to avoid Gmail clipping)