1

You can use the source element to load images depending on browser support.

<picture>
  <source type="image/avif" srcset="/res/img/student.avif">
  <source type="image/webp" srcset="/res/img/student.webp">
  <img src="/res/img/student.jpg">
</picture>

How can you find out which source (URL) is being/has been loaded? The best case would be to infer this before it has finished loading.

Context:

I am using fast-average-color on the client to find out the avg color of some images. fast-average-color loads a given URL and processes it. However, this way I don't know which URL to pass. I don't want to load avif in a modern browser, just to fall back to jpg when rendering the avg color. Dropping support for older browsers no option either.

MaximilianMairinger
  • 2,176
  • 2
  • 15
  • 36
  • This api reference says `The selected image is then presented in the space occupied by the element.`. ....https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture – GetSet Jan 06 '21 at 20:35

0 Answers0