use custom loader prop

components/MyImage.js

@@ -0,0 +1,12 @@
+import Image from "next/image";
+
+const myLoader = ({src, width, quality}) => {
+    return `https://res.cloudinary.com/rhnmht30/image/upload/w_${width},q_${
+        quality || 75
+        }/${src}`;
+};
+const MyImage = (props) => {
+    return <Image loader={myLoader} {...props} />;
+};
+
+export default MyImage;

pages/index.js

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import MyImage from "../components/MyImage";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
 
@@ -22,10 +23,23 @@ export default function Home() {
         </p>
 
         <div className={styles.grid}>
-          {[1, 2, 3, 4].map((n, i) => (
+          {[1, 2].map((n, i) => (
             <Image key={i} src={`/coffee-${n}.jpg`} width={640} height={426} />
           ))}
+          {[3, 4].map((n, i) => (
+            <MyImage
+              key={i}
+              src={`/coffee-${n}.jpg`}
+              width={640}
+              height={426}
+            />
+          ))}
         </div>
+        <p className={styles.description}>
+          First 2 images are optimised through netlify functions and last 2
+          images are optimised using cloudinary as the loader. See the
+          difference in performance by disabling cache and throttling network.
+        </p>
       </main>
 
       <footer className={styles.footer}>