The image tag has been with us since the beginning of HTML. I am sure, stats can prove that it is one of the most used tag cross web. There is a famous saying that “A picture is worth a thousand word”. And the world wide web is full of images. However, not much was done to the image tag from what it was 10 years back right? According to Next JS, 50% of total bytes on the web is taken by Images only.

Next JS mentions that some of the common problems on the web with images like:

1. Half of the images are more than 1 MB of size. And, no matter where that image is being showed, it can be optimized for faster loading.
2. Now a days, websites and their images are seen on Desktop, Laptop and Mobile phones. However, images are not optimized based on the device. There are still situations where mobile devices actually load images which were for the desktop version of the website.
3. A lot of images which are being loaded by the browsers are not even visible on the viewport, and so there is for sure room for improvement.
4. Images which doesn’t have width and height jumps around a lot which results in layout shift.
5. A huge percentage of websites (around 99.7%) are not using modern image formats like WebP.

To handle these problems, we can do a lot of improvements to how an image will show up on the website like image compression, optimization of images for different devices, lazy loading of images and what not. But all these can only be done when the developer is writing additional code for it. Like, typically image compression and optimization can be done on the server, through some service like Cloudinary or something similar. We can use JavaScript library to lazy load images etc.

However, in NextJS there is a new Image component which really takes away a lot of these headaches from the mind of the developer. With this component, NextJS is providing a lot of stuff out of the box which means the sites which are using NextJS and this image component will be a lot faster and more optimized. They will load images only when they are visible on the viewport, optimize quality of image etc. And, developers can focus more on the core of their product / website and not worry about these things.

Along with Google Chrome team, Next JS has come up with a lot of improvements which you can find in this link. I am very excited about this new way of loading image and I would like to know what you feel about this. Comment on Twitter, my handle is @amitavroy7. And, if you are more of a visual learner, then you can look at my YouTube video where I show how you can use the image component and it’s advantages.