Add Sec-CH-Width

files/en-us/web/http/guides/content_negotiation/index.md

@@ -50,13 +50,13 @@ The `Accept` header is defined by the browser, or any other user agent, and can
 > [!NOTE]
 > This is part of an **experimental** technology called _Client Hints_. Initial support comes in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later.
 
-The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that the server can use to select an appropriate response. Valid values are:
+The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that the server can use to select an appropriate response. Example valid values include:
 
-| Value            | Meaning                                                                                                                                                                                                            |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `Device-Memory`  | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. |
-| `Viewport-Width` | Indicates the layout viewport width in CSS pixels.                                                                                                                                                                 |
-| `Width`          | Indicates the resource width in physical pixels (in other words the intrinsic size of an image).                                                                                                                   |
+| Value                   | Meaning                                                                                                                                                                                                            |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Sec-CH-Device-Memory`  | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. |
+| `Sec-CH-Viewport-Width` | Indicates the layout viewport width in CSS pixels.                                                                                                                                                                 |
+| `Sec-CH-Width`          | Indicates the resource width in physical pixels (in other words the intrinsic size of an image).                                                                                                                   |
 
 ### The `Accept-Encoding` header
 

files/en-us/web/http/reference/headers/accept-ch/index.md

@@ -40,12 +40,12 @@ Accept-CH: <ch-header-one>, <ch-header-two>
 
 ### Client hint response headers
 
-The following response headers indicate that the server accepts `Viewport-Width` and `Width` [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) in subsequent requests.
+The following response headers indicate that the server accepts `Sec-CH-Viewport-Width` and `Sec-CH-Width` [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) in subsequent requests.
 The {{HTTPHeader("Vary")}} header indicates which values were used to [vary the response](/en-US/docs/Web/HTTP/Guides/Client_hints#caching_and_client_hints) based on the accepted client hints.
 
 ```http
-Accept-CH: Viewport-Width, Width
-Vary: Viewport-Width, Width
+Accept-CH: Sec-CH-Viewport-Width, Sec-CH-Width
+Vary: Sec-CH-Viewport-Width, Sec-CH-Width
 ```
 
 ## Specifications

files/en-us/web/http/reference/headers/content-dpr/index.md

@@ -67,7 +67,7 @@ See the [`DPR`](/en-US/docs/Web/HTTP/Reference/Headers/DPR#examples) header exam
 
 ## See also
 
-- Device client hints
+- Device and responsive image client hints
   - {{HTTPHeader("Sec-CH-Device-Memory")}}
   - {{HTTPHeader("Sec-CH-DPR")}}
   - {{HTTPHeader("Sec-CH-Viewport-Height")}}

files/en-us/web/http/reference/headers/device-memory/index.md

@@ -13,7 +13,7 @@ sidebar: http
 {{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}}
 
 > [!WARNING]
-> The `Device-Memory` header was renamed to {{HTTPHeader("Sec-CH-Device-Memory")}} and the new name is now preferred.
+> The `Device-Memory` header was standardized as {{HTTPHeader("Sec-CH-Device-Memory")}} and the new name is now preferred.
 
 The HTTP **`Device-Memory`** {{Glossary("request header")}} is used in [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) to indicate the approximate amount of available RAM on the client device, in gigabytes.
 The header is part of the {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}}.
@@ -78,11 +78,12 @@ Device-Memory: 1
 - {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}}
 - {{DOMxRef("Navigator.deviceMemory")}}
 - {{DOMxRef("WorkerNavigator.deviceMemory")}}
-- Device client hints
+- Device and responsive image client hints
   - {{HTTPHeader("Sec-CH-Device-Memory")}}
   - {{HTTPHeader("Sec-CH-DPR")}}
   - {{HTTPHeader("Sec-CH-Viewport-Height")}}
   - {{HTTPHeader("Sec-CH-Viewport-Width")}}
+  - {{HTTPHeader("Sec-CH-Width")}}
   - {{HTTPHeader("DPR")}} {{deprecated_inline}}
   - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}
   - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}}

files/en-us/web/http/reference/headers/dpr/index.md

@@ -13,7 +13,7 @@ sidebar: http
 {{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}}
 
 > [!WARNING]
-> The `DPR` header was renamed to {{HTTPHeader("Sec-CH-DPR")}} and the new name is now preferred.
+> The `DPR` header was standardized as {{HTTPHeader("Sec-CH-DPR")}} and the new name is now preferred.
 
 The HTTP **`DPR`** {{Glossary("request header")}} provides [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints) about the client device pixel ratio (DPR).
 This ratio is the number of physical device pixels corresponding to every {{Glossary("CSS pixel")}}.
@@ -81,11 +81,12 @@ Content-DPR: 2.0
 
 ## See also
 
-- Device client hints
+- Device and responsive image client hints
   - {{HTTPHeader("Sec-CH-DPR")}}
   - {{HTTPHeader("Sec-CH-Device-Memory")}}
   - {{HTTPHeader("Sec-CH-Viewport-Height")}}
   - {{HTTPHeader("Sec-CH-Viewport-Width")}}
+  - {{HTTPHeader("Sec-CH-Width")}}
   - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}
   - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}
   - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}}

files/en-us/web/http/reference/headers/index.md

@@ -419,7 +419,7 @@ The [UA client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#user_agent_client
 > [!NOTE]
 > User-agent client hints are not available inside [fenced frames](/en-US/docs/Web/API/Fenced_frame_API) because they rely on [permissions policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy) delegation, which could be used to leak data.
 
-#### Device client hints
+#### Device and responsive image client hints
 
 - {{HTTPHeader("Sec-CH-Device-Memory")}} {{experimental_inline}}
   - : Approximate amount of available client RAM memory. This is part of the [Device Memory API](/en-US/docs/Web/API/Device_Memory_API).
@@ -429,17 +429,19 @@ The [UA client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#user_agent_client
   - : Request header provides the client's layout viewport height in {{Glossary("CSS pixel","CSS pixels")}}.
 - {{HTTPHeader("Sec-CH-Viewport-Width")}} {{experimental_inline}}
   - : Request header provides the client's layout viewport width in {{Glossary("CSS pixel","CSS pixels")}}.
+- {{HTTPHeader("Sec-CH-Width")}} {{experimental_inline}}
+  - : Request header provides the image's width in {{Glossary("CSS pixel","CSS pixels")}}.
 
-##### Deprecated device client hints
+##### Deprecated device and responsive image client hints
 
 - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} {{non-standard_inline}}
-  - : Renamed to {{HTTPHeader("Sec-CH-Device-Memory")}}
+  - : Standardized as {{HTTPHeader("Sec-CH-Device-Memory")}}
 - {{HTTPHeader("DPR")}} {{deprecated_inline}} {{non-standard_inline}}
-  - : Renamed to {{HTTPHeader("Sec-CH-DPR")}}
+  - : Standardized as {{HTTPHeader("Sec-CH-DPR")}}
 - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} {{non-standard_inline}}
-  - : Renamed to {{HTTPHeader("Sec-CH-Viewport-Width")}}
+  - : Standardized as {{HTTPHeader("Sec-CH-Viewport-Width")}}
 - {{HTTPHeader("Width")}} {{deprecated_inline}} {{non-standard_inline}}
-  - : Renamed to `Sec-CH-Width`
+  - : Standardized as {{HTTPHeader("Sec-CH-Width")}}
 
 #### Network client hints
 

files/en-us/web/http/reference/headers/sec-ch-device-memory/index.md

@@ -74,7 +74,7 @@ Sec-CH-Device-Memory: 1
 - {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}}
 - {{DOMxRef("Navigator.deviceMemory")}}
 - {{DOMxRef("WorkerNavigator.deviceMemory")}}
-- Device client hints
+- Device and responsive image client hints
   - {{HTTPHeader("Sec-CH-DPR")}}
   - {{HTTPHeader("Sec-CH-Viewport-Height")}}
   - {{HTTPHeader("Sec-CH-Viewport-Width")}}

files/en-us/web/http/reference/headers/sec-ch-dpr/index.md

@@ -68,7 +68,7 @@ Sec-CH-DPR: 2.0
 
 ## See also
 
-- Device client hints
+- Device and responsive image client hints
   - {{HTTPHeader("Sec-CH-Device-Memory")}}
   - {{HTTPHeader("Sec-CH-Viewport-Height")}}
   - {{HTTPHeader("Sec-CH-Viewport-Width")}}

files/en-us/web/http/reference/headers/sec-ch-viewport-height/index.md

@@ -70,7 +70,7 @@ Sec-CH-Viewport-Height: 480
 ## See also
 
 - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com)
-- Device client hints
+- Device and responsive image client hints
   - {{HTTPHeader("Sec-CH-Device-Memory")}}
   - {{HTTPHeader("Sec-CH-DPR")}}
   - {{HTTPHeader("Sec-CH-Viewport-Width")}}

files/en-us/web/http/reference/headers/sec-ch-viewport-width/index.md

@@ -70,7 +70,7 @@ Sec-CH-Viewport-Width: 320
 ## See also
 
 - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com)
-- Device client hints
+- Device and responsive image client hints
   - {{HTTPHeader("Sec-CH-Device-Memory")}}
   - {{HTTPHeader("Sec-CH-DPR")}}
   - {{HTTPHeader("Sec-CH-Viewport-Height")}}

files/en-us/web/http/reference/headers/sec-ch-width/index.md

@@ -0,0 +1,76 @@
+---
+title: Sec-CH-Width header
+short-title: Sec-CH-Width
+slug: Web/HTTP/Reference/Headers/Sec-CH-Width
+page-type: http-header
+browser-compat: http.headers.Sec-CH-Width
+sidebar: http
+---
+
+{{SecureContext_header}}
+
+The HTTP **`Sec-CH-Width`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) which indicates the desired resource width in physical pixels — the intrinsic size of an image. The provided pixel value is a number rounded to the smallest following integer (i.e., ceiling value).
+
+The hint is only sent on image requests.
+
+The hint allows the client to request a resource that is optimal for both the screen and the layout: taking into account both the density-corrected width of the screen and the image's extrinsic size within the layout.
+
+If the desired resource width is not known at the time of the request or the resource does not have a display width, the `Sec-CH-Width` header field can be omitted.
+If the `Sec-CH-Width` header appears more than once in a message the last occurrence is used.
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">Header type</th>
+      <td>
+        {{Glossary("Request header")}},
+        <a href="/en-US/docs/Web/HTTP/Guides/Client_hints">Client hint</a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("Forbidden request header")}}</th>
+      <td>No</td>
+    </tr>
+  </tbody>
+</table>
+
+## Syntax
+
+```http
+Width: <number>
+```
+
+## Directives
+
+- `<number>`
+  - : The width of the resource in physical pixels, rounded up to the nearest integer.
+
+## Examples
+
+The server first needs to opt in to receive the `Sec-CH-Width` header by sending the response headers {{HTTPHeader("Accept-CH")}} containing `Sec-CH-Width`.
+
+```http
+Accept-CH: Sec-CH-Width
+```
+
+Then on subsequent image requests the client might send `Sec-CH-Width` header back:
+
+```http
+Width: 1920
+```
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Device and responsive image client hints
+  - {{HTTPHeader("Width")}} {{deprecated_inline}}
+  - {{HTTPHeader("Sec-CH-Viewport-Width")}}
+  - {{HTTPHeader("Sec-CH-Viewport-Height")}}
+  - {{HTTPHeader("Sec-CH-Device-Memory")}}
+  - {{HTTPHeader("Sec-CH-DPR")}}
+- {{HTTPHeader("Accept-CH")}}
+- [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} header
+- [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com)

files/en-us/web/http/reference/headers/viewport-width/index.md

@@ -13,7 +13,7 @@ sidebar: http
 {{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}}
 
 > [!WARNING]
-> The `Viewport-Width` header was renamed to {{HTTPHeader("Sec-CH-Viewport-Width")}} and the new name is now preferred.
+> The `Viewport-Width` header was standardized as {{HTTPHeader("Sec-CH-Viewport-Width")}} and the new name is now preferred.
 
 The HTTP **`Viewport-Width`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints) which provides the client's layout viewport width in {{Glossary("CSS pixel", "CSS pixels")}}.
 The value is rounded up to the smallest following integer (i.e., ceiling value).
@@ -74,11 +74,12 @@ Viewport-Width: 320
 ## See also
 
 - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com)
-- Device client hints
+- Device and responsive image client hints
   - {{HTTPHeader("Sec-CH-Viewport-Width")}}
   - {{HTTPHeader("Sec-CH-Viewport-Height")}}
   - {{HTTPHeader("Sec-CH-Device-Memory")}}
   - {{HTTPHeader("Sec-CH-DPR")}}
+  - {{HTTPHeader("Sec-CH-Width")}}
   - {{HTTPHeader("DPR")}} {{deprecated_inline}}
   - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}
   - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}

files/en-us/web/http/reference/headers/width/index.md

@@ -13,10 +13,12 @@ sidebar: http
 {{Deprecated_Header}}{{SecureContext_header}}{{Non-standard_Header}}
 
 > [!WARNING]
-> The `Width` header was removed from the client hints specification in [draft-ietf-httpbis-client-hints-07](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-07). The proposed replacement is [`Sec-CH-Width`](https://wicg.github.io/responsive-image-client-hints/#sec-ch-width) (Responsive Image Client Hints).
+> The `Width` header was standardized as {{HTTPHeader("Sec-CH-Width")}} and the new name is now preferred.
 
 The HTTP **`Width`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) which indicates the desired resource width in physical pixels — the intrinsic size of an image. The provided pixel value is a number rounded to the smallest following integer (i.e., ceiling value).
 
+The hint is only sent on image requests.
+
 The hint allows the client to request a resource that is optimal for both the screen and the layout: taking into account both the density-corrected width of the screen and the image's extrinsic size within the layout.
 
 If the desired resource width is not known at the time of the request or the resource does not have a display width, the `Width` header field can be omitted.
@@ -57,7 +59,7 @@ The server first needs to opt in to receive the `Width` header by sending the re
 Accept-CH: Width
 ```
 
-Then on subsequent requests the client might send `Width` header back:
+Then on subsequent image requests the client might send `Width` header back:
 
 ```http
 Width: 1920
@@ -69,16 +71,12 @@ Width: 1920
 
 ## See also
 
-- Device client hints
+- Device and responsive image client hints
+  - {{HTTPHeader("Sec-CH-Width")}}
   - {{HTTPHeader("Sec-CH-Viewport-Width")}}
   - {{HTTPHeader("Sec-CH-Viewport-Height")}}
   - {{HTTPHeader("Sec-CH-Device-Memory")}}
   - {{HTTPHeader("Sec-CH-DPR")}}
-  - {{HTTPHeader("DPR")}} {{deprecated_inline}}
-  - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}
-  - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}
-  - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}}
-  - {{HTTPHeader("Width")}} {{deprecated_inline}}
 - {{HTTPHeader("Accept-CH")}}
 - [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} header
 - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com)