Email Adaptation for Retina Displays: How It Works and What to Consider

High-pixel-density screens such as Retina displays impose their own requirements on the quality of visuals. This also applies to email design: illustrations, banners, and icons must look sharp across different display types.

In this article, we examine how pixel density affects the rendering of visual elements in email campaigns, what is required for proper image adaptation, and which details deserve particular attention.

What Retina Displays Are and What Is Special About Them

The term Retina was introduced by Apple Inc. in 2010 and originally used only for devices developed by the company. Over time, though, the term went beyond the company’s products and informally came to denote any screen with a high DPR (Device Pixel Ratio).

DPR indicates how many physical screen pixels are used to display one CSS pixel:

• On a screen with DPR = 1, one CSS pixel corresponds to one physical pixel.
  
  
• On devices with DPR = 2, one CSS pixel corresponds to two physical pixels horizontally and two vertically (four pixels in total).
  
  
• On displays with DPR = 3, one CSS pixel corresponds to a total of nine physical pixels.

For example, let’s take a raster image with a resolution of 450 × 300 px. In an email layout, it’s also displayed at 450 × 300 CSS pixels. However, on a screen with DPR = 2, that same image occupies 900 × 600 physical pixels and may appear visually blurred as a result.

Fonts usually do not have such issues. Font glyphs are typically defined by vector outlines and are converted into pixels during rendering with the screen density taken into account. As a result, text remains visually sharp even on displays with high pixel density.

Why This Matters for Email Campaigns

In email campaigns, readers usually pay attention to the visuals first. Because of this, graphic elements play a role that is just as significant as responsive layout and correct rendering in different email clients.

Branding elements often include thin lines, small typography, or complex graphic details. When such elements are displayed on screens with DPR = 2 or higher, scaling defects become especially noticeable.

For example, this is what an image looks like when it’s not adapted for high-pixel-density screens. Artifacts become noticeable even with slight zooming.

For comparison, below is an adapted image that maintains detail quality when scaled.

This applies not only to branding elements but also to other graphic components in an email. If they appear blurred or noticeably pixelated, the campaign gives the impression of being poorly prepared.

How to Adapt Images for High DPR

An effective way to adapt visuals in emails is to prepare illustrations at a higher resolution and then reduce their display size in the HTML code. This means that the image file contains more pixels in width and height than the size at which it appears in the email.

For example, if the displayed size of a logo is 150 × 62 px, the graphic file is prepared at 300 × 124 px. In the code, the display size must be fixed using the width and height attributes so that the email client renders the image within the intended dimensions:

1
<img src="logo2x.png" width="150" height="62" alt="Company logo" style="display:block; border:0;">

In this case, the logo still occupies 150 × 62 CSS pixels, but since the file was prepared at a larger size, the image maintains visual quality on screens with DPR = 2.

In most cases, increasing the image dimensions by a factor of two relative to its actual display size is sufficient. This ratio covers the majority of common scenarios on modern smartphones, laptops, and tablets. Increasing the image dimensions three times is theoretically possible, though it’s used less often in email campaigns because file size increases as well.

What to Consider When Adapting Images for Emails

Choosing the Right Format

When selecting illustration formats for email campaigns, two criteria are particularly important: support across email clients and predictable rendering. Most often, raster formats are used in email campaigns, including:

• PNG — images with lossless compression in which sharp edges and small details are mostly preserved. PNG is supported by the vast majority of email clients, including mobile versions, and is a suitable option for logos, icons, interface elements, and illustrations with transparent backgrounds.
  
  
• JPEG — here, the file size is reduced through partial loss of image data. The format is suitable for photos and complex illustrations with many colors, though transparent backgrounds are not supported.
  
  
• GIF — used mainly for simple animations such as small animated banners or short interface demonstrations. The format supports a limited palette of up to 256 colors, which makes it unsuitable for complex graphics.

In web development, SVG images are also widely used. Because the format is vector-based, image sharpness remains intact when scaling. However, SVG isn’t the best option for email campaigns due to its low support: major email clients, including Gmail, do not work properly with SVG illustrations.

Balancing Email Size

Increasing image dimensions inevitably affects the total size of the email. The more graphic elements a campaign contains, the larger their combined volume becomes, which influences loading time.

Image optimization services such as TinyPNG reduce file size through efficient compression and removal of unnecessary metadata that does not affect visual rendering. Processing of this kind is particularly relevant for large banners, background illustrations, and other heavy images.

Text Inside Images

Sometimes text becomes an integral part of an image. In banners, for example, it can emphasize an offer, highlight a promotion, or draw attention to certain details. In these cases, the visual emphasis becomes stronger and the email appears more expressive.

Problems arise when the main body text of the email is placed inside images:

• If the visual element is prepared without considering high-DPR displays, text inside may appear blurred.
  
  
• Such text does not adapt as flexibly as regular text in the email. Image scaling often makes it difficult or impossible to read.
  
  
• Issues may also occur with dark mode. Text inside an image retains its original color while the background and other elements may be inverted, which sometimes results in dark text on a dark background.

Main information, headings, and text blocks should be added to the email as regular HTML text. It renders correctly on different displays and in different email clients, and remains accessible even when image loading is turned off.

Conclusion

High-DPR displays have already become standard, and email design must take this into account. Careful preparation of graphic elements keeps emails visually consistent and maintains high rendering quality across various types of devices.

And if you wish to convert your designs into responsive email templates, try the Figma plugin by Pixcraft. It not only exports ready-to-use email markup but also automatically adapts images for high-pixel-density displays.