What happens if you don't consider these factors?

[armdrejoan]

It is very likely that readers will abandon reading the newsletter, frustrated by the slowness in loading images or other and, given the high competition in the inbox, turn their attention to another email.

Media Queries and Fluid Layouts allow you to dentist database effectively deliver your message to all users, regardless of their screen size. Of course, this does not guarantee that the email will load quickly: the images still need to be loaded onto the device, rather than being chosen based on the available bandwidth. So how can you optimize images to solve the problem?

Inside the code
Thanks to responsive design, we can display different images for different circumstances using the <picture> tag, a practice, however, not available in email design, scandalously anchored to table design with inline styles. However, in Email Design, we can apply the flexible image technique by defining a general CSS rule that ensures that the width of the images never exceeds that of the main container.

img {
max-width: 100%;
height: car;
}
But still, it is not enough! We must avoid that smartphone and tablet users get bored while downloading images to the point of closing or deleting the newsletter. A well-known trick in web design allows you to upload images using the regular <img> tag with a css like this:

td{
background: url(myimage.jpg);
}
So let's assume we have this situation:

<td>
<img src="awesome_banner.jpg" alt="banner" style="max-width: 100%;"/>
<td>
The image will presumably download quickly on a desktop device, but may be slow on a smartphone. To avoid this, a possible solution is to preload a smaller version of the same image in the container background, using the css background property. The smaller image will load very quickly while waiting for the final one:

<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 make sure that the low resolution image is displayed only on mobile devices, we use css media queries:

/*SMARTPHONESTYLES*/
@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 as background-image in css properties. This is another very useful method to reduce HTTP requests as the image is encoded by a long string with very fast loading times, free from downloads from servers.

Try inspecting the code of the following image, looking at the src attribute:


Interestingly, any image embedded in this way will bypass Mozilla Thunderbird's image blocking. URI should be used with caution, however, as it is blocked by some email clients such as the very popular Gmail, which may convert the code to work with an empty src tag:

<img src="" alt="my image" width="100%" />
However, loading the URI resources in the parent container background with the syntax above will not cause any problems even in clients like Gmail that refuse the instruction. Our image 'awesome_banner.jpg' will be downloaded normally.

These tricks are also very useful when you are dealing with animated images in GIF format for your newsletter. We can preload a reduced version of the image in jpg format (the practice is to choose the first frame) that will be loaded while waiting for the animation, so as to avoid empty containers before loading.

This is an example of how it works. First we need to load a base 64 encoded image in the background of the cell that contains the animated gif. It will load very quickly. This way even users with low bandwidth will see content.



In the next example we preload a reduced version of the gif image using css. The reduced version of the image is a jpg with a size of 19.05KB that will download in 4 seconds with a bandwidth of 56.6KB. The final animation instead has a weight of 626.4KB and will download in 114 seconds with the same modem.