Next.js: Feature request- Built-in image component

[Vadorequest]

Feature request

Is your feature request related to a problem? Please describe.

Working with images is clearly a complicated job. There are many edge cases to deal with and it get complex over times with all additional formats.

Also, there are a lot of things that can be done (optimisation, display resizing, a11y, etc.

My own "in house" solution were:

• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/assets/GraphCMSAsset.tsx
• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/assets/Logo.tsx

They did grow complicated over time and covered the following features:

• Optional link (is the image within a link element?)
  
  
  
  • Caring about security (noopener, etc.)
  
  
  • Caring about internal link vs external link (next/link vs a)
  
  
• Min/max width/height allowed for this image (i.e: Image in nav/footer shouldn't be bigger than X for proper display, image in product list should respect ratio but be always 150px width, etc.)
• Handle SVG differently

Some specialised libraries have been created

• https://github.com/twopluszero/next-images
• https://github.com/cyrilwanner/next-optimized-images _(doesn't work since v9.1)_

I'd like to know if Next.js intends to build something dedicated to Next.js, such as gatbsy has some gatsby-image

Describe the solution you'd like

A Next.js official built-in or lib for handling images

Describe alternatives you've considered

The above mentioned libs.

[KidkArolis]

I have been working on something to solve this for myself that might be of interest: https://github.com/humaans/next-img/. I agree, this is a fairly complicated area when developing sites with Next.js, I hope next-img can be of use to others or provide feedback to a potential native Next.js implementation.

[Vadorequest]

Thanks @KidkArolis for this. I believe you should add some doc about how your lib is different from the 2 above mentioned, because it's not so obvious what are pros/cons in comparison. 😉

Also, in my personal case, I'm loading images from a CMS which doesn't optimise them. I can't load them from the filesystem like most optimisers (like yours) do. It's not processed at runtime either but at build time, because I generate static pages. So, I believe it'd be possible to optimise those images during the build somehow. (but, it's probably complicated to achieve)

[Vadorequest]

FYI I read through this article today, and one of the most highlighted feature Gatsby provides and Next.js doesn't is an image lib.

https://medium.com/frontend-digest/which-to-choose-in-2020-nextjs-vs-gatsby-1aa7ca279d8a

[ijjk]

Hi, an RFC has recently been posted for this by the Chrome team so I'm going to close this in favor of that