Email marketing remains one of the highest-ROI marketing channels, but images in email require special consideration. Email clients have inconsistent support for modern formats, unique rendering behaviors, and strict file size limits. This guide covers best practices for optimizing images in email campaigns.

Why Email Images Are Different

Email is not the web. Images in email face unique constraints:

Email client limitations: Different email clients (Gmail, Outlook, Apple Mail, etc.) have varying support for modern image formats, CSS properties, and rendering behaviors. What works in one client may break in another.

Images often blocked by default: Many email clients block images by default until the user clicks "Display Images" or adds the sender to contacts. This means your email must work without images.

File size matters for deliverability: Large email files can trigger spam filters or be clipped by email services (Gmail clips emails over 102KB). Keeping total email size small improves deliverability.

No JavaScript: You cannot rely on JavaScript for lazy loading, responsive images, or other modern techniques. Email requires HTML and inline CSS only.

Limited format support: WebP and AVIF are not universally supported in email clients. JPEG and PNG remain the safe choices.

Image Format Selection for Email

Choose image formats based on email client support:

JPEG: Safest choice for photographs and complex images. Supported by all email clients. Use JPEG for hero images, product photos, and lifestyle shots.

PNG: Use for logos, icons, and any images requiring transparency. Supported by all email clients. PNG-8 can reduce file size for simple graphics.

GIF: For simple animations. Supported by most clients, though some (like Outlook) may only show the first frame. Keep animations small and simple.

WebP/AVIF: Avoid in email. Support is inconsistent—some clients may not display them at all, leaving your recipients with broken images.

When in doubt, stick with JPEG and PNG for email. The file size trade-off is acceptable given the importance of universal display.

File Size Optimization for Email

Email file size directly impacts deliverability and user experience:

Target total email size under 100KB: Gmail clips emails over 102KB. Keeping your email under this threshold ensures full content displays. This includes all content—text, HTML, and images combined.

Optimize each image aggressively: With small total size budgets, each image must be lean. Compress images to the smallest acceptable size without visible quality loss.

Limit image count: Each image adds to total size. Use images strategically where they add value. Avoid decorative images that could be replaced with CSS or removed entirely.

Use image dimensions intentionally: Resize images to exactly the dimensions they'll display at. Serving oversized images wastes the size budget.

Tools: Our Image Compressor can help you achieve optimal file sizes while maintaining quality.

Responsive Images in Email

Emails are viewed on devices from small phones to large desktop monitors. Responsive images in email require a different approach than on the web:

Use max-width:100% and height:auto: This CSS ensures images scale down on smaller screens while maintaining aspect ratio.

<img src="image.jpg" style="max-width:100%; height:auto;" width="600" height="400">

Set width attribute: In addition to CSS, set the HTML width attribute. This provides a fallback for email clients that don't support CSS.

Retina/high-DPI screens: For crisp display on high-DPI screens, use images at 2× the display size. If an image displays at 300px wide, serve a 600px-wide image. Use the width attribute to constrain display size.

No srcset in email: The srcset attribute is not reliably supported. Serve a single image that works across devices—typically 2× the largest display size.

Responsive tables: Email layouts are built with tables, not CSS grid or flexbox. Ensure your table structure supports responsive scaling with percentage-based widths.

Image Implementation Best Practices

Follow these implementation guidelines for email images:

Always include width and height attributes: This reserves space before images load, preventing layout shifts when images are displayed. Also helps with image-blocking scenarios where space is needed for the "Display Images" prompt.

Use absolute URLs: Email clients need absolute URLs (https://yoursite.com/image.jpg), not relative paths (images/image.jpg).

Host images on reliable CDN: Ensure your image hosting is fast and reliable. Slow-loading images frustrate recipients and may cause some clients to timeout.

Provide alt text: Alt text is critical for email. Since images are often blocked by default, alt text is the only visual indication of what's missing. Make alt text descriptive and useful.

Consider background images carefully: Background image support varies widely across email clients. If you must use them, use inline CSS with fallback background colors, and don't rely on background images for critical information.

Working with Image-Blocked Emails

Many recipients will see your email with images blocked. Design for this scenario:

Test with images off: View your email with images disabled. Does the message make sense? Is there enough context?

Use alt text effectively: Alt text should describe what's missing and encourage enabling images. For a product image: "New Summer Collection - Click to view images" or descriptive text that conveys the message.

Place important content in text: Don't put critical information (prices, call-to-action text) only in images. Use actual text for key content.

Consider image-plus-text layouts: Many successful emails use a combination of text and images. The text provides context even if images are blocked.

Provide plain text version: Always include a plain text version of your email alongside HTML. Some clients may use this, and it's good practice for deliverability.

Outlook-Specific Considerations

Outlook (particularly desktop versions) has unique image handling quirks:

Use VML for background images: Outlook uses Vector Markup Language (VML) for background images. If you need background images, you'll need VML code in addition to standard CSS.

Image formats: Outlook desktop (Windows) supports JPEG, PNG, and GIF. WebP is not supported.

Image dimensions: Outlook may render images differently. Test thoroughly.

Conditional comments: You can use Microsoft-specific conditional comments to target Outlook with specific code if needed.

Testing Email Images

Email must be tested across clients. Image display varies significantly:

Test on major clients: At minimum, test on Gmail (web and mobile), Outlook (desktop and mobile), Apple Mail, and Yahoo Mail. Each has different rendering engines and image handling.

Test with images on and off: Verify both scenarios.

Check file size: Ensure total email size stays under Gmail's 102KB clipping threshold. Use tools to measure final email size.

Check image loading speed: Slow images cause recipients to abandon. Ensure images load quickly.

Use email testing tools: Services like Litmus or Email on Acid can preview your email across dozens of clients and devices.

Image Compression Workflow for Email

Build a workflow for email image optimization:

  1. Start with high-quality source images (product photos, logos, etc.)
  2. Resize to exact display dimensions (consider 2× for retina)
  3. Compress images aggressively using our Image Compressor
  4. Save as JPEG or PNG (avoid WebP/AVIF for email)
  5. Upload to reliable CDN and obtain absolute URLs
  6. Implement in email HTML with width/height attributes and alt text
  7. Test total email size and client compatibility

Common Email Image Mistakes

Avoid these pitfalls:

  • Using modern formats (WebP, AVIF): Not supported in many email clients
  • Missing width/height attributes: Causes layout shifts when images load
  • Poor alt text (or missing): Leaves image-blocked emails empty
  • Oversized images: Wastes size budget, may trigger clipping
  • Relative image paths: Won't resolve in email clients
  • Reliance on CSS background images: Not supported everywhere
  • No plain text version: May harm deliverability

Tools to Help

Our tools can assist with email image optimization:

All tools run locally in your browser—perfect for handling product images or marketing assets securely.

Conclusion: Email Requires a Different Approach

Email image optimization differs from web optimization. Universal compatibility, file size limits, and image-blocking behaviors mean you need to be more conservative with formats and more aggressive with compression. Build a workflow that prioritizes JPEG/PNG, strict size management, and thorough testing. With the right approach, your email images will load quickly, display correctly, and drive engagement without triggering deliverability issues.