PostCSS plugin and tiny JS script (150B) to useJPEG XL in CSS background
With this PostCSS Plugin you can use JPEG XL image format in your CSS background in Supported Browsers, and fallback with the original image.
You add require('jxl-in-css') to your JS bundle and write CSS like:
.logo {
width: 80px;
height: 80px;
background-image: url(logo.jpg);
}The script will set jxl or no-jxl class on <body> and PostCSS plugin will generate:
.logo {
width: 80px;
height: 80px;
}
body.jxl .logo {
background-image: url(logo.jxl);
}
body.no-jxl .logo {
background-image: url(logo.jpg);
}Convert you images to jxl format, you can use Squoosh, JPEGXL.io, or take a look to the software list on JPEGXL.info
npm install --save-dev jxl-in-cssAdd the JS script to your client-side JS bundle:
// CommonJS
+ require('jxl-in-css/polyfill.js')
// ES6
+ import 'jxl-in-css/polyfill.js'Since JS script is very small (315B gzipped), the best way for landings is to inline it to HTML:
+ <script><%= readFile('node_modules/jxl-in-css') %></script>
</head>You can load the script via CDN:
+ <script src="https://unpkg.com/jxl-in-css/polyfill.js"></script>
</head>Check do you use PostCSS already in your bundler. You can check postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.
If you don’t have it already, add PostCSS to your bundle:
- For webpack see postcss-loader docs.
- For Parcel create
postcss.config.jsfile. It already has PostCSS support.
module.exports = {
plugins: [
+ require('jxl-in-css'),
require('autoprefixer')
]
}If you use CSS Modules in webpack add modules: true option:
module.exports = {
plugins: [
- require(jxl-in-css'),
+ require(jxl-in-css')({ modules: true }),
require('autoprefixer')
]
}module.exports = {
plugins: [
require('jxl-in-css')({ /* options */ }),
]
}| Option | Description | Default Value | Type Value |
|---|---|---|---|
modules |
Wrap classes to :global() to support CSS Modules. |
false |
Boolean |
jxlClass |
Class name for browser with jxl support. | jxl |
String |
noJxlClass |
Class name for browser without jxl support. | no-jxl |
String |
rename |
Get a new file name from old name, like (oldName: string) => string, then url(./image.png) → url(./image.png.jxl). |
Function |
- Chrome 92+ with Enabled JXL image format
chrome://flags/#enable-jxl - Firefox 90+ with the image.jxl.enabled flag in about:config in Nightly only.
- Edge 91+ with the --enable-features=JXL runtime flag.