Next/Image's components are too slow to appear

Question

I'm using Next.js 10.0.7 and next-images 1.7 and big images take some seconds to appear.

I'm using the components correctly, you can see bellow, but I think that there is a solution to my problem.

<Image
   height="600"
   width="800"
   src={
     'https://myImageURL.png'
   }
   alt="my image"
/>

Some questions:

• If I convert all images to .webp images is be showned faster?
• Is there a solution to this problem?

Answer 1

I've been having trouble with the same issue, mostly in Slider components. Basically, because the image is off-screen until the Slider moves it into view, there is a delay and it doesn't show for a short time, which looks nasty.

Solution: Add the sharp package. The problem comes from the default image processor that NextJS uses. I don't know if this is good for OP, but in my case, I hadn't fully read the docs. There is a tip that states:

The next/image component's default loader uses the 'squoosh' library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional sharp library by running

yarn add sharp

in your project directory. If sharp is already installed but can't be resolved you can manually pass the path to it via the NEXT_SHARP_PATH environment variable e.g. NEXT_SHARP_PATH=/tmp/node_modules/sharp

After adding sharp, my images were processed much faster and there is no noticeable delay anymore. I would try adding this before adding priority={true} to every image, as that will impact the site performance.

Answer 2

The problem is that the default behavior of the Image Component is lazy loading. You can change this behavior to eager by either adding the loading prop like this: loading="eager" or by adding priority={true}.

The recommended way is using priority.

About the image format. Webp is smaller than png, so it will load faster.