Hide and show images in HTML emails for desktop and mobile
Sounds simple enough – but any email developer will tell you nothing is ever that simple in HTML emails. Different email clients interpret elements differently, so a simple display: block and display: none will not work in this instance.
Instead you can use the below code to achieve it:
Things to note:
- The class on the desktop image
- The conditionals around the hidden image (to ensure it hides in older versions of Outlook)
- The styles in the responsive media query
So there you have it, show and hide images perfectly every time 🙂