Add new 'raw' image layout

docs/api-reference/next/image.md

@@ -16,6 +16,7 @@ description: Enable Image Optimization with the built-in Image component.
 
 | Version   | Changes                                                                                           |
 | --------- | ------------------------------------------------------------------------------------------------- |
+| `v12.1.1` | `raw` layout added. Support added for `style` prop.                                               |
 | `v12.1.0` | `dangerouslyAllowSVG` and `contentSecurityPolicy` configuration added.                            |
 | `v12.0.9` | `lazyRoot` prop added.                                                                            |
 | `v12.0.0` | `formats` configuration added.<br/>AVIF support added.<br/>Wrapper `<div>` changed to `<span>`.   |
@@ -65,12 +66,13 @@ The `<Image />` component accepts a number of additional properties beyond those
 
 The layout behavior of the image as the viewport changes size.
 
-| `layout`              | Behavior                                                 | `srcSet`                                                                                                    | `sizes` |
-| --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- |
-| `intrinsic` (default) | Scale *down* to fit width of container, up to image size | `1x`, `2x` (based on [imageSizes](#image-sizes))                                                            | N/A     |
-| `fixed`               | Sized to `width` and `height` exactly                    | `1x`, `2x` (based on [imageSizes](#image-sizes))                                                            | N/A     |
-| `responsive`          | Scale to fit width of container                          | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` |
-| `fill`                | Grow in both X and Y axes to fill container              | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` |
+| `layout`              | Behavior                                                       | `srcSet`                                                                                                    | `sizes` | Has wrapper and sizer |
+| --------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- | --------------------- |
+| `intrinsic` (default) | Scale *down* to fit width of container, up to image size       | `1x`, `2x` (based on [imageSizes](#image-sizes))                                                            | N/A     | yes                   |
+| `fixed`               | Sized to `width` and `height` exactly                          | `1x`, `2x` (based on [imageSizes](#image-sizes))                                                            | N/A     | yes                   |
+| `responsive`          | Scale to fit width of container                                | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes                   |
+| `fill`                | Grow in both X and Y axes to fill container                    | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes                   |
+| `raw`                 | Insert the image element with no automatic layout behavior     | Behaves like `responsive` if the images has the `sizes` prop, and like `fixed` if it does not               | optional| no                    |
 
 - [Demo the `intrinsic` layout (default)](https://image-component.nextjs.gallery/layout-intrinsic)
   - When `intrinsic`, the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.
@@ -83,6 +85,9 @@ The layout behavior of the image as the viewport changes size.
   - When `fill`, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative.
   - This is usually paired with the [`objectFit`](#objectFit) property.
   - Ensure the parent element has `position: relative` in their stylesheet.
+- When `raw`, the image will be rendered as a single image element with no wrappers, sizers or other responsive behavior.
+  - If your image styling will change the size of a `raw` image, you should include the `sizes` property for proper image serving.
+  - The other layout modes are optimized for performance and should cover nearly all use cases. It is recommended to try to use those modes before using `raw`.
 - [Demo background image](https://image-component.nextjs.gallery/background)
 
 ### loader
@@ -121,7 +126,7 @@ const MyImage = (props) => {
 
 A string that provides information about how wide the image will be at different breakpoints. Defaults to `100vw` (the full width of the screen) when using `layout="responsive"` or `layout="fill"`.
 
-If you are using `layout="fill"` or `layout="responsive"`, it's important to assign `sizes` for any image that takes up less than the full viewport width.
+If you are using `layout="fill"`, `layout="responsive"`, or `layout="raw"` it's important to assign `sizes` for any image that takes up less than the full viewport width.
 
 For example, when the parent element will constrain the image to always be less than half the viewport width, use `sizes="50vw"`. Without `sizes`, the image will be sent at twice the necessary resolution, decreasing performance.
 
@@ -162,6 +167,12 @@ Try it out:
 
 In some cases, you may need more advanced usage. The `<Image />` component optionally accepts the following advanced properties.
 
+### style
+
+Allows [passing CSS styles](https://reactjs.org/docs/dom-elements.html#style) to the underlying image element.
+
+Note that all `layout` modes other than `"raw"` apply their own styles to the image element, and these automatic styles take precedence over the `style` prop.
+
 ### objectFit
 
 Defines how the image will fit into its parent container when using `layout="fill"`.
@@ -285,7 +296,6 @@ size, or format. Defaults to `false`.
 Other properties on the `<Image />` component will be passed to the underlying
 `img` element with the exception of the following:
 
-- `style`. Use `className` instead.
 - `srcSet`. Use
   [Device Sizes](#device-sizes)
   instead.

docs/basic-features/image-optimization.md

@@ -181,15 +181,15 @@ The image component has several different [layout modes](/docs/api-reference/nex
 
 **Target the image with className, not based on DOM structure**
 
-Regardless of the layout mode used, the Image component will have a consistent DOM structure of one `<img>` tag wrapped by exactly one `<span>`. For some modes, it may also have a sibling `<span>` for spacing. These additional `<span>` elements are critical to allow the component to prevent layout shifts.
+For most layout modes, the Image component will have a DOM structure of one `<img>` tag wrapped by exactly one `<span>`. For some modes, it may also have a sibling `<span>` for spacing. These additional `<span>` elements are critical to allow the component to prevent layout shifts. Images with `layout="raw"` will rendered without any wrapper elements or sizers.
 
 The recommended way to style the inner `<img>` is to set the `className` prop on the Image component to the value of an imported [CSS Module](/docs/basic-features/built-in-css-support.md#adding-component-level-css). The value of `className` will be automatically applied to the underlying `<img>` element.
 
 Alternatively, you can import a [global stylesheet](/docs/basic-features/built-in-css-support#adding-a-global-stylesheet) and manually set the `className` prop to the same name used in the global stylesheet.
 
 You cannot use [styled-jsx](/docs/basic-features/built-in-css-support.md#css-in-js) because it's scoped to the current component.
 
-You cannot use the `style` prop because the `<Image>` component does not pass it through to the underlying `<img>`.
+> An additional `raw` layout mode is provided which removes the wrapper and sizer elements. This mode still requires `height` and `width` and is recommended only for advanced use cases that aren't covered by the primary layout modes.
 
 **When using `layout='fill'`, the parent element must have `position: relative`**