Request for feedback: Image Component ‘Raw’ layout

[atcastle]

Starting with version 12.1.1-canary.11, I’ve added experimental support for a new image component mode layout mode called “raw”. This mode removes the spacers and styling associated with next/image’s responsive behavior, rendering a “raw” image element with no styling. The component still requires height and width information in order to prevent layout shift, and will pass those attributes to the underlying image unless you also provide a sizes attribute, which indicates that the image is expected to behave responsively.

I have also enabled the use of the style attribute in all image modes to pass style properties directly to the underlying image element. Be aware that in layout modes other than ”raw”, any styling required for that layout mode will take precedence over provided styling, if there’s a conflict.

I would like to gather feedback on the new ”raw” layout mode before we move it out of experimental. I encourage anyone who’s had trouble getting the next/image component styled the way they want to try the experimental ”raw” layout and tell me how it worked.

See this section in the documentation for how to enable the experimental layout mode.

---

Here’s an example template for responses, though any feedback is appreciated:

1. What layout / styling behavior were you previously unable to accomplish with next/image?
2. What layout modes did you try?
3. Did the experimental ”raw” layout mode solve your problem?
 - If not, what changes would allow it to solve the problem?
4. Do you have any additional feedback about the new mode or its documentation?

[Redskinsjo]

Hi, I am using Next with Typescript and it seems that layout="raw" causes an error because Typescript doesn't recognize "raw", as I am trying to position the Image as relative.

in VSCode : Type '"raw"' is not assignable to type '"fixed" | "fill" | "intrinsic" | "responsive" | undefined'.ts(2322)
in Browser : Error: Image with src has invalid "layout" property. Provided "raw" should be one off ill,fixed,intrinsic,responsive,undefined.

[stefanprobst]

yup, seeing the same error:

[styfle]

You'll need to update to Next.js 12.1.1 or newer: npm i next@latest or yarn add next@latest

[OskarGroth]

Seems to be working well with TypeScript here.
This is a great addition, it solves many issues with layout that I've experienced while using Image. But still doesn't cover the one use case I think the Image component lacks the most.

What layout / styling behavior were you previously unable to accomplish with next/image?

The image component desperately needs a way to define art direction. That is, to be able to provide different images at different breakpoints.

i.e, something that matches the following:

<picture>
    <source srcset="mobile.jpg 1x, mobile_2x.jpg 2x" media="(max-width:734px)">
    <source srcset="desktop.jpg 1x, desktop_2x.jpg 2x" media="(min-width:0px)">
    <img src="desktop.jpg">
</picture>

What layout modes did you try?
Did the experimental ”raw” layout mode solve your problem?
 - If not, what changes would allow it to solve the problem?

I've tried all layout modes. The problem stems from the fact that the developer has very limited control over the generated srcsets.

Either you use responsive or fill and have your image generated in like 10 different sizes (none of which are relevant because I only want my image generated in 1x or 2x size). Or you define width & height while using fixed or raw and get precise 1x and 2x sizes. But there is no way to do that while also defining a different image for a different viewport.

I think that it should be possible to allow for the user to supply alternative src (with separate width and height for each) for alternative media breakpoints.

Do you have any additional feedback about the new mode or its documentation?

The documentation lacks a demo, instead there is a link to "Demo Background Image" which is a bit confusing since it doesn't seem to be using raw.

[pdkn]

Take a look how Imgix handles picture tag for art direction https://reactjsexample.com/react-component-to-display-imgix-images/. Something like this is desperately needed in nextjs.

<Picture>
  <Source
    src={src}
    width={400}
    htmlAttributes={{ media: "(min-width: 768px)" }}
  />
  <Source
    src={src}
    width={200}
    htmlAttributes={{ media: "(min-width: 320px)" }}
  />
  <Imgix src={src} width={100} />
</Picture>