{"id":28084,"date":"2023-05-19T07:00:00","date_gmt":"2023-05-19T14:00:00","guid":{"rendered":"http:\/\/Optimize-Images-in-a-Next.js-App-Using-NextImage-and-Custom-Loaders"},"modified":"2026-03-15T12:22:29","modified_gmt":"2026-03-15T19:22:29","slug":"optimize-images-in-a-next-js-app-using-nextimage-and-custom-loaders","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/optimize-images-in-a-next-js-app-using-nextimage-and-custom-loaders","title":{"rendered":"Optimize Images in Next.js Using Custom Loaders"},"content":{"rendered":"

Next.js<\/a> has a built-in Image Component that automatically optimizes images for your website or application. The default loader for Next.js applications uses the built-in Image Optimization API. This API optimizes images from anywhere on the web and serves them directly from the Next.js web server.<\/p>\n

\nNext.js provides a built-in next\/image<\/code> component that simplifies the process of optimizing and serving images in your applications. With next\/image<\/code>, you can automatically resize, optimize, and serve images in modern formats like WebP , based on the user’s requirements and device capabilities. This component replaces the traditional <img><\/code> tag, resulting in better performance and improved user experience.\n<\/p>\n

The Image Component provides Next\/image<\/code>, an extension of the HTML img element. It can automatically resize, optimize, and serve images in modern formats like WebP. You can specify a loader for Next\/image: this is a function that returns a URL string for the image. The parameters for the loader are: src<\/code>, width<\/code>, quality<\/code>.<\/p>\n

It\u2019s important to note that the term \u201cNextimage\u201d has multiple meanings. Beyond its use in Next.js, Nextimage is also known as a large format scanning software from Contex. This software, distinct from web development, offers capabilities like scanning to multipage PDF or TIF, batch mode for higher volume jobs, and real-time image adjustments.<\/p>\n

\nUnder the hood, the Next.js [Image Optimizer](https:\/\/cloudinary.com\/tools\/image-optimizer) provides on-demand image processing without the need for additional build steps, including support for both local and remote image sources, ensuring a seamless and efficient usage in Next.js applications.\n<\/p>\n

You can also use a loader to append a domain URL to a local image. This makes it possible to serve the image from a content delivery network (CDN). For example, you can configure next.config.js with the following to serve images via Cloudinary, an image management service with a built-in fast CDN:<\/p>\n

   module.exports = {\n      images: {\n        loader: 'cloudinary',\n        path: 'https:\/\/res.cloudinary.com\/ugwutotheeshoes\/image\/upload\/',\n      },\n    }\n<\/code><\/pre>\n
NextJS Image Loader Example: Adding the Power of Cloudinary<\/h2>\n
Cloudinary offers a media management solution to manage, optimize, transform, and deliver visual media. You can get Cloudinary for free for life<\/a>. You can sign up today and get started with using Cloudinary with the Next JS image loader.<\/p>\n
Cloudinary goes way beyond CDN: it can be used as a custom loader in Next.js to optimize rendered images (and lots more, of course). In the rest of this article, we\u2019ll show how to use Cloudinary to automatically optimize your image in Next.js.<\/p>\n<\/div>\n\n
Sandbox<\/h3>\n
This project is completed on CodeSandbox<\/a>, and you can fork it to get started quickly.<\/p>\n<\/div>\n\n\n  
\n    <\/iframe>\n  <\/div>\n\n\n
You can also find the source code on GitHub<\/a>.<\/p>\n
Prerequisites<\/h3>\n
To follow the steps in this article, you should have:<\/p>\n