Inlined images in Next.js
The slowest part of loading a web page is almost always user network. If you have small images like an app logo that you don't want to wait for on network, one tool in your toolbox is to inline these images using base64 encoding. This is how inlined images look in a browser: Desired usage Our goal is to be able to write the following if we want to have an inlined image: import logo from 'images/app-logo.inline.png' and the following for the regular URL (notice the .inline. part of the file name): import logo from 'images/app-logo.png' It can be later used as usual via: <Image src={logo}/> Implementation How do we do this in Next.js? We have to add url-loader to package.json and tweak next.config.js . // next.config.js module.exports = { // ... webpack: (config) => { // find the built-in loader const imageLoaderRule = config.module.rules.find( (rule) => rule.loader === 'n