How do I save my images for retina displays (high-resolution mobile screens) in my email?

How do I save my images for retina displays (high-resolution mobile screens) in my email?

Modern mobile devices have retina (or high-density, or high-resolution) displays. A retina screen displays up to 3x the amount of pixels per point, which means the images would have to be up to 3x as large as the display size.

 

How do I save retina images for my email?
For images to display as sharply as possible on a retina screen, the image would need to be saved to 3x the size that the image is displayed. We have no way of knowing what contacts will open the email on what size of phone or what type of retina display. The best bet is to save the image at the largest display size of the most popular phone in the market.

Looking at PaintCode's ultimate guide to iPhone resolutions, the widest screen size is 414 points (displayed pixels) wide, with a 3x retina display.

 

 

To ensure that almost anyone viewing your email on a mobile device sees crisp images, we would then need to save any image that displays on full width on mobile at 1242 pixels wide. Note that that would be the image width of every image that would stack to full width on a mobile screen.

 

Any images displayed smaller than full width on mobile would just need to be saved to 3x their display size. If, for example, you have an icon image that is set to display at 50x50 pixels in size, that image would just need to be saved at 150x150px for best display on mobile. (You could save all images at 1242 pixels in size, but this would mean unnecessarily large images that would take longer to download and use up more of their data plan).

 

Why aren't we designing for Android phones?
You can! The range of Android phone screen sizes is just much more diverse, and so we're jumping for the easy target with Apple. Looking at DeviceAtlas' Most Used Smartphone Screen Resolutions report for the USA, 1440x2560 also has a good chunk of the market share at 10.99%. We presume this is mostly/entirely Android phones. At this point, you're probably sacrificing valuable data size of images for perfectionism in rendering everywhere.

 

So wait a sec. The Drag-and-Drop editor says images should be 800x800 pixels or less. What's up with that?

This is our middle-ground, sweet spot we recommend for the average Drag-and-Drop user creating emails in Delivra. at 800px per image, the image is likely to render decently enough on retina screens without requiring a ridiculous file size.

 

Suggested further reading

    • Related Articles

    • Best practices for email design

      In this article you'll find best practices and recommendations for your email design. If you're having trouble with email design rendering, please email Support. Email Size File size should be 75 KB or less. Delivra will not prevent you from ...

    • Email Inbox Previews | Delivra Air

      All marketers are challenged with creating a consistent experience for subscribers despite them interacting with email multiple times a day on multiple devices. That's why we teamed up with Litmus to give you easy access to rendering previews across ...

    • How do I use an image from Unsplash in my email design?

      Unsplash is a website dedicated to hosting stock photography. Unsplash claims over 265,000 contributing photographers and offers over 3 million high-resolution photos. Delivra has integrated Unsplash's image library directly into our drag-and-drop ...

    • Changing the Email Addresses for Contacts

      Delivra uses the email address as the primary identifier of your contacts. This means that importing a new email address will cause a new contact to be created, but what if you need to update an existing contact (or multiple contacts) with a new ...

    • What do the red circles with slashes mean in the Email Rendering credit section?

      In the Preview step of the create a campaign or email template workflow, you will see a section titled "How It Renders". This feature allows you to see previews of your email design in selected email clients. Once previews are ready, the thumbnail ...