In a few months, it will be 7 years that I've been working at Badsender (our woolen wedding anniversary), which represents a number of projects that I'll have to count one day. During these years, some questions tend to come up regularly, like what is the ratio text-image to respect in an emailor how can we manage the dark mode of its email ? The latest one concerns the weight of images in an email.
Does the weight of the images have an impact on your newsletter?
Even if it's rather the myth of the text-to-image ratio that has the skinny, the subject of the weight of images in an email campaign has regularly come up. Of course, I asked Thomas, our splendid email designer and integrator, the same question. And then, well, my little Thomas was really annoyed (in fact, he's quite tall).
The loading and display time of the email
Have you ever opened a newsletter on your 3G phone (we don't all have the privilege of 4G, okay) and it took a few seconds to display. It's infuriating, isn't it? Don't lie to me, I see you doing it! Hop, we raise our eyes to the sky, if we are lucky, it ends up loading... or not and we leave the email, or worse, we delete it. And you will say to me, what does this have to do with the weight of the images? No, you're not going to ask me that, because I have faith in you: you already know that!
As a reminder (just in case), the heavier an image is, the longer it will take to load and therefore to display. Text on the other hand is displayed much faster, since it weighs only a few bytes. So, the first impact of the weight of an image in an emailing will be the display time of the said images, especially with a bif bof network. A good reason to limit the weight (or even the number) of images.
The deliverability of the campaign
When it comes to deliverability, there's no real contraindication on image weight. Some of our customers use images in excess of 500kb and deliver their e-mails very well. The only point that may ultimately be blocking and directly impact your deliverability (at least on US webmails) is image loading. As I said earlier: the heavier the files, the longer it will take to display the images, which could test the patience of your target audience! The last thing you want is for them to behave negatively (click on spam, delete without opening, etc.) on your e-mails because of the image display... So it's best to send light!
What weight should we limit ourselves to?
It's all about BMI, but not the one you're thinking of: the Max Color Image (don't look it up on the web, I made it up just now ^^). Why Max Color? Simply because each extension is limited in number of colors, which has an impact on the final weight of the visual.
Which extension for which use?
To begin with, do you know the difference between Gif, Jpg, Png and when to use them?
PNG-8: to be reserved for simple graphics, icons and logos, it allows to have light visuals but is limited to 256 colors.
GIF: also limited to 256 colors, it uses a compression method less advanced than PNG-8, its weight will be 10 to 30% heavier (I do not speak of animated Gif here, but Gif).
JP(E)G : Recommended extension for photos, it uses up to 16.7 million colors which allows an optimal display of your shadows, shades, and other gradients.
PNG-24: it uses as many colors as the Jpg, but its little plus is the transparent background.
Animated GIF: case, it allows to animate layers, and contains several images. As a result, animated GIFs are much heavier than the previous extensions.
ÉObviously, there are other extensions like SVG for example, but I won't talk about it here because it is not accepted in emailing :/
Experimentation
Since the beginning of this article, I've been beating around the bush without mentioning a single kilo, but there is a reason (well, a little more). We have seen that the extension you choose has an impact on the number of colors, and therefore the final weight of your visual. BUT, the content of your visual will also have an impact on its weight. This is logical! The more details, shades, shadows there are, the more different colors will be used.
For an identical image with a rather low number of colors (here, the egg), the JPG version weighs 18,9ko when the PNG version is 37,9ko.
Need help?
Reading content isn't everything. The best way is to talk to us.
Now, let's keep strictly the same size image size (250x250px), but with a photo containing many more vibrant colors, the JPG is 141kb, and the PNG 162kb.
What else? Let's say your emailing is designed for retina... I'll let you do the math.
In addition to the number of colors and the content of your image, if you choose the JPG format, it applies a lossy compression (or irreversible compression) unlike PNG-24. This means that when you save from your image editor, you have the choice on a quality level (more or less important loss). The file size will also be more or less high. It remains to be seen which rendering will be acceptable to you.
Optimize the weight of your images for your emails
That's all very nice, but it still doesn't tell us how much weight your image should carry in your email. I hate to tell you this, but I have to: this question cannot be answered out of hand.
On the other hand, we can give you a estimation of the TOTAL weight of the images per campaign, and I did say estimate 😉 We recommend not to exceed 800kb in total (difficult to respect if you integrate an animated Gif on the other hand), which will allow your contacts not to have too much latency when displaying the news. It is necessary to adapt the visuals to your newsletters, depending on the number of images it contains, and to find the right balance between weight and image quality. Fortunately, for this we have solutions: optimize the weight of your imagesand nothing better than online tools to help you.
Yes, even if you think that your favorite image editor is efficient and does this optimization very well (hello Photoshop), you should know that this is not the case and that you can still gain precious bytes, especially when it comes to the metadata specific to your image editor.
Thomas talked about online optimization solutions a few months ago, here is a quick reminder of his reco :
Squoosh
https://squoosh.app A simple drag & drop of your images will reduce their weight 😉 CQFD
Tiny JPG & Tiny PNG
https://tinyjpg.com & https://tinypng.com All the same, except that you load a .zip of all the images and basta.
To summarize, no known impact on deliverability, but possible display problems if your network is weak or the images very heavy. Choose the right extension for each visual according to its size in px, the type of content (logo, picto, photo, gradient...), optimize their weight, all to be under 800ko in total 😉
