Day-07

👉 Next.js Provide <Image /> component use for optimized image rendering

👉 <Image /> component required width and height are important

👉 default Image srcset set for different density different image show

👉 default Image srcset set for different density different image show

👉 if image compressed quality set passing quality value , by default set on 75

👉 if default image load not optimized required so set unoptimized value pass for prevent compression

👉 default next.js not allow to use external image source.

👉 if use external image source so configure on next.config.js add image site hostname

images : {
    remotePatterns: [
      {
        hostname: 'images.unsplash.com',
        protocol: 'https',
      }
    ]
  }

👉 Image component accept loader() fucntion also provied callback etc and revived props insidesrc, width and quality important to return src then set on Image src overwrite etc use for mainly use on image query based optimization accept like cloudinary,imagekit etc site

👉 Next.js background use sharp npm library for image optimization.