Using Retina Images

What is Retina display?

When Apple released the iPhone 4 in 2010, it featured what Apple called a Retina display. This was one of the first high-DPI, or high dots per inch displays mass produced for consumers.

On device screens, DPI refers to the number of pixels a manufacturer can fit into an inch of screen. The higher the DPI, the more detailed and clear images and text on that screen appear. Apple refers to their high-DPI displays as Retina displays since, in theory, the DPI is so high that the human eye can no longer distinguish between individual pixels on the screen.

While Retina display is an Apple brand name, the term retina is often used to describe high-DPI displays from other manufacturers. Likewise, retina is commonly used to refer to images optimized for high-DPI displays. Other device manufacturers have adopted Retina display, and retina screens can now be found on tablets, laptops, and even desktop computers.

Non-Retina (left) and Retina display (right):

 

How to configure retina display in image-based elements

Image-based elements (LiveImage, LiveTimer, LiveFeed, LiveScrape, LiveForecast, LiveMap, LiveCalendar, LiveCoupon, LivePoll, LiveReveal, LiveSlides, and LiveTracker) can be configured for retina display. In order to do so, please follow these steps:

  1. Configure the element with double the size as its final display dimensions.
    For example, if you want to display the element at 200x200px, you must configure it to be 400x400px.

  2. In the embed code, add the final display width within a style attribute and a width attribute.
    For the example above, add the following:

Copy 
style="display:block;width:100%;max-width:200px;" width="200"

Example
The embed code below is for a LiveImage that is configured to be 400x200px in the platform:

Copy 
<!-- Start RealTime Email Embed - Patents Pending -->
<img src="https://em.realtime.email/service/rte?kind=liveimage&id=1657658692&esp_uid=%%SubID%%" style="display: block;" alt="Example Image"/>
<!-- End RealTime Email Embed - Patents Pending -->

This is the modified embed code:

Copy 
<!-- Start RealTime Email Embed - Patents Pending -->
<img src="https://em.realtime.email/service/rte?kind=liveimage&id=1657658692&esp_uid=%%SubID%%" style="display:block;width:100%;max-width:100px;" width="100" alt="Example Image"/>
<!-- End RealTime Email Embed - Patents Pending -->

The example above will render at 200x100px in the email template.

Please note that these guidelines only apply to elements that are NOT iOS Optimized.