12

I have a relatively simple Next.js app and am using Next.js' <Image /> component to render two small images, as such:

<Row className="justify-content-center m-0 mt-3 text-center">
  <Col xs={4} md={3} lg={2} className="pr-xs-0  pr-sm-5 pl-0">
    <Image
      src="/assets/images/logo1.png"
      alt="Logo etc1"
      width={320}
      height={150}
    />
  </Col>
  <Col xs={4} md={3} lg={2} className="pl-xs-0 pr-0 pl-sm-5">
    <Image
      src="/assets/images/logo2.jpg"
      alt="Logo etc2"
      width={320}
      height={150}
    />
  </Col>
</Row>

These two small images (about 50Kb each) load in no time in development, but they take a ridiculous amount of time when deployed on Netlify (up to 4s!!).

Exactly the same repo, deployed to Vercel, renders the images in no time.

It's worth mentioning that using a normal html <img /> tag renders them super fast on both Vercel and Netlify, but I'm very puzzled to see how long such inconspicuous images take to load on Netlify when lazy loaded with Next.js' <Image /> component.

Is there anything I'm missing?

Guillermo Brachetta
  • 3,857
  • 3
  • 18
  • 36
  • Same issue here, have you somehow figured it out ? Is it because Netlify uses ipx` for processing Next images ? https://github.com/unjs/ipx/ – ozenK Oct 15 '22 at 20:38

1 Answers1

4

Vercel uses some kind of server in front of your app that is used to optimize images when using next/image.

Try using the Netlify plugin for Next.js https://github.com/netlify/netlify-plugin-nextjs. There are still some issues though : https://github.com/netlify/netlify-plugin-nextjs/issues/155

Komo
  • 2,043
  • 1
  • 22
  • 35
  • 2
    Thanks, but this was deployed a couple days ago and, quote: `As of v3.0.0, all new sites deployed to Netlify with Next.js will automatically install this plugin for a seamless experience deploying Next.js on Netlify!`. The plugin is already installed, proved by the fact that if I want to do that, it pops up `This plugin has already been installed on . Please choose another site or visit your selected site’s plugins page.` – Guillermo Brachetta Apr 01 '21 at 10:09