AVIF in CSS
PostCSS plugin and a tiny JS script (315B gzipped) to use the AVIF image format for CSS background images.
Use AVIF in Supported Browsers and fall back to the original image in other browsers.
Take a look at the demo site avif-in-css.netlify.app
About AVIF
AVIF offers significant compression gains vs. JPEG and WebP, with a recent Netflix study showing 50% savings vs. standard JPEG and > 60% savings on 4:4:4 content
How works?
You add require('avif-in-css') to your JS bundle and write CSS like:
.logo {
width: 80px;
height: 80px;
background-image: url(logo.jpg);
}The script will set avif or no-avif class on <body> and PostCSS plugin will generate:
.logo {
width: 80px;
height: 80px;
}
body.avif .logo {
background-image: url(logo.avif);
}
body.no-avif .logo {
background-image: url(logo.jpg);
}Usage
1. Convert to AVIF
Convert you images to AVIF format, you can use Squoosh, Avif.app, Convertio.co, avif.io or any other tool. Important: This PostCSS plugin doesn't convert the images to AVIF format.
2. Install avif-in-css
npm install --save-dev avif-in-css2.1 Load the polyfill
Add the JS script to your client-side JS bundle:
// CommonJS
+ require('avif-in-css/polyfill.js')
// ES6
+ import 'avif-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/AVIF-in-css') %></script>
</head>You can load the script via CDN:
+ <script src="https://unpkg.com/avif-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.jsfile. It already has PostCSS support.
Add avif-in-css to PostCSS plugins
module.exports = {
plugins: [
+ require('avif-in-css'),
require('autoprefixer')
]
}If you use CSS Modules in webpack add modules: true option:
module.exports = {
plugins: [
- require(avif-in-css'),
+ require(avif-in-css')({ modules: true }),
require('autoprefixer')
]
}PostCSS Options
module.exports = {
plugins: [
require('avif-in-css')({ /* options */ }),
]
}| Option | Description | Default Value | Type Value |
|---|---|---|---|
modules |
Wrap classes to :global() to support CSS Modules. |
false |
Boolean |
avifClass |
Class name for browser with AVIF support. | avif |
String |
noAvifClass |
Class name for browser without AVIF support. | no-avif |
String |
rename |
Get a new file name from old name, like (oldName: string) => string, then url(./image.png) → url(./image.png.avif). |
Function |
Supported browsers
- Chrome Desktop 85+
- Firefox 63+ (with
media.av1.enabledactivated) - Firefox for Android 64+ (with
media.av1.enabledandmedia.av1.use-dav1dactivated) - Edge 18+ (with
AV1 Video Extensioninstalled)