diff --git a/aio/content/guide/image-directive.md b/aio/content/guide/image-directive.md
index d1233ed10d1c2..ddca51c255bc8 100644
--- a/aio/content/guide/image-directive.md
+++ b/aio/content/guide/image-directive.md
@@ -91,9 +91,9 @@ You can typically fix this by adding `height: auto` or `width: auto` to your ima
Defining a [`srcset` attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) ensures that the browser requests an image at the right size for your user's viewport, so it doesn't waste time downloading an image that's too large. 'NgOptimizedImage' generates an appropriate `srcset` for the image, based on the presence and value of the [`sizes` attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) on the image tag.
-#### Fixed size images
+#### Fixed-size images
-If your image should be "fixed" in size (i.e. the same size across devices), there is no need to set a `sizes` attribute. A `srcset` can be generated automatically from the image's width and height attributes with no further input required.
+If your image should be "fixed" in size (i.e. the same size across devices, except for [pixel density](https://web.dev/codelab-density-descriptors/)), there is no need to set a `sizes` attribute. A `srcset` can be generated automatically from the image's width and height attributes with no further input required.
Example srcset generated: ``
@@ -101,12 +101,13 @@ Example srcset generated: `
@@ -145,19 +146,6 @@ To disable srcset generation for a single image, you can add the `unoptimized` a
<img ngSrc="about.jpg" unoptimized>
-
-
- Alternatively, you can set the `disableAutoSrcset` property to `true` on the IMAGE_CONFIG provider:
-
-
-providers: [
- {
- provide: IMAGE_CONFIG,
- useValue: {
- disableAutoSrcset: true
- }
- },
-],
### Disabling image lazy loading
@@ -170,6 +158,20 @@ By default, `NgOptimizedImage` sets `loading=lazy` for all images that are not m
+### Advanced 'sizes' values
+
+You may want to have images displayed at varying widths on differently-sized screens. A common example of this pattern is a grid- or column-based layout that renders a single column on mobile devices, and two columns on larger devices. You can capture this behavior in the `sizes` attribute, using a "media query" syntax, such as the following:
+
+
+
+<img ngSrc="cat.jpg" width="400" height="200" sizes="(max-width: 768px) 100vw, 50vw">
+
+
+
+The `sizes` attribute in the above example says "I expect this image to be 100 percent of the screen width on devices under 768px wide. Otherwise, I expect it to be 50 percent of the screen width.
+
+For additional information about the `sizes` attribute, see [web.dev](https://web.dev/learn/design/responsive-images/#sizes) or [mdn](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes).
+