How to resize and generate responsive images

To resize or generate responsive images is recommended to use the responsive-loader.

Install additional packages:

npm i -D responsive-loader sharp

To resize an image use the query parameter size:

<!-- resize source image to max. 640px -->
<img src="./image.png?size=640" />

To generate responsible images use in srcset attribute the query parameter sizes als JSON5 to avoid parsing error, because many images must be separated by commas , but we use the comma to separate sizes for one image:

<!-- responsible images with different sizes: 320px, 480px, 640px -->
<img src="./image.png?size=480" srcset="./image.png?{sizes:[320,480,640]}" />

You can convert source image to other output format. For example, we have original image 2000px width as PNG and want to resize to 640px and save as WEBP:

<img src="./image.png?size=640&format=webp" />

You can create a small inline image placeholder. To do this, use the following query parameters:

• placeholder=true - enable to generate the placeholder
• placeholderSize=35 - the size of the generating placeholder
• prop=placeholder - the plugin-specific prop parameter retrieves the property from the object generated by responsive-loader

<img
  src="./image.png?placeholder=true&placeholderSize=35&prop=placeholder"
  srcset="./image.png?{sizes:[320,480,640]}" />

The generated HTML:

<img
  src="data:image/png;base64,iVBORw0K ..."
  srcset="/img/image-320w.png 320w, /img/image-480w.png 480w, /img/image-640w.png 640w" />

Add to Webpack config the rule for responsive images:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp)$/,
        type: 'asset/resource',
        use: {
          loader: 'responsive-loader',
          options: {
            // output filename of images, e.g. dist/assets/img/image-640w.png
            name: 'assets/img/[name]-[width]w.[ext]',
            sizes: [640], // max. image size, if 'size' query is not used
          },
        },
      },
      // ... other loaders
    ],
  },
};