Retina Email Images: How to Create Sharp 2x Images Without Large Files

What Retina and high-density email images mean

Retina email images are prepared with more image pixels than the space they occupy in an email layout. The additional visual information helps compatible high-density screens display sharper edges, cleaner typography and finer photographic detail.

Retina is Apple's product terminology, but the underlying concept is not limited to Apple devices. High-density screens are also found on Android phones, tablets, laptops and desktop monitors.

For email marketers, the aim is not to upload the largest available file. The aim is to provide enough detail for the intended display size without forcing subscribers to download unnecessarily heavy artwork.

Display dimensions versus actual image dimensions

The display dimensions describe the space an image should occupy inside an email. The actual image dimensions describe how many pixels are contained in the downloaded image file.

An email image can therefore be 1200px wide as a file but appear at 600px wide inside the campaign. This produces a 2x relationship between the actual pixel width and its intended display width.

Calculate both the width and height using the same multiplier. A 2x image doubles both dimensions, giving it four times as many pixels as its 1x equivalent. This does not automatically mean the encoded file will become four times larger.

Worked examples for 600px, 640px and 660px email layouts

Your email platform or template determines the practical starting width. Check the usable content area, because internal padding and column spacing can reduce the space available for the image.

For a broader explanation of newsletter banners, product grids and campaign file weights, read our complete Email Image Size Guide.

When to use 1x, 1.5x or 2x email images

The right email image pixel density depends on how important the image is, how much detail it contains and how many visual assets the campaign includes.

How to control high-resolution email image file size

A sharp email image should not require subscribers to download a full camera-resolution photograph. Start with the correct display dimensions, choose a sensible density and optimise the resulting file.

• Crop unnecessary background or unused visual areas before exporting.
• Match the image width to the actual email content block rather than the original source dimensions.
• Use JPG for most photographs, campaign imagery and detailed product scenes.
• Use PNG for logos, sharp graphics or artwork requiring transparency.
• Compare 1.5x and 2x outputs at the intended display size.
• Review the combined weight of all campaign images, not only the main banner.
• Avoid repeatedly resaving already compressed JPG files.

For many full-width promotional images, approximately 100KB to 300KB can be a practical starting range. A detailed photograph may require more, while simple artwork may need considerably less. Preserve acceptable visual quality instead of forcing every image to meet an arbitrary number.

Outlook considerations and explicit HTML image widths

Different Outlook applications can interpret email HTML differently. An image intended to display at 600px wide should have a clear width in the email markup, even when its source file is actually 1200px wide.

<img src="https://example.com/email-hero-1200.jpg"
     width="600"
     alt="New season collection available now"
     style="display:block;width:100%;max-width:600px;height:auto;border:0;">

In this example, the image file contains 1200px of horizontal detail, but the intended rendered width is 600px. The explicit width helps establish the layout, while responsive styling supports narrower viewing environments.

• Set the HTML width to the intended display width, not the 2x source width.
• Preserve the original proportions to avoid distorted images.
• Use meaningful alt text because external images can be blocked.
• Keep important campaign information available outside the image wherever practical.
• Test the Outlook desktop, web and mobile versions that matter to your audience.

Mobile rendering considerations for high-density screens

Modern mobile screens often have a higher pixel density than the layout width suggests. A 375px-wide email content area may therefore benefit from an image containing 750px of actual horizontal detail.

A responsive desktop image can scale down inside a mobile layout, but embedded text and small design details may become difficult to read. Consider a mobile-specific crop when your email platform supports it, or choose artwork that remains clear at narrower widths.

Advanced responsive image techniques do not behave consistently across every email application. Start with reliable dimensions, an explicit display width and testing across the inboxes used by your subscribers.

Common mistakes when preparing Retina images for email

• Confusing file dimensions with display dimensions: a 1200px-wide file should still be displayed at 600px when it is intended as a 2x asset.
• Increasing DPI without adding pixels: changing DPI or PPI metadata alone does not create a sharper digital image.
• Using the original camera image: an image that is several thousand pixels wide is usually unnecessary for a 600px email layout.
• Making every image 2x: secondary graphics may not justify the additional data.
• Saving photographs as PNG: detailed photographs frequently become much larger when exported as PNG instead of JPG.
• Resizing an already blurry image: enlargement does not recover detail that was absent from the original.
• Forgetting an explicit HTML width: some email clients may display the source image at the wrong size.
• Ignoring accessibility: useful alt text remains important when images are blocked or unavailable.

Frequently asked questions about Retina email images