Create a Discussion

Does “display:none” prevent an image from loading?

Mary Tanner posted 2017-11-29 16:18:09

I am following up on a recent discussion which you were able to help me on here:
https://litmus.com/community/discussions/7029-outlook-office-com-office-365-conditional-statement-for-hiding-content-not-working

The solution worked great for showing/hiding content in Outlook.com but now I am having another dilemna. The hidden ad is loading. Here is a screen capture of email while in desktop view showing the two ads I am testing with via Charles proxy: http://images.nejm.org/email/Charles_4_2_1_-_Session_1__.png

Ideally, I would like to load 1 ad or make 1 impression depending on the display: desktop vs. mobile.

Do you have experience with this and/or can provide a solution.

Thanks for your help in advance.

Mark Robbins replied 2017-11-30 16:09:49

Unfortunately not.

Any image in an <img> element will load all the time no matter what you do.

A background-image can be placed inside a media query (or other targeting CSS) so it only loads in some places. Although background images don't yet have 100% support.

Another option is using <picture> element, won't work everywhere yet but will only ever load one image

<picture>
    <source media="(max-width: 600px)" srcset="https://dummyimage.com/300x100/008000/ffffff&text=mobile">
    <img src="https://dummyimage.com/300x100/ff0000/ffffff&text=fallback" width="300" height="100" alt="image swap">
  </picture>

Reply to Mark Robbins

Mary Tanner replied 2017-11-30 17:13:57

Thanks Mark for following up. I had suspected much as well as had the thought about using a background-image but knowing the support did not pursue it. Good to know about the picture element but also won't go there due to sketchy support. Appreciate your help.

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Does “display:none” prevent an image from loading?

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password