image-formats-support
v1.0.0
Published
Image formats support detector for browsers: AVIF, WebP, JPEG XL
Downloads
11
Maintainers
almaximalReadme
Image Formats Support Detector for Browsers: AVIF, WebP, JPEG XL
This Javascript/Typescript plugin detects modern image formats supporting in your web browser:
Demo
https://maximal.github.io/image-formats-support/
Usage
Load in Browser
Load from dist/image-formats-support.js or JsDelivr:
<!-- Local script -->
<!-- <script type="application/javascript" src="dist/image-formats-support.js"></script> -->
<!-- Script from JsDelivr -->
<script type="application/javascript"
src="https://cdn.jsdelivr.net/gh/maximal/[email protected]/dist/image-formats-support.min.js"></script>
<script type="application/javascript">
// On DOM ready
document.addEventListener('DOMContentLoaded', function () {
// Set `<body>` element classes: has-avif/no-avif, has-webp/no-webp has-jxl/no-jxl
window.detectImageFormatsDefault(document);
// Detect AVIF, WebP, JPEG XL support and run passed callback
window.detectImageFormats(function (result) {
console.log(result.avif); // boolean
console.log(result.webp); // boolean
console.log(result.jxl); // boolean
console.log(result.time); // milliseconds (number)
}, { avif: true, webp: true, jxl: true, delay: 0 });
});
</script>NodeJS Module
Install the package:
npm install image-formats-support
# or if you prefer Bun:
# bun add image-formats-supportImport and use it:
import {
detectImageFormats,
detectImageFormatsDefault,
type ImageFormatResult,
} from 'image-formats-support';
// On DOM ready
document.addEventListener('DOMContentLoaded', (): void => {
// Set `<body>` element classes: has-avif/no-avif, has-webp/no-webp has-jxl/no-jxl
detectImageFormatsDefault(document);
// Detect AVIF, WebP, JPEG XL support and run passed callback
detectImageFormats((result: ImageFormatResult): void => {
console.log(result.avif); // boolean
console.log(result.webp); // boolean
console.log(result.jxl); // boolean
console.log(result.time); // milliseconds (number)
}, { avif: true, webp: true, jxl: true, delay: 0 });
});Author
- https://github.com/maximal
- https://maximals.ru/
- https://sijeko.ru/