Never Print Magazines

    webpack-wepb-converter

    1.0.4 • Public • Published

    webpack-wepb-converter

    Description

    Converting background images in css to webp with fallback for not support browsers

    Usage

    //webpack.config.js
    const webpackWepbConverter= require("webpack-wepb-converter");
     
    module.exports = {
      configureWebpack: {
        plugins: [
          new webpackWepbConverter({
            config: [{
                test: /\.(png)/,
                options: {
                  quality: 100,
                  lossless: true,
                }
              },
              {
                test: /\.(jpe?g)/,
                options: {
                  quality: 90,
                  nearLossless: 40,
                  sns: 100,
                }
              },
            ]
          })
        ]
      }
    }

    Custom options in css

    bg-options is additional css properties for individual converting image. It overwrite default options from webpack config.

    .main-img {
      background: url('../img/image1.png');
      bg-options: q(90) m(6) sns(100);
    }
    .banner-img {
      background: url('../img/image1.png');
      bg-options: lossless m(6);
    }

    Available options:

    Name Value
    preset default, photo, picture, drawing, icon, text
    quality int
    alphaQuality int
    m int
    size int
    sns int
    filter int
    f int
    autoFilter boolean
    sharpness int, 0 to 7
    lossles boolean
    nearLossless int
    ignore boolean

    most of int between 0 and 100

    ignore skip convert this image

    read more https://developers.google.com/speed/webp/docs/cwebp

    Bugs

    • media queries not processing yet
    • options of same images whith different bg-options in different css selectors may not applay

    Keywords

    none

    Install

    npm i webpack-wepb-converter

    DownloadsWeekly Downloads

    5

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • xubunter