I've always learned, as a good practice ofhtml email integrationI've always been aware of the need to enter the dimensions of an image in an email. And, like many good practices, I didn't always find out why... It's become a reflex. But now it's high time to put it to the test, to see if it really has an impact 😉
Why should I fill in the dimensions of an image?
I recently discovered the main reason for this good practice: if the height and width of the images are set, the email retains its structure, even if the images are not displayed. Let's check! If this isn't true (or no longer applies), delete the attributes width and height would save a few kilobytes on the final weight of the HTML file and would pose fewer constraints for responsive.
So, do I need to fill in the dimensions?
The good practice is justified! Indeed, according to our tests on EmailonAcid, if the dimensions of an image (width and height) are not filled in, the cell containing the image is reduced to the strict minimum in case of a non-displayed image. The structure of the email is therefore modified.
Need help?
Reading content isn't everything. The best way is to talk to us.
This does not work WITHOUT widths and heights... But do we have a better rendering WITH ? After tests, it turns out that it is essential to fill in the dimensions of each image within an emailing.
Here is a quick comparison: On the first screenshot, the images are not blocked, everything is displayed correctly. On the second one, however, the images are blocked and the dimensions are not filled in. We can see that the container will be restricted in height to display only the alternative text and the blocked image pictogram. As for the third screenshot, the images are not displayed, but the dimensions are indicated on the image: the cell keeps the height and width of the image. As a result, the structure of the email remains the same.
6 réponses
It is sometimes interesting to leave the dimensions of the image blank in order to be able to "rewind the fold", i.e. to avoid a large empty square, when the images are not displayed.
This allows to have a button visible more quickly for example.
Be careful, it requires to test the structure of the mail.
Indeed, as Laurent points out, it is sometimes interesting to leave out the heights / widths to bring up the CTA. If the background of the image is white, you must avoid ending up with a large white block that looks "empty".
If we take the case of Lotus Notes, it is essential to enter the width in the cell surrounding this image to avoid ending up with a completely uncontrolled structure without images displayed.
It is usually necessary to display the images. If your use of email has particularities (responsive, sector of activity using in old email tools, etc.) only one solution, test test test!
I'm not sure if the widths are correct to artificially raise the CTA when the images are not displayed. If the CTA is so low, maybe it should be raised so that it is also visible when displaying images in preview mode, no?
To be able to display an email correctly you can push the vice by assigning colored backgrounds on the cells surrounding the images.
This allows us to have a structured email that already presents the spirit of our email without displaying images.
This can allow the final client to read the content without displaying the images, and eventually click and/or retrieve the images to learn more.
And freezing the sizes of the images is quite necessary for the proper display and prove the seriousness of the communication to the customer 🙂
There is another reason (which does not have much impact today, but hey..), indicating the sizes of the images allows to improve the loading of this one. So today it is true that with the speed of our connections, it is more gadget than anything else, but at the time the gain was not negligible 🙂
With hindsight and after 6 years: I still believe that it is better to fill in the width and height of the image when possible. You will tell me: Why shouldn't it be possible? In the case of Master Template where the visuals are going to change, we can't guess the height of the future visuals. In this case, I only enter the width.