Image Optimization with Nextjs Image Component

First of all, this article is not a tutorial on how to use the Nextjs Image Component. This article aims to explain to non technical people that how nextjs is amazing about image optimization.

Next.js is one of the most popular React Framework out there. We really like to use it for our own projects and also for our clients' projects.

Apart from the other amazing features of Next.js, one of the most important feature is the Image Component. While using this component, you will be able to optimize your images for better performance easily!

Why we need to use it really?

When we are building a website, we usually use images in our website. Using big size images can slow down our website. And no body loves a slow website. In order to increase load speed of our website, we should consider about image optimization. Since it allows us to optimize our images for better performance easily, we should use it :)

Page load speed

Normally when we use an image on our web page, browser will load that image when a user visits that page even if they don't see that image yet. When we start using Image component, it will load the image only when it's visible on the screen. This is called lazy loading. Lazy loading is a great way to improve performance of our website. Since it will not load unnecessary images at the beginning, it will help to increase our website's load speed.

Visual Stability

Thanks to next js image component, we can avoid layout shift. More detailed information please click here.

Responsive images

Image component will resize your images according to the screen size. So you don't need to worry about responsive images anymore.