Why to optimize images?

Converting email readers into customers it largely depends on developing a positive ‘customer impression’, and this is where your newsletter performance come into play.

Quality images and ultra-fast loading speed gives customers a positive psychological impression encouraging sales and their loyalty. This way the ‘user experience’ in terms of email performance and responsiveness become a fundamental factor impacting conversion rates in web marketing campaigns. A successful newsletter it’s about delivering the right information, products or services at the right time, thing that is not possible without ultra-fast page load times. On the other hand in a world with an increasing reliance on smartphones and tablets, web marketers and online retailers must understand the need to deliver content efficiently from web servers to the mobile screens, because a successful email marketing campaign depends, among other things, on the ability to embrace a mobile approach in reaching the exploding population of mobile subscribers.

What happens if we don’t consider this things? Your subscribers will abandon the reading of your newsletter due to slow page speed and, considering the competition, users eventually will read someone else’s newsletter. So in order to deliver our message quickly to all type of users you can make an email to work well across a range of device sizes just like with responsive websites, by using fluid layouts or media queries. However, this doesn’t guarantee that our html email will load fast. We still have to load the same images for pc, tablet and smartphones instead of loading different images with different resolutions in order to make the best use of available bandwidth. So how can we optimize our images for smartphone or tablet devices?

Inside the code

In responsive web design we can now display different images for differing circumstances, with the help of ‘<picture>’ tag. Unfortunately this is not possible in email design which is still an outrageously outdated practice. In the ‘Post Pc Era’ we still have to build layouts using tables and style them with HTML attributes and inline css styles. However, in email design we can apply the ‘flexible image’ technique, it’s about defining a general css rule to ensure that images never go beyond the width of their parent container.

img {
 max-width: 100%;
 height: auto;
}

But this is not enough! We should try to ‘prevent’ that our smartphones and tablets users get bored while images are downloading and to close or delete our newsletter. So, to do that we will use a very well known trick and css media queries. Using images in email is very similar to using them on the web. We can load images using regular ‘<img>’ tags or by using css like this:

td{
 background: url(myimage.jpg);
 }

Let’s now suppose that we have the following situation:

<td>
<img src="awesome_banner.jpg" alt="banner" style="max-width: 100%;"/>
<td>

The image can be downloaded fast enough on a ‘pc’ but very slowly on a smartphone device. To avoid this, a possible solution is to pre-load a smaller version of the same image in the parent’s background by using css ‘background’ property, which will load faster than the original image.

<td style="background:url('small_awesome_banner.jpg') center center no-repeat;">
<img src="awesome_banner.jpg" alt="banner" style="max-width: 100%;"/>
<td>

And to be sure that our smaller version of the image will be available only for mobile users, we use css media queries:

/*SMARTPHONE STYLES*/
@media only screen and (max-width: 480px) {
#imageHolder{
background:url('small_awesome_banner.jpg') center center no-repeat;
}
}

<td id="imageHolder">
<img src="awesome_banner.jpg" alt="banner" style="max-width: 100%;"/>
<td>

We can also use URI for the the ‘background-image’ css property, which is another useful method for reducing HTTP requests. Using URI it saves HTTP Requests, the image is basically, a super long string and the page loads faster, seeing that we don’t have to download anything from the server.

Checkout the ‘src’ attribute of the image below:

An interesting fact is that every image embedded in this manner will evade image blocking in Mozilla Thunderbird. Anyway,  you should use URI with caution because some email clients like Google’s Gmail blocks URI resources by cancelling them so we could end with an empty ‘src’ attribute like this one:

<img src="" alt="my image" width="100%" />

However, if we load our URI resources in the parent’s background using css syntax like we did before, nothing bad will happen if the email is open in Gmail, since our original image ‘awesome_banner.jpg’ will continue to be downloaded normally .

This tricks are very useful when we have to deal with animated gif images in our newsletters. We could preload a smaller jpg version of the animation, usually a screenshot of the first frame in the animation timeline, which will be quickly loaded for the user, avoiding this way to present empty spaces while the animated gif is loading.

Here is an example of how it works. First we load a base64 encoded image in the background of the cell that contain the animated gif image, wich will load very fast. This way we avoid to prompt the usesr with low bandwidth connections with a large amount of empty spaces.

In the next example we preload a smaller version of the gif image using css. The smaller version of the image is an jpg image with a size of 19,05K. This image will download in 4 seconds on a modem of 56.6 Kbps. The larger version of the animation with a size of 626,4K will download in 114 seconds on the same modem.

Slice and dice – still a useful practice

Last but not least we should remember the old practice of slicing. The slicing method it’s an obsolete web design tehnique, but may be still usefull in html email design. Here is how it works: to avoid long time loading of an image we cut the image into smaller sections, with the help of Photoshop or other tool. Then we reassemble the whole image in our html page. The point is that by breaking the image into smaller pieces, this pieces will begin to load quickly, reducing “page weight” or load time considerably.

By using this tricks we don’t perform a ‘real optimization’, instead we are trying to solve a common problem: it’s well known that visitors would rather spend excessive time browsing for the information elsewhere than waiting a few seconds for the right website to load. This is valid for html emails too! So, serving our images as quickly as possible will enhance customers satisfaction, retention and loyalty, reducing email unsubscribe rates due to slow internet connection.