imgsupport.js

(document => {
  let checkCount = 0,
    formatFound = false;

  const setHTMLClass = (height, className) => {
    checkCount += 1;

    if (parseInt(height, 10) === 2) {
      formatFound = true;

      document.documentElement.classList.add(className);
    } else {
      document.documentElement.classList.add(`not${className}`);

      if (checkCount === 4 && !formatFound) {
        if (
          document.implementation.hasFeature(
            "http://www.w3.org/TR/SVG11/feature#Image",
            "1.1"
          )
        ) {
          document.documentElement.classList.add('svg');
        } else {
          document.documentElement.classList.add('notsvg png');
        }
      }
    }
  }

  const JXL = new Image();
  const AVIF = new Image();
  const WebP = new Image();
  const JPX = new Image();
  const JP2 = new Image();

  JXL.onload = JXL.onerror = () => {
    setHTMLClass(JXL.height, "jxl");
  };

  AVIF.onload = AVIF.onerror = function () {
    setHTMLClass(AVIF.height, "avif");
  };

  WebP.onload = WebP.onerror = function () {
    setHTMLClass(WebP.height, "webp");
  };

  JPX.onload = JPX.onerror = function () {
    setHTMLClass(JPX.height, "jpx");
  };

  JP2.onload = JP2.onerror = function () {
    setHTMLClass(JP2.height, "jp2");
  };

  JXL.src =
    "data:image/jxl;base64,/woIELASCAgQAFwASxLFgkWAHL0xqnCBCV0qDp901Te/5QM=";

  AVIF.src =
    "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAAD" +
    "ybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAAD" +
    "nBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAA" +
    "AAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlA" +
    "AAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAA" +
    "CAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8" +
    "D///8WfhwB8+ErK42A=";

  WebP.src =
    "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0" +
    "iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";

  JPX.src =
    "data:image/vnd.ms-photo;base64,SUm8AQgAAAAFAAG8AQAQAAAASgAAAIC8BAABAAA" +
    "AAQAAAIG8BAABAAAAAgAAAMC8BAABAAAAWgAAAMG8BAABAAAARgAAAAAAAAAkw91vA07S7" +
    "GFPXd2jckQV01QSE9UTwAZAMFxAAAAATAAoAAKAACgAAAQgCAIAAAEb/8AAQAAAQDCPwCA" +
    "AAAAAAAAAAAAAAAAjkI/AIAAAAAAAAABIAA=";

  JP2.src =
    "data:image/jp2;base64,/0//UQAyAAAAAAABAAAAAgAAAAAAAAAAAAAABAAAAAQAAAAA" +
    "AAAAAAAEBwEBBwEBBwEBBwEB/1IADAAAAAEAAAQEAAH/XAAEQED/ZAAlAAFDcmVhdGVkIG" +
    "J5IE9wZW5KUEVHIHZlcnNpb24gMi4wLjD/kAAKAAAAAABYAAH/UwAJAQAABAQAAf9dAAUB" +
    "QED/UwAJAgAABAQAAf9dAAUCQED/UwAJAwAABAQAAf9dAAUDQED/k8+kEAGvz6QQAa/PpB" +
    "ABr994EAk//9k=";
})(
  (window.sandboxApi && window.sandboxApi.parentWindow && window.sandboxApi.parentWindow.document) || document
);

.jxl .myelem {
  background-image: url('myimage.jxl');
}
.avif.notjxl.notwebp .myelem {
  background-image: url('myimage.avif');
}
.webp.notjxl.notavif .myelem {
  background-image: url('myimage.webp');
}
.jpx.notavif.notwebp .myelem {
  background-image: url('myimage.wdp');
}
.jp2.notavif.notwebp .myelem {
  background-image: url('myimage.jp2');
}
.svg .myelem {
  background-image: url('myimage.svg');
}
.png .myelem {
  background-image: url('myimage.png');
}