I've built products on the web for 6 years. My favorite frontend framework? Next.js

One superpower of Next.js is the Image component. Out of the box you get:

• Size and format optimization

• Lazy loading

• Visual stability

Let's look further at all the benefits:

Image size based on device

Users browse the web using their phones, tablets, and laptops, yet images are still a one size fits all.

For example sites load 2000x2000 px images, but phones display it as 100x100 px.

Next optimizes image size based on the device it is shown to improve loading speed.

Load images on-demand

30% of images on web pages are outside of the initial viewport.

With no optimizations, your page will wait for an image even if it won't show it initially. Next doesn't load images that a user will not see on the initial page load until they scroll further down the page.

With this technique, page load speed is increased significantly.

Convert automatically to WebP

When fetching images, Next will convert automatically to WebP.

99.7% of images on websites don't use modern image formats like WebP.

According to Google’s own data, WebP compression is:

• 26% smaller than PNGs

• 25-34% smaller than JPEGs

Prevents layout shifting

Images without fixed width & height tend to jump around when the page is loaded.

This is bad for user experience and is associated with dissatisfaction with products. Google actually made Cumulative Layout Shift a Core Web Vital.

Next imposes a fixed size for all images to prevent this issue.

Serve stale while revalidating

Next.js caches all previously served & optimized images.

To improve loading speed further, Images are served stale and revalidated in the background.

6/7 Blur image preview while loading

To improve Time To Interactive (TTI), Next will show a blurred preview of your image to improve the experience for the end-user

https://web.dev/interactive/

7/7 Custom image loaders

If you already have image optimization implementation, you can integrate this seamlessly with custom loaders

Useful for:

• integration with your current CDN

• Easier to read code

TL;DR: Benefits of using Next.js Image

• Custom image loaders

• Prevents layout shifting

• Load images on-demand

• Image size based on device

• Serve stale while revalidating

• Convert automatically to WebP

• Blur image preview while loading

If you found this thread valuable:

1. Toss me a follow for more threads on advanced web development and SaaS → @ovstoica

2. DM me for any questions related to your SaaS

3. Here’s another similar thread you might enjoy:
https://twitter.com/ovstoica/status/1508328142317965319