Request Metrics
Published in

Request Metrics

Fast Inline Images With React and Webpack

Webpack is great for building React applications, but did you know it can help you optimize app performance too? Webpack can automatically inline image data, improving performance by reducing the number of requests your page needs to make. Let’s learn how.

Image Inlining

Normally, every image on a webpage is a unique file that the browser must make a HTTP request to display. The more requests the browser needs to make, the longer page loading will take. Conversely, reducing the total number of requests will generally improve performance.

Image inlining reduces the number of additional requests needed for page load by embedding image data directly into the HTML or Javascript bundle. As with anything, this optimization doesn’t come for free: The total number of image requests is reduced at the price of a larger initial payload. This results in a performance sweet spot where small images are inlined, but larger images are loaded normally with an additional HTTP requests.

Hey! Don’t want to read all the in’s and outs of bending Webpack into shape? Jump to the final webpack configuration.

A Simple React App

To test image inlining we’ve created a simple React app:

A index.html file is used to bootstrap the single (compiled) JSX file:

Building React JSX Files with Webpack

First, Webpack and React dependencies need to be installed with NPM:

Webpack doesn’t compile JSX out of the box. Adding a module rule to webpack.config.js tells Webpack to use Babel when compiling JSX files. There is an additional rule for copying our bootstrap html to the output folder. More on "asset modules" later:

Running webpack from the command line compiles our JSX into an output folder named dist/, but there are some issues that need to be fixed.

Well, things ALMOST work. All our image tags are broken when we load the compiled app:

And no images were output to our dist/ folder:

Images aren’t displaying because Webpack doesn’t read the urls in src attributes. None of our image files are copied to the dist/ folder because Webpack assumed we are referencing an external dependency that it doesn't need to worry about. The JSX needs to import or require the images so that Webpack knows we need those images:

And, things are still broken. Webpack knows about our images now, but is throwing errors:

Webpack is failing because it doesn’t know what to do with our image files. Just as with JSX, we need a module rule telling Webpack what to do when it encounters an image.

Webpack 5 has a new feature called Asset Modules which is meant to replace the url-loader, file-loader, and raw-loader 's used in Webpack 4 for this situation. Just to get things working, we'll tell Webpack to always copy image files to the output folder:

Finally, webpack is including images in the compiled output:

And our page is working:

Webpack is copying our image files, but all the images are in the root of the output directory with un-intelligible hashes for names. Any more images and the dist/ folder is going to be a mess. We can tell the asset module to name our images better and place them in their own folder:

Now images are all in a separate folder with understandable names. Keeping the hash helps with cache busting:

Why is my dist directory so cluttered? As the webpack configuration has changed, we’ve manually cleaned up old files from the dist/ directory. By default, Webpack never removes old files that are no longer neeed. We can configure Webpack to automatically clean the dist folder each build:

Inline Small Images

Finally, images are working and we can do what we came here for: inline small images! Webpack’s base asset Asset Module automatically handles inlining for us. Webpack will inline anything under 8KB by default, but we can also explicitly set the size threshold. Images over the limit will be output into the dist/ folder as they were previously:

The smaller images are inlined and the output directory only contains larger images:

We can see the Base64 encoded images if we inspect the rendered page:

TLDR: Final Webpack Configuration

Now we’ve got Webpack automatically inlining images along with a few quality of life improvements. With everything working, our webpack configuration looks like this:


We successfully convinced Webpack to automatically inline our images. This reduced the number of network requests our page needs to make, but did it make our page faster? That’s the kind of question Request Metrics was built to answer. Try it out today to measure how your site performs for real users in production.

We’ve covered just one way to optimize images here, but there are many other ways to optimize image performance.

Originally published at



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Todd H. Gardner

I write simple software and tell bad jokes. Made @TrackJS @PubConf @RequestMetrics & @CroixHollow . Always do sober what you said you’d do drunk.