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?

Wedge

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.

Filar

Hi James, did you mean that you added sharp to your application bundle or, ran yarn add sharp as a part of the deploy command? – Merozoite

Hey Bishal, I ran yarn add sharp to add sharp to my project bundle and it sped up the images a lot for me. – Filar

Wow, that significantly improved the performance! Thank you James! – Willtrude

Big up man! Neat trick! – Caralie

Hey James, I tried adding the NEXT_SHARP_PATH with both/tmp/node_modules/sharp and /node_modules/sharp in the environment variables on Netlify but it still doesn't resolve the issue. Any clues on how to resolve that? :') – Shuttle

I'm not familiar with hosting a Next.js app on Netlify, but as far as I know, Next.js is preconfigured to use sharp when it is installed in the project dependencies; that means you should only need to install sharp. Here is a note in the hosting section of the docs that simply recommends to install sharp, and here is the error message when you don't use sharp in production, along with solutions on how to install. Good luck! – Filar

note for anyone new that sharp is installed by default when hosting the app on vercel. bottom of the page at nextjs.org/docs/messages/sharp-missing-in-production. your best friend is the sizes property on next/image, and if not, check out all of the other props available that could potentially help you nextjs.org/docs/pages/api-reference/components/image. – Contractor

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.

Clava

I think they've gone backward in some sections and specially performance. – Garfish

That isn't the problem. The problem is how long it takes Next to serve the image on demand. They would have been much better off offering a static generation option for each defined image/screen size at build time and referencing the static file. Then just serve with NGINX - no need for Node. – Duodecimal

doesn't next/image automatically load the image in acceptable format and optimize the load? – Flanagan

Answer 3

1. upgrade your next higher than 11.0.2-canary.20

2. yarn add sharp

3. beer

https://github.com/vercel/next.js/issues/23637#issuecomment-885631610

https://nextjs.org/blog/next-11-1#image-optimization

Frictional