next-image-loader

1. Write withImageLoader in next.config.js.

const { withImageLoader } = require('next-image-loader')

module.exports = withImageLoader({
  // write your next.js configuration values.
})

2. Create image-loader.config.js in your project root.

import { imageLoader } from 'next-image-loader/image-loader'

imageLoader.loader = ({ src, width, quality }) => {
  return 'https://res.cloudinary.com/demo/image/upload' +
         `/w_${width}/q_${quality || 75}/${src.replace(/^\//, '')}`
}
<Image src="/beach_huts.jpg" priority width={712} height={457} />beach_huts
<Image src="/beach_huts.jpg" width={712} height={457} quality={5} />beach_huts