5

Let's say I have an image like this:

<img src="https://via.placeholder.com/150" class="abcd" />

How to make, with CSS only, that the url https://via.placeholder.com/150 is never loaded?

I tried:

  1. .abcd { display: none; }: a GET to the image is still done (you can check with the browser's Developer Tools > Network)

  2. .abcd { visibility: hidden; }: idem

  3. put the <img> inside a <div> which is itself in display: none;: idem, a GET request is still done for the image

  4. I tried the method from Is it possible to set the equivalent of a src attribute of an img tag in CSS?:

    .abcd { content:url("https://via.placeholder.com/200"); }

    but then both https://via.placeholder.com/150 and https://via.placeholder.com/200 were loaded.

  5. .abcd { content: none; } didn't work either

Application: I'm trying to do a 1px-tracking-system for emails, and I want to prevent my own views to be tracked by injecting a custom CSS (with Stylus chrome extension, uBlockOrigin)

Note: Of course, I already read Does "display:none" prevent an image from loading? but it did not give an exact solution for this linked problem.

Basj
  • 29,668
  • 65
  • 241
  • 451
  • see: https://stackoverflow.com/questions/4528052/can-you-stop-an-img-tag-from-loading-its-image-using-css – samga Dec 17 '19 at 14:29
  • @samga this question is quite old, and has probably changed. Moreover, here I'm trying other methods such as 3, 4, 5, not mentioned in this linked question. – Basj Dec 17 '19 at 14:31
  • The question is old. But if you scroll a bit further down, there is a somewhat newer answer. – samga Dec 17 '19 at 14:33
  • you could point the tracking domain to 127.0.0.1 in your `hosts` file – Fabrizio Calderan loves trees Dec 17 '19 at 14:34
  • @fcalderan that's actually a good idea... However I still use this domain for other things... Is it possible in `hosts` to set 127.0.0.1 not for all `example.com` but only for `example.com/subdir/`? – Basj Dec 17 '19 at 14:36
  • @fcalderan Hm, in fact, it might not work: Gmail for example caches the image, and when displaying the email in Gmail, the URL will be `https://ci6.googleusercontent.com/proxy/...` – Basj Dec 17 '19 at 14:40
  • the question you linked contains also a 2019 solution you should try to apply. – Lelio Faieta Dec 17 '19 at 15:10
  • Note: the `` tag does not use and does not need a closing slash and never has in HTML. – Rob Dec 18 '19 at 00:56

2 Answers2

1

Application: I'm trying to do a 1px-tracking-system for emails, and I want to prevent my own views to be tracked by injecting a custom CSS (with Stylus chrome extension, uBlockOrigin)

Why you don't do the opposite and have the image not loading by default then you load it when needed.

Here is an idea using CSS variables

img {
  content:var(--img);
}

/* The CSS to disable the loading
img {
  --img:initial!important;
}
*/
<img style="--img:url('https://via.placeholder.com/150')" class="abcd" />

Another idea without CSS variables where the image will load by default. Make sure to load the CSS early to avoid the loading.

/*to disable the loading. Make sure it's considered before the inline style
img {
  content: none!important;
}
*/
<img style="content:url('https://via.placeholder.com/150')" class="abcd" />
Temani Afif
  • 180,975
  • 14
  • 166
  • 216
  • Nice idea! Do you think we can insert such a thing (CSS + HTML) in an email, in Gmail for example? A ``, definitely, yes, but something close to the snippet you posted, not sure, how would you do this? – Basj Dec 17 '19 at 20:40
  • @Basj added another idea, where you don't need external CSS. You only need it to disable the loading – Temani Afif Dec 17 '19 at 20:54
0

Many tests have been done by Tim Kadlec on this page.

In short, images with <img>:

<div id="test1"><img src="images/test1.png" alt="" /></div>

will always be loaded even with:

#test1 { display:none; }

Instead, using a div with background-image like this:

<div id="test1"><div style="background-image: url('https://via.placeholder.com/159');"></div></div>

will allow the image to NOT be loaded when using #test1 { display:none; }.

Basj
  • 29,668
  • 65
  • 241
  • 451