When using the recommended dimensions for hero images, I'm noticing images will duplicate to fit the space given in mobile responsive emails or various email clients.
What should I be doing to avoid this duplication?
Solved! Go to Solution.
Hi Kim,
This will always happen if your image height is not sufficient to cover the hero zone. ON mobile devices, the hero zone height will be higher than on desktop. if the image height is not sufficient, the email client will duplicate it.
I also have observed issues if you use 300dpi images instead of the recommended 72dpi.
-Greg
UPDATE: If you only use one text box (header or subheader text) in the hero section and keep text to one line, the duplication will not occur.
Thanks so much Kim this advice really helped!
Hi Kim,
This will always happen if your image height is not sufficient to cover the hero zone. ON mobile devices, the hero zone height will be higher than on desktop. if the image height is not sufficient, the email client will duplicate it.
I also have observed issues if you use 300dpi images instead of the recommended 72dpi.
-Greg
Where can I find image dimensions for hero zone in all starter templates?
Hi Kim,
Usually, it's watermarked on the placeholder images provided with the templates.
-Greg
Yes, but those are the dimensions our team is using and still experiencing issues with duplication. If anyone else has experienced this, is there a recommended add __ pixels to image?
Assuming that you are using background image in the email. Try adding "background-size: cover;" css properly. It should solve the duplication issue.
BTW, It's not recommended to use background images in the emails. It can create some issue especially with outlook.
Regards,
Amit