Wondering what’s next for npm?Check out our public roadmap! »

    avif-in-css

    0.2.2 • Public • Published

    AVIF in CSS

    AVIF logo

    PostCSS plugin and tiny JS script (315B gzipped) to use AVIF image format in CSS background.

    With this PostCSS Plugin you can use AVIF image format in your CSS background in Supported Browsers, and fallback with the original image.

    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

    Take a look to the demo site avif-in-css.netlify.app

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

    2.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.js file. 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.enabled activated)
    • Firefox for Android 64+ (with media.av1.enabled and media.av1.use-dav1d activated)
    • Edge 18+ (with AV1 Video Extension installed)

    Install

    npm i avif-in-css

    DownloadsWeekly Downloads

    5

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    8.06 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar