Why Next . Js (PART 1: Image Optimization)

Before we start on why Next .Js, I wanted to state that i don’t know everything about Next .Js and so if you have anything you feel like its important to add feel free.

Image Optimization

Why I Started with Image Optimization?

Why did i start with this? Why not the SSR or the SEO friendliness? Personally this is because of my experience with Next .Js . I was a Create-React-App framework developer(Still I am) and every time my site had so many images its performance would be crazy slow. This would leave me frustrated and in search of ways to optimize the images.

One day as I was going through the React Docs I noticed that react has a number of frameworks and reading through them Next .Js was the solution to my problem all along.

Next .Js Image component includes a variety of built-in performance optimizations to help you achieve good Core Web Vitals.

Compare it to the old Img tag

If you are a front end-developer or even a developer I feel like html <img> tag is something you have come across.

The <img> tag is more of the <Image> in Next .js but with a unoptimized setting.

<img
  src="/img.png"
  alt="unoptimized image"
  width={100}
  height={50}
/>

If you used this code and checked your console you will realize that the rendered image takes its actual size.