Published on Dec 31, 2018. 2 minute read.

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: [
            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={}>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.

Webpack 4 with Image Webpack Plugin
Webpack 4 with Image Webpack Plugin


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.


Jon Preece

About the author

Jon Preece is a professional front-end development specialist.

For over a decade, Jon has worked for some of the biggest and best UK based companies, on a wide range of products. Get in touch via Twitter.