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
. logo { width : eighty px ; height : eighty px ; background-image : url (logo.jpg); }
. logo { width : eighty px ; height : eighty px ; } body . avif . logo { background-image : url (logo.avif); } body . no-avif . logo { background-image : url (logo.jpg); }
npm install --save-dev avif-in-css
// CommonJS + require('avif-in-css/polyfill.js') // ES6 + import 'avif-in-css/polyfill.js'
+ <script><%= readFile('node_modules/AVIF-in-css') %></script> </head>
+ <script src=" https://unpkg.com/avif-in-css/polyfill.js "></script> </head>
-
For webpack see postcss-loader docs. -
For Parcel create postcss.config.js file. It already has PostCSS support.
module.exports = { plugins: [ + require('avif-in-css'), require('autoprefixer') ] }
module.exports = { plugins: [ - require(avif-in-css'),
+ require(avif-in-css')({ modules: true }), require('autoprefixer') ] }
module . exports = {
plugins : [
require ( 'avif-in-css' ) ( { /* options */ } ) ,
]
}
|
|
|
|
---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-
Chrome Desktop 85+ -
Firefox 63+ (with media.av1.enabled activated) -
Firefox for Android 64+ (with media.av1.enabled and media.av1.use-dav1d activated) -
Edge 18+ (with AV1 Video Extension installed)