How to load big images faster | next.js

Question

It is a full screen image.

1. I use Image component
2. format of the image: wepb
3. info about the image in the photo below

What I tried:

1. used priority={true} next.js priority in image component

2. tried to compress image, its size, resolution but it still loads slow

    <Image src={"/images/video/bg-image.webp"} layout={"fill"} objectFit={"cover"} alt={"background image"} />

The first time I go to the page, I have to wait at least 5-10 seconds to load an image after that the image loads fast. How can I increase loading speed of the image?

Answer 1

first of all you should import Image from next/image not react, If you are testing it at local pay attention for each refresh page you have a request and it is slow, but in production mode it is different and so fast. If you test it online Next.js catches images and have an lazy loading algorithm for the first loading and slow loading may be related to your infrastructures of the web. Also I recommend you use Next.js 12.