Next.js <Image /> component slow on Netlify, fast on Vercel

Question

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?

Answer 1

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