Very confused about why the <Image/> component works the way it does

[chrispytoes]

I've been working with next.js for a few months now and I love it. However, I have a few gripes about the Image component system that don't really make sense to me:

1. You must specify both width and height unless the image is using layout="fill". This really doesn't make any sense to me. In what world would someone want to explicitly set the width AND height of an image? Images should only be sized using width OR height to maintain aspect ratio. Why am I not allowed to do this?
2. As a result of the previous point, I have no choice but to use layout="fill" and objectFit="cover", with a relative wrapper div around every single one to size them without warping. This is only a band-aid solution though because it is most likely going to introduce some clipping on the edges of the image if the parent is not exactly the right size.
3. None of my images are being resized server-side, ever. Next.js is always using the largest possible size for all images. I have not changed any of my image size settings in next.config.js. I'm just struggling to make it work at all using the default settings. If I understand correctly, next.js uses a maximum image size of 100vw. So why is it that on my 1920px wide screen, I see images 3000px or larger being loaded in the Chrome inspector Network tab?

Sorry if this sounds like a rant but I've honestly been scouring the internet almost every day since I started with next.js and I've still never been able to find any straightforward, concise, and detailed documentation on how next.js images work. The official documentation for the next/image package seems oversimplified and shallow to me. I've honestly learned more about the image system from other people's posts online than from the official documentation.

[FDiskas]

I would add to the point list: #19914 (comment)

[chrispytoes]

@FDiskas I can think of a few reasons why they prefer to generate images in realtime:

• Image URLs might not be known at build time, they could be generated from any arbitrary code.
• Images can be loaded from external URLs, such as a CDN or 3rd-party API.
• Simply having a really large number of images would take forever to build the project.

This isn't actually a pain point of mine. In-fact, this is the reason I'm using Next.js over Gatsby.js in the first place. I switched away from Gatsby.js because it must compile and generate all content needed for the entire site at once. This can take a very long time on large websites, and it can become a big problem when the site needs to be rebuilt for changing data very often.

For example, the app I'm building now pulls all its data and images from an API which needs to stay up to date very often. So in this case, it would be physically impossible for me to pre-optimize all my images because they are not known until someone navigates to the page which displays it.

If you want all your images and pages pre-generated all at once, Next.js has a static rendering mode that can do exactly what you describe. However, this will forfeit your ability to use dynamic server-side rendering. If you're looking for something designed from the ground up specifically for generating your entire site at build time, check out Gatsby.js.

[RednarRosique]

I agree 100% with all the points you've made, and I have also scoured the internet in search of answers, but my conclusion so far is that as of today it's impossible to preserve aspect ratio by just supplying either width OR height. I hope someone can solve this problem in the future because it seems like a pretty common use case to me.

Did you end up just using <img> ? Or the band-aid solution of a relative parent div? The latter is not great because as you mentioned you have to make sure the parent has the right size for the image. For instance for something like this:

<div style={{ position: 'relative', width: '300px', height: '500px' }}>
      <Image
        alt="Mountains"
        src={mountains}
        layout="fill"
        objectFit="none"
        quality={100}
      />
    </div>

We would still have to find the right size for the parent div. Giving either width OR height to the div won't solve the problem of getting a responsive image that preserves the aspect ratio.

[chrispytoes]

I haven't make any new discoveries on this and it's still an issue to this day. I'm using a relative wrapper like in your example for most images, and standard <img> tags for smaller icons/logos that don't need responsive sizes.

Glad to see I'm not the only person wondering about this. Nobody else on the internet seems to be talking about this issue and it seems like a pretty obviously glaring problem to me.

[zain-bin-ramzan]

This is how you can preserve the aspect ratio

  <div className="relative aspect-square">
        <Image
          src={'path to image can be image form external server like aws '}
          alt="Our Mission"
          fill
          className="object-cover"
        />
      </div>

[mkrkelj1]

I agree with you and wanted to share this discussion which might help you find a solution.

[PaulRBerg]

For any Tailwind user still struggling with this, I built a library called tw-next-image that exports a SmartImage component that can infer sizes from Tailwind classes:

  // ❌ Before:
  <Image
    src="/avatar.webp"
    sizes="(min-width: 1024px) 120px, 100px"
    className="size-25 lg:size-30"
  />

// ✅ After:
  <SmartImage src="/avatar.webp" className="size-25 lg:size-30" />
  // → sizes="(min-width: 1024px) 120px, 100px"

It wraps next/image with fill mode, parses your Tailwind utilities, and generates the correct sizes. The package also exports a standalone inferImageSizes() function if you don't need the component.

• Source code: https://github.com/PaulRBerg/tw-next-image
• npm package: npm install tw-next-image