Maximising Email Efficiency: Exporting Images for Optimal Performance
Jack Patrick, Senior Email Developer at Profusion
Images are usually the largest assets included in an email and as such we have to keep an eye on their impact on download times and server strain, as this affects both the recipient’s experience and our own tech. Your business could experience slowdowns as the servers battle to provide massive image files to people opening emails. Recent iOS updates have not helped either, as images could be downloaded without a user even opening the email.
With this in mind, here are a few ways to minimise the impact of image load on your emails.
Image File Types
One of the biggest savings in filesize comes from choosing the right image format for the situation. There are three types of images you’ll use in email. JPEG, PNG and GIF. Other formats are available, but they aren’t as widely supported.
In a nutshell, we should use:
● JPEG for photographic type images
● PNG for logos, icons, transparency
● GIF for animations
Why?
The difference between the file types is largely down to the way they compress information. JPEG can compress files down to a much smaller size by discarding information considered less important or undetectable to the human eye, through ‘lossy’ compression. This makes them useful for saving images with a lot of different colours, like photos or illustrations. PNG, on the other hand, is a ‘lossless’ format, which means that it tries to retain as much detail as it can in the compression process. This means that vector drawn lines should appear sharper by using PNG. In addition, the support for transparency in an alpha channel is a big reason that PNG could be the right choice.
Image Size Standards
Another aspect of the image that will affect the filesize is the dimensions. Images can, of course, be resized in the HTML document using styling, but the image still has to be downloaded at full resolution. Knowing this, we should export our images at the smallest dimensions possible, which, in most cases, is the size that we will be displaying it at.
The exception to this rule is images for mobile. Retina screens are so detailed that an image displayed at its natural size can look blurry, so to counter this we save an image for mobile at twice its display dimensions so that it can be scaled down in the design and look sharp on mobile screens. In some cases the desktop image could fulfill both requirements for extra space savings!
GIFs
The largest images tend to be animated GIFs. In these cases we can only reduce filesize so much. The number of frames contributes to size too, so use animated GIFs sparingly if server load is a concern.
How to Analyse your Email’s Weight
To see how much traffic your HTML is generating, open the inspector in your browser and navigate to the network tab. You’ll be able to see the total of all requests in the bottom right.
How to Export
To export images in the right format, we will have to adjust a few settings. The following examples are for Photoshop, but your program of choice should have similar options.
In this example we have a banner image in a PSD file. As you can see, it's a photo, so already we know that this is going to be a JPG.
To export it, right click on the image in the layers window and select ‘Export As’ from the menu.
In the top right of the export window, you’ll see a dropdown for image format. Let’s look at the export size of a PNG for this image.
The file size is previewed in the pane on the left.
579.1KB - That’s half a megabyte already.
Let’s have a look at JPG.
147.2KB. A good saving.
There’s one more step to do here - the image is bigger than it needs to be. The email is only 600px wide but this image is 931px wide. On the right hand side we can export at a different size.
Down to 76KB now and good to go. Hit the big blue button!
Email Still Too Big?
Try using a compression service online like:
https://compressor.io/
If you’d like the support of our campaign experts, contact us: hello@profusion.com