CODEWITHSUNDEEP
reactjsimagenext.js
Rostyk
Rostyk

Reputation: 1159

How to load big images faster | next.js

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"}
     />

enter image description here

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?

Upvotes: 0

Views: 3546

Answers (1)

Sahar Ebrahimi
Sahar Ebrahimi

Reputation: 115

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.

Upvotes: 1

Related Questions