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
Retina images in email:
Litmus: Understanding Retina Images in HTML Email
Email on Acid: Mobile Optimization: Retina Images in Email
Resolution of mobile screens:
Fluid Blog: Mobile design 101: pixels, points and resolutions
PaintCode: The Ultimate Guide To iPhone Resolutions
Comments
0 comments
Article is closed for comments.