I am new to NextJS but I have a very good experience in ReactJS and Webpack. My question is NextJS offers a package 'next/image'. I want to know or understand very deeply that why I should use their package to load an image no the default img tag.
In their doc they say a line like this We can serve an optimized image like so. What do they mean by Optimized Image and Why ReactJS or any other package not doing that?
Basically it takes the heavy lifting of optimizing images from you. The docs say:
The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
So you do not have to worry whether the users browser will support a new image format like web/p, nextjs will automatically create a load of optimized images for all device heights and widths, including fallback formats like jpgs for older browsers.
They also optimize performance:
Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.
And care about SEO:
Images are always rendered in such a way as to avoid Cumulative Layout Shift, a Core Web Vital that Google is going to use in search ranking.
In conclusion, using next/image will make your life considerably easier by deploying a variety of techniques to improve image handling. It may not work for every image, but in that case you could take a normal <img /> tag and optimize it manually. But that will be an edge case.
next/image changes the image to WebP format when you request. WebP format reduces the size of the image while keeping the quality.
It also makes lazy loading which is great if the user doesn't see your entire page.
