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.
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.
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:
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:
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
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:
Using Asset Modules For Image Files
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
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:
Place All Images in Their Own Folder
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:
Automatically Clean Webpack’s Output Directory
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 needed. 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.