Adding 'placeholder' and 'blurDataURL' props to Next Image and removing 'priority' prop, helped resolved this issue

<Image

  src={'/img/logo.png'}

  width='154'

  height='82'

  alt='logo'

  placeholder="blur"

  blurDataURL={'/img/logo.png'}

/>

I removed the layout tag, as I'm using Next.js version 13.1.1

If the above didn't work, make sure you're passing the sizes props

sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

Read more from the docs

A string that provides information about how wide the image will be at different breakpoints. The value of sizes will greatly affect performance for images using fill or which are styled to have a responsive size

For example, if you know your styling will cause an image to be full-width on mobile devices, in a 2-column layout on tablets, and a 3-column layout on desktop displays, you should include a sizes property such as the following:

import Image from 'next/image'

const Example = () => (

  <div className="grid-element">

    <Image

      src="/example.png"

      fill

      sizes="(max-width: 768px) 100vw,

              (max-width: 1200px) 50vw,

              33vw"

    />

  </div>

)

This example sizes could have a dramatic effect on performance metrics. Without the 33vw sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without sizes the user would download an image that's 9 times larger than necessary.