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.

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