[canonical] attribute for <img> pointing to file to use for sharing or saving

Such a canonical attribute would solve different problems we currently have with the web platform:

  1. Authors currently refrain from using more efficient image formats like WebP due to interop problems when people share or download these images: If the addressee does not have a WebP capable client, she/he cannot open the image. Same goes for software like Photoshop. With the canonical attribute, the image downloaded would not be the one currently being displayed but the one specified in the attribute:

<img src=“example.webp” canonical=“example.jpg”>

  1. The attribute would help in a similar way for when srcset or a picture element are active and the browser displays a slimmed down version out of the set. Again, when sharing or saving, the canonical attribute would ensure that the unoptimized image would be used for that.

  2. And finally authors that use tricks to keep people from downloading an image, like using a transparent image with the original image as CSS background-image or blocking right mouse clicks via JavaScript, could use the canonical attribute to point to a low res file or to a file with watermark or to just a blank image. No need to overengineer something any more.


I like the idea in general. However, this would mean quite some changes to the current behavior of browsers and some impact on the user experience:

  • Double downloads due to the source and the canonical source being different files, leading to increased traffic
  • Users cannot easily download the exact image they’re viewing currently. This could lead to files being downloaded unintentionally (it could be any file that is linked as canonical, even an .exe/.dmg). Also, if a user wants to get the webp file this is not easy to achieve anymore with this change.

Just some considerations to make regarding the user experience and security impacts. But maybe there’s a nice solution to tackle these concerns.

Oh yes, one could troll people by linking to a NSFW file behind the scenes :slight_smile:

Regarding the double downloads issue: Well, that only occurs if someone downloads or shares an image.

Client hints seems like a good candidate for solving this with automated resource selection: https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints#automating_resource_selection_with_client_hints

Thank you Malvoz, but sadly Client Hints solve a completely different problem.