detect-img-type-support.js

async function supportsImgType(type) {
  // Create
  //
  // <picture>
  //   <source srcset="data:,x" type="{type}" />
  //   <img />
  // </picture>
  //
  // (where "data:,x" is just a minimal URL that is valid but doesn't trigger network)
  let img = document.createElement('img');
  document.createElement('picture').append(
    Object.assign(document.createElement('source'), {
      srcset: 'data:,x',
      type
    }),
    img
  );
  // Wait a single microtick just for the `img.currentSrc` to get populated.
  await 0;
  // At this point `img.currentSrc` will contain "data:,x" if format is supported and "" otherwise.
  return !!img.currentSrc;
}

for (let type of ['image/png', 'image/jpeg', 'image/webp', 'image/avif']) {
  supportsImgType(type).then(supported => console.log(`${type}: ${supported}`));
}
// image/png: true
// image/jpeg: true
// image/webp: true
// image/avif: false

Nice. This code is working for me. Good Job
Thanks 🙌