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.
Delivra's email editor says images should be 800x800 pixels or less. Why is 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.
Related Articles
Creating email templates
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 ...
Background colors & background images
How to add background color to entire email Background color settings can be found in the Style tab of the email editor. Your options for background color include Standard Background and Extended Background. Each are explained below. Standard ...
How do I save button styles to my email template?
Button Styling in the Drag-and-Drop Editor When creating beautiful and consistent emails, small design details can have a big impact. One of those details is button styling. The Delivra drag-and-drop editor allows you to define custom button styles ...
Why are images flushing to one side on iPhones?
Fixing Image Alignment Issues on iPhone Email Previews If you've tested an email and noticed that images appear shifted to one side when viewed on an iPhone, you're not alone. This is a common display issue that’s often linked to image maps—even if ...
How do I use an image from Unsplash in my email design?
Using the Unsplash Image Library in Your Email Design Looking to add high-quality, professional images to your emails without leaving Delivra? Our direct integration with Unsplash makes it easy to access millions of free, high-resolution stock photos ...