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

    • Create an email template

      Email templates are design layouts that you customize and save for reuse. The purpose of email templates is to save you time in the campaign building process because you begin with a design that has many of your common elements pre-built. Our ...

    • Email designer 101

      Delivra offers a modernized email editor that frees you from fussing with email design and makes it ultra-easy to personalize messages for maximum engagement. General Layout On the left of your page you will find layout elements that can be added ...

    • 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 ...

    • Create an email template that is left aligned, like a personal email

      By default, drag-and-drop editor stock and custom templates are center aligned for mobile responsiveness. However, it is possible to create a left-aligned look by stretching the width of the entire email template file. How-To 1. Open your email ...

    • How do I copy a section of my email design?

      There may be times when you need to add one more story to your email newsletter, but you ran out of pre-built sections in the layout. You do not have to build a new section from scratch, instead you can use the Duplicate Row function. How-To Open the ...