How to disable third-party cookie for <img> tags?

Update: This workaround no longer works for:

• Firefox 68
• Safari 12.1.2

After several days of challenge with this issue, I can confirm this can not be done using the <img> tag and any currently available techniques.

The right way is to use cookieless proxy server for images like Google does, but this is too resource intensive for us at this moment.

Acceptable workaround:

• To disable cookie replace <img> with <iframesandbox>;
• To display image inside <iframe> use Data URI with inline CSS;
• To emulate <img> tag sizing behavior use CSS background-size: cover which scales the image, this allows to set width and height to the <iframe> which applies to the inner image;
• Use ARIA attributes to specify role="img" and aria-label as alt replacement.

Example:

<img width="100" height="75" alt="About company"
     src="https://www.dtm.io/wp-content/uploads/2018/04/datamart-company.png" />

<iframe width="100" height="75" aria-label="About company" role="img"
        frameborder="0" sandbox
        src="data:text/html,<style>body{background:url('https://www.dtm.io/wp-content/uploads/2018/04/datamart-company.png') center/cover no-repeat;padding:0;margin:0;overflow:hidden}</style>"></iframe>

This won't be an option in most cases, but if the third-party image is being served with an Access-Control-Allow-Origin header that includes * or your host, it is possible to use the crossorigin="anonymous" attribute to disable cookies. In these cases, you should probably also include referrerpolicy="no-referrer" for greater privacy.

<img
  src="https://graph.facebook.com/officialstackoverflow/picture"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

Most websites will not set this header, and you'll need to find an alternative. But some do, such as Facebook's API, and this is the simplest solution for those cases.