Why do images in my emails sometimes look blurry on smartphones? What’s the best size for an image in an email? How do I know if my images are ready for high-DPI displays, like the iPhone’s Retina display?
These are the questions that more and more marketers are having to answer when it comes to optimizing images for mobile emails, as the percentage of messages opened on a mobile device is often higher than 50% (as shown in this monthly report by Litmus), and therefore image rendering on smartphones becomes a key concern.
We’ll be covering each of those questions in this workshop. We’ll try to provide you with a few, easy to remember best practices that you can use when optimizing your images for future email campaigns!
Mobile devices and shifting image sizes
Things are trickier than they used to be for email marketers.
Responsive email design introduced the idea that the way an email is rendered changes depending on the device where it’s opened. That’s all good… but what happens to your images? Their display size may change as a result. And that’s where the problems begin.
Things get particularly tricky if your email newsletters or transactional messages use a multi-column layout. Some of the examples covered in our 5 Email Newsletter Templates to Always Have blog post, for instance, use a multi-column structure.
Take this sample, three-column layout from one of the templates:
The images are pretty small in this “desktop” view. If you were to size them based on this view, you might make them rather small… and that might get you into unexpected trouble 🙂
See, the message will likely render differently on mobile devices, your images will scale & shift, and they may become blurry, especially on smartphones that use a high-definition display.
How the message will be rendered depends on the responsiveness of your email, based on media queries or other techniques you’ve employed, or the email design tool you’ve used. On top of that, your newsletter may render differently in different email clients such as Gmail or Outlook.
For instance, here is how the message above renders on a mobile device (here we are using the Mobile preview in the BEE editor):
All messages built with BEE are fully responsive (even on the Gmail app for Android), and therefore the 3-column layout turns into a single column view with the image on top, followed by the title, text and the call to action button below. As you can see, the same image is now rendered at a width that’s almost twice as big.
How can you make sure that images will look OK when this happens?
Let’s look at some very hands-on best practices!
To start off, our layout will be based on a 2-column structure. As you can see, I’ve drag-and-dropped an image block on the left side and two text blocks and a call-to-action button on the right side:
We also need an image to optimize for this workshop. Let’s take this image of an Apple notebook from Pexels, a free photo stock gallery, which is now integrated in the BEE editor. The original image that we downloaded is 1280 x 850 pixels and 331 KB in size.
Best practice #1: Don’t use a small thumbnail, think bigger!
We don’t recommend using thumbnail-sized images – for example with a width of 180px (or alike) – even if the original “container” where you place them looks small.
Because the automatic switch from the 2-column structure that we selected for our message to the 1-column structure that will be used on mobile devices will result in our images scaling up to fit the width of the device’s screen. If the mobile device is 375px in width (e.g. iPhone 6), this means that our 180px-wide thumbnail will be stretched to over twice its original size.
Images for Retina displays explained
If the mobile device uses a high-definition screen, like the iPhone’s Retina display, it’s as if our image where stretched even bigger. The iPhone 6, for example, renders at 750px, so you can think of your image being stretched to twice its width… again!
The result is an image that looks blurry and low quality on mobile. Something like this…
Why does this happen? As Jason Rodriguez from Litmus explains it best in Understanding Retina Images in HTML Email:
If you’re not accounting for high-DPI displays, you run the risk of looking careless to subscribers. Because of the way high-DPI displays work, non-optimized images end up looking blurry and pixelated on retina screens. Roughly speaking, high-DPI displays have twice as many pixels per inch than their traditional counterparts. Therefore, if we want our images to look good on those screens, they need to be twice as large so that, when they’re scaled down in the email, there are more pixels for retina screens to display.
Practically speaking, that means that you will typically want images to be twice as large as the width of an iPhone screen. If you take the iPhone 6 as a reference, you are typically safe if you set your images to a width of 750px. If many of your readers open your messages on even larger screens, you may need to go even wider.
Let’s see how our optimized image looks after these changes:
Best practice #2: Compress your image files
So you need images with larger-than-normal dimensions to ensure they display well. What happens to the total size of the message? Will that create a problem when your newsletter subscribers try to view your emails?
First, there’s often a bit of a misconception about image file size and the total size of your email. Let’s clarify things a bit.
Images are downloaded by the email client (such as Gmail, Yahoo! Mail, AOL, etc.) when the reader opens your message. The file size of the images contained in the email doesn’t have any impact on the total size of your HTML code. That means that the email will be received just as fast regardless of the images that it contains.
However, the file size does play a role when the images are downloaded. So it impacts the total time it takes for the content of the email to fully render once it’s opened. On a mobile device, when the reader might have a slow Internet connection speed, the time lag could be substantial.
What can you do? Compress your images.
You can do so directly in your photo editing software, or by using one of the many free tools out there.
One tool we use often is TinyPNG. It uses smart, lossy compression techniques to reduce the file size of your PNG and JPEG files. The result is that your optimized images will use less bandwidth and load faster, especially on mobile.
Let’s put this into practice and see how to optimize our image file size by compressing.
The original image in the example above was 1280 x 850 pixels and 331 KB. Our objective is to get to a file that is 750px in width, and as small as possible, without losing quality.
- The first step is to resize the original image to 750 x 498px. Use your favorite image editing tool to do so. We ended up with a file size of 150.9KB.
- Now upload it to TinyPNG (or alike): the compression service will do its magic and shrink the file to a small size. In our case, 36% smaller.
Our optimized image is now a manageable 96.4 KB, less than one third of the original file size of 331 KB, and large enough (750px) to render well even on smartphones with high-definition screens.
Best practice #3: Let your images adjust to width
As many of you know, the BEE editor allows you to build emails that are fully responsive even in the Gmail App for Android, without needing any HTML or CSS coding knowledge. You simply drag-and-drop elements and customize your email with the many granular settings.
One of these settings is “Adjust to width,” which some of you have asked about.
“Adjust to width” is a life-saver when it comes to responsive email and image rendering. It allows you to not to have to worry about the image adjusting its width depending on where it is displayed. In our example above, the image will automatically show as a small thumbnail in the three-column layout, and become larger when the message switches to a one-column structure.
If you follow our best practice #1, this setting is automatically applied because your image will by definition be bigger than the image slot.
This feature comes in handy in the opposite scenario: if you upload an image that’s smaller than its container, and you don’t want it to scale up when the message is displayed in a one-column layout, you can turn this feature off. The problem is that visually, the result is not as nice. For example, here is the same message used above, with a smaller thumbnail (100px wide) and Adjust to Width turned off.
It looks much better when the image fills up the single-column layout. So rather than using small images and asking the editor not to let them adjust to width, we recommend using larger images, optimized as described above, and letting BEE do its magic!
Hopefully, we’ve covered a few points on how to optimize images in email for high-DPI, Retina mobile displays that you found useful. Now you know why sometimes images can look blurry on certain mobile devices, and what to do about it:
- Use bigger images
- Compress them to reduce the file size
- Take advantage of adjust to width in the BEE editor
Did you find these tips useful? Go Pro!
If you’re not already using BEE, sign-up for a BEE Pro free trial and have access to additional templates and design features.