jxl-in-css

0.1.0 • Public • Published

JPEG XL in CSS

JPEG XL logo

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.

How works?

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

Usage

1. Convert to JXL

Convert you images to jxl format, you can use Squoosh

2. Install jxl-in-css

npm install --save-dev jxl-in-css

2.1 Load the polyfill

Add 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>

2.2 Load the PostCSS plugin

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.js file. It already has PostCSS support.

Add jxl-in-css to PostCSS plugins

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')
  ]
}

PostCSS Options

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

Supported browsers

  • Chrome Canary 92+ with Enabled JXL image format chrome://flags/#enable-jxl

Package Sidebar

Install

npm i jxl-in-css

Weekly Downloads

6

Version

0.1.0

License

MIT

Unpacked Size

7.22 kB

Total Files

5

Last publish

Collaborators

  • nucliweb