next-gen-images-webpack-plugin

    1.1.0 • Public • Published

    next-gen-images-webpack-plugin

    ⚠️ DISCLAIMER: This plugin is still in development, for any bugs/requests open issues and PRs.

    This plugin transforms <img> tags with images in jpg, jpeg and png to a <picture> tag with the original one and it's version in jxl and webp formats.

    <!-- INPUT -->
    <img src="./cat.jpg" alt="Cat" />
    
    <!-- OUTPUT -->
    <picture>
      <source srcset="cat.jxl" type="image/jxl">
      <source srcset="cat.webp" type="image/webp">
      <img src="cat.jpg" alt="Cat">
    </picture>

    Installation

    npm:

    npm install next-gen-images-webpack-plugin --save-dev

    Yarn:

    yarn add -D next-gen-images-webpack-plugin

    You also need webpack 5 and html-webpack-plugin

    Usage

    Setting up webpack.config.js

    const NextGenImagesWebpackPlugin = require('next-gen-images-webpack-plugin')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
      // other options...
    
      plugins: [
        // other plugins...
        new HtmlWebpackPlugin(
          // Your HtmlWebpackPlugin custom config
        ),
        new NextGenImagesWebpackPlugin(),
        // other plugins...
      ],
    }

    Plugin options

    For now, it doesn't have any options.

    Authors

    Maurici Abad Gutierrez - @mauriciabad - https://mauriciabad.com

    Install

    npm i next-gen-images-webpack-plugin

    DownloadsWeekly Downloads

    3

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    988 kB

    Total Files

    15

    Last publish

    Collaborators

    • mauriciabad