Email Image Optimization: Formats, Retina, and File Budgets

Choosing the Right Image Format

Unlike the modern web where you can rely on <picture> elements and format negotiation, email gives you a handful of universally supported formats. Choosing the right one for each use case makes a significant difference in file size and rendering quality.

JPEG

Best for photographs and images with complex color gradients. JPEG uses lossy compression, so you can dial quality down to 70-80% and still get visually sharp results at a fraction of the file size. Use JPEG for hero images, product photography, and any image with continuous tones.

PNG

Best for logos, icons, illustrations, and any image that requires transparency. PNG uses lossless compression, which means sharper edges on text and line art but larger file sizes than JPEG for photographic content. PNG-8 (256 colors) is excellent for simple graphics; PNG-24 is necessary when you need full alpha transparency.

GIF

The only universally supported animated format in email. Use GIF for simple animations — loading indicators, product demos, attention-grabbing effects. Keep animations short (under 3 seconds of loop) and frame counts low. GIF is limited to 256 colors per frame, so it produces large files for complex animations. Outlook on Windows does not play GIF animations — it displays only the first frame, so make sure your first frame communicates the message on its own.

WebP and AVIF

While WebP is gaining traction on the web, email client support is inconsistent. Apple Mail and some mobile clients support it, but Outlook and many webmail clients do not. AVIF has even less support. For now, stick with JPEG, PNG, and GIF in production emails. The file size savings from WebP and AVIF are not worth the rendering failures.

Retina and High-DPI Images

Most modern devices — iPhones, MacBooks, high-end Android phones — have screens with 2x or 3x pixel density. An image that looks sharp on a standard display will appear blurry on a retina screen if it's served at 1x resolution.

The standard approach for retina-ready images in email is straightforward: serve an image that's twice the display dimensions and constrain it with the width HTML attribute.

<!-- Image is 1200x600 pixels, displayed at 600x300 -->
<img
  src="https://yourdomain.com/images/hero-1200x600.jpg"
  width="600"
  alt="Summer collection featuring our new outdoor furniture line"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

Key details:

• The width HTML attribute (not just CSS width) is critical because Outlook uses it for sizing.
• max-width: 100% ensures the image scales down on narrow screens.
• height: auto maintains the aspect ratio when the width changes.
• display: block removes the gap that appears below images in some clients due to inline rendering.
• border: 0 removes the blue border that some older clients add to linked images.

For 3x displays, you could serve 3x images, but the file size trade-off is rarely worth it. 2x images on a 3x screen still look significantly better than 1x and keep file sizes manageable.

Alt Text Best Practices

Many subscribers have images blocked by default — Outlook desktop, many corporate mail servers, and some mobile clients. When images are blocked, your alt text is the only thing the subscriber sees. Good alt text isn't just an accessibility requirement; it's a design element.

Writing Effective Alt Text

• Be descriptive, not generic. Instead of alt="banner", write alt="30% off all running shoes this weekend". The alt text should convey the message the image was supposed to deliver.
• Keep it concise. Aim for under 100 characters. Long alt text gets truncated in many clients.
• Skip alt for decorative images. Spacers, dividers, and purely decorative elements should have alt="" (empty, not missing) so screen readers skip them.

Styling Alt Text

Most email clients that display alt text will respect basic font styling on the <img> element. You can make alt text look intentional rather than broken:

<img
  src="https://yourdomain.com/images/promo-banner.jpg"
  width="600"
  alt="Summer Sale: 30% off everything"
  style="display: block; max-width: 100%; height: auto; font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; color: #1a1a1a; background-color: #f0f0f0; padding: 20px; text-align: center;"
>

When images are blocked, the subscriber sees styled text with a background color instead of a broken image icon. This technique is especially important for hero images and CTAs that rely heavily on imagery.

Background Images with VML Fallback

CSS background images work in most modern email clients but fail in Outlook on Windows. The solution is VML (Vector Markup Language), which Outlook's Word-based engine supports:

<td background="https://yourdomain.com/images/bg-texture.jpg"
    bgcolor="#2d3748"
    width="600" height="300"
    style="background-image: url('https://yourdomain.com/images/bg-texture.jpg'); background-size: cover; background-position: center;">

  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
    fill="true" stroke="false"
    style="width:600px; height:300px;">
    <v:fill type="tile"
      src="https://yourdomain.com/images/bg-texture.jpg"
      color="#2d3748" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->

  <div style="padding: 40px; font-family: Arial, sans-serif; color: #ffffff;">
    <h2 style="margin: 0; font-size: 28px;">Your Text Over the Background</h2>
  </div>

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

</td>

The bgcolor attribute provides a solid color fallback if the image doesn't load. Modern clients use the CSS background-image. Outlook uses the VML v:rect with a fill. Tools like backgrounds.cm can generate this code automatically.

File Size Budgets

Email load times matter more than web page load times because subscribers are less patient — they'll skip your email in a split second. Large images also increase the chance of clipping in Gmail (which clips emails over 102KB of HTML).

Here are practical file size guidelines:

• Individual images: Keep each image under 100KB. Hero images can push to 150KB if needed, but smaller is always better.
• Total email size: Aim to keep the entire email — HTML plus all images — under 800KB. Under 500KB is ideal.
• HTML weight: Keep the raw HTML under 100KB to avoid Gmail clipping. Under 80KB is safer with room for tracking pixels and ESP-injected code.
• Animated GIFs: Under 500KB for the GIF file. If your animation requires more, consider linking to a video instead.

Compression Tools

Always compress images before including them in email. Effective tools include TinyPNG (for PNG and JPEG), ImageOptim (macOS desktop app), Squoosh (Google's browser-based tool), and Sharp (Node.js library for build pipelines). Most of these can reduce file sizes by 40-70% with no visible quality loss.

Designing for the Image-Blocked View

Before you sign off on any email design, turn images off and evaluate what remains. Ask yourself:

• Is the core message still clear from text and alt text alone?
• Are CTAs (calls to action) coded as HTML buttons rather than image-based buttons?
• Does the layout still make sense without images providing visual structure?
• Is there enough text content that the email doesn't appear empty?

Emails that degrade gracefully with images off perform significantly better in corporate environments where image blocking is the default. It's also a strong accessibility practice — screen readers rely on text content, not images, to convey your message.