Image component is fundamentally flawed

[OskarGroth]

Let's say I have a website that displays an image, and I want to use NextJS Image component to get caching, layout, placeholder, lazy loading, optimization, etc.

The website needs to:

• Display different images on Desktop and Mobile
• Support Retina (1x, 2x) versions
• Be able to specify a compression quality in which to load these images

This is required pretty much for any real-world page layout that isn't a Hello World blog example with a hero cover image. Basically any scenario where the developer actually cares to present the image in the optimal size. Take www.apple.com for example.

In Desktop mode:

(hero_iphone_13pro__large_1x, hero_iphone_13pro__large_2x)

In Mobile mode:

(hero_iphone_13pro__mediumtall_1x, hero_iphone_13pro__mediumtall_2x)

In plain old HTML this is as easy as:

<picture id="overview-performance-screen-processing-1"
    <source srcset="...mediumtall.jpg 1x, ...mediumtall.jpg 2x" media="(max-width:734px)">
    <source srcset="...large.jpg 1x, ...large_2x.jpg 2x" media="(min-width:0px)">
    <img src="....large.jpg">
</picture>

But with the NextJS Image component... I've spent a whole day trying to use the NextJS Image component for this purpose, and concluded that it simply isn't possible. The component has zero functionality to support this, in my opinion, baseline use-case for a web image component. Not to mention the series of layout issues that present themselves trying to use it for even basic, non-retina images.

If it is impossible to achieve crisp artwork while using this, what is the point of the component at all?

This has easily been my worst experience trying to develop with NextJS so far. In my opinion, the Image component is over-engineered without getting the fundamentals right. I'd be happy to be proven wrong.

[PaulRBerg]

I agree, and it also very difficult to use it in Tailwind.

[thawancomt]

NextJS Image component is in nutshell, a TRASH

[PaulRBerg]

ha, it's not that bad — but the DX is rough, no argument there. The part that bit me hardest is sizes: if you don't set it, Next just assumes 100vw, so even a tiny 64px avatar can end up shipping a huge image. And writing sizes by hand means maintaining media-query strings that just duplicate what your CSS already says.

I got tired of that and built tw-next-image — it parses the Tailwind classes you already put on the image and infers the correct sizes for you:

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

It won't solve everything in this thread (art direction / different images per breakpoint still needs <picture>), but it kills the most tedious part of using next/image in a responsive Tailwind layout.