Note: This article was co-written by John Minardi, Senior Email & Web Developer at Responsys.
Smaller is better. In the land of email marketing design, coding, and delivery - file size plays a significant role in whether your message is well received and looks its best.
Mobile devices can account for a whopping 48% of email opens, with many of these happening over low speed cellular networks. In this landscape, marketers need to be mindful of the mobile user experience. This means being mobile friendly not only in design, but also in accommodating the limited data plans, slow networks, and the various behaviors of the mobile email clients as part of the overall user experience.
Kevin Senne, Senior Director of Deliverability at Responsys recommends total email size be limited to 125K with individual image sizes being limited to 40K, but when considering mobile email opens, the smaller the better. If an email is too large many mobile email clients truncate the email, cutting it off midway with a “Download More” button or in the case of some clients just an unhelpful ellipses (...).
As we roll into the holiday season, we have highlighted a few specific image-size related topics: Ways to reduce email download size, using animated gifs to spice up a holiday design, and the cost of hidden images in responsive design.
Drop the weight: How to reduce email download size
There are many tactics marketers and email developers can effectively employ to reduce email size. Selecting the appropriate image format, reducing the overall number of images, and designing shorter, more concise messages work together to improve user experience, click-through rate and deliverability.
1. Use the appropriate image format. GIFs are great for small, low color images (arrows, lines, logos). JPEGs (exported at 60-70% quality) are excellent for photographic images. PNGs are best suited for small images with transparency.
2. Reduce the number of images in the design. The best practice is to use HTML based text whenever and wherever possible. This improves user experience, click-through rate, as well as deliverability.
3. Design shorter, more concise emails. The average time spent reading an email is between 15-20 seconds.
Animated gifs: Keep them light
Going into the holiday season, animated gifs can be a great way to add depth and delight to our holiday email campaigns, however there are a few points to keep in mind:
1. Gifs are well supported (mostly). Animated gifs are supported in most major email clients. Notable exceptions are Outlook 2007/2010 and Windows Mobile 7, which display only the first frame.
2. Gifs are heavy. The download size of animated gifs can be very large if you aren’t careful. Big, colorful, fast moving animations can easily be several megabytes. Limit the download size of gifs by keeping dimensions small, the animation simple, and the total frame count low.
3. Gifs have a limited color palette. Because of the limited colors available, gifs are not well suited for full color images. Animated gifs work great for things like a flickering candle flame, falling snow, or other subtle movements. This example from Cost Plus World Market weighs in at only 19K (smaller than most hero images!) and yet provides a fun celebratory feel to the email.
Responsive design: The cost of hidden images
After building a newsletter recently, we were surprised to find that the "lean mobile version" had the same (relatively bulky) download size as the desktop. Using Chrome Developer Tools we ran an audit on the load time/download size. After initial tests, it became clear that the way the file was built resulted in mobile users downloading redundant images from both the mobile and desktop versions.
This was mitigated by using a couple of techniques:
1. Leveraging shared assets between versions
Updating the file to share as many images between mobile and desktop versions as possible cut the download size considerably. By employing scaling and cropping techniques on images, the final file was able to meet the design parameters of the original assets.
2. Swapping background images
Unlike standard foreground images, background images assigned via CSS are only loaded from the server when visible. Swapping background images using this method is a great way to ensure that for each experience only the appropriate image is downloaded.
With just these two changes, the download size to both mobile and desktop versions was cut down significantly, and load time over a 3G connection was noticeably faster. The takeaway here is that the choices made in coding the desktop version can impact the mobile version. When coding responsive emails, it's important to test the total size of the send in both desktop and responsive views.
To review: “weigh your emails” before you send, use animated gifs carefully, and consider total email weight when working with responsive designs.
Then put a bow on it.