Skip to content

Instantly share code, notes, and snippets.

@SoftCreatR
Last active July 31, 2021 17:23
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save SoftCreatR/9710fa55d659aaa9613b70a631aa78aa to your computer and use it in GitHub Desktop.
(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
);
@SoftCreatR
Copy link
Author

SoftCreatR commented Jul 31, 2021

.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');
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment