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
• The style in the general css (to hide the image)

So there you have it, show and hide images perfectly every time 🙂