How to process images with Webpack

Published December 31, 2018

With a couple of small Webpack plugins we can add the ability to be able to import images directly in our JavaScript files, and also process those images (compress them).

Run the following command in your terminal to install the required plugins;

npm install --save-dev file-loader image-webpack-loader

What are these packages for?

• file-loader resolves your imports and copies the file to the output directory (usually with a randomly generated name, for cache busting)
• image-webpack-loader processes the images using another package called imagemin

Note that image-webpack-loader takes many options. For a more comprehensive explanation, see the project GitHub repository.

Open webpack.config.js and add the new loader as follows;

module.exports = {
  ///...
  module: {
    rules: [
      ///...
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          "file-loader",
          {
            loader: "image-webpack-loader",
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              optipng: {
                enabled: !isDevelopment,
              },
              pngquant: {
                quality: "65-90",
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
      ///...
    ],
  },
  resolve: {
    extensions: [
      ".js",
      ".jsx",
      ".scss",
      ".gif",
      ".png",
      ".jpg",
      ".jpeg",
      ".svg",
    ],
  },
  ///...
}

The loader can process the following file extensions; .gif, .png, .jpg, .jpeg, .svg.

To simplify our imports, we can add those file extensions to resolve > extensions.

Now let’s test this out. Grab an image and drop it into a new folder under src called images. (I have one called jonpreece-square.jpg)

Open app.js, and import the image as follows;

import jonpreece from "./images/jonpreece-square"

Now update the App component as follows;

function App() {
  return (
    <>
      <img src={jonpreece} alt="Jon Preece" />
      <h2 className={styles.red}>This is our React application!</h2>
    </>
  )
}

To use the image, we simply set the src attribute of an img tag and the rest is taken care of for us.

Summary

Using two Webpack plugins, we can import images directly into our JavaScript files, and process those images at build time (compress them) to make our website load faster and have automatic cache busting.