34

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?
Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
Charles Braga
  • 488
  • 1
  • 4
  • 11

3 Answers3

41

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.

James Hooper
  • 1,475
  • 13
  • 24
  • 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? – bishal Sep 07 '21 at 06:18
  • 1
    Hey Bishal, I ran ```yarn add sharp``` to add ```sharp``` to my project bundle and it sped up the images a lot for me. – James Hooper Sep 08 '21 at 07:20
  • 1
    Wow, that significantly improved the performance! Thank you James! – Sanzhar Dan Dec 14 '21 at 09:19
  • Big up man! Neat trick! – DoneDeal0 Jun 21 '22 at 20:12
  • 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? :') – havingaheadache Jul 20 '23 at 19:11
  • 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](https://nextjs.org/docs/pages/building-your-application/deploying#nodejs-server) in the hosting section of the docs that simply recommends to install `sharp`, and [here is the error message](https://nextjs.org/docs/messages/sharp-missing-in-production) when you don't use `sharp` in production, along with solutions on how to install. Good luck! – James Hooper Jul 21 '23 at 10:09
29

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.

Gh05d
  • 7,923
  • 7
  • 33
  • 64
  • 7
    I think they've gone backward in some sections and specially performance. – Armin Torkashvand May 11 '21 at 17:17
  • 5
    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. – Will Squire May 28 '21 at 16:58
  • 2
    doesn't `next/image` automatically load the image in [acceptable format](https://nextjs.org/docs/api-reference/next/image#acceptable-formats) and optimize the load? – Gangula Jan 22 '22 at 07:13
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

Tim2.0
  • 109
  • 1
  • 2