The note in the example for loading content attribute seems incorrect

[triple-underscore]

The following description (which is introduced in the commit 0283e9e) in the example for loading content attribute seems incorrect, that the width/height content attributes and CSS properties are swapped:

Developers are encouraged to specify an intrinsic aspect ratio via width and height attributes on lazy loaded images, even if CSS sets the image's width and height properties, to prevent the page layout from shifting around after the image loads.

(CSS properties do establish these dimensions.)

[Malvoz]

that the width/height content attributes and CSS properties are swapped

It does not say that, I think the recommendation is pretty clear: Use width and height attributes even if width and height is set for the image in CSS. I'll quote my own #3752 (comment) for the reasoning behind this:

https://www.youtube.com/watch?v=4-d_SoCHeWE

tl;dw:

1. 2:14 width and height attributes solved jankiness from images on the web.

2. 3:50 developers wanted responsive images, achieved by applying CSS width: 100%, height: auto; re-introducing jank.

3. 4:49 UAs add new styles to fix the re-introduced jank:

The UA-stylesheets of all browsers will add this code:

img, video {
    aspect-ratio: attr(width) / attr(height);
} 

‐ WICG/intrinsicsize-attribute#16

[triple-underscore]

Ah, I get understood that it does not meant for images with concrete dimension, but for auto sized responsive images.

Thanks @Malvoz!