Inject image width/height to avoid cumulative layout shift

CLS (cumulative layout shift) is when what you’re looking at sudden moves down right in front of your eyes as stuff like images finally come in, somewhere above.

Example: on http://localhost:5000/en-us/docs/Web/CSS/CSS_Box_Alignment

Since we control the <img src> tags in Yari we can use things like image-size which is pure Node JavaScript and doesn’t read in the whole file so it’s fast. Now we can automatically convert the:

<img src="screenshot.png" alt="Bla">

…into…

<img src="/en-US/docs/Current/Doc/screenshot.png" alt="Bla" width="430" height="260">

Now you get this result:

[ghost]

I’m increasingly thinking that this should be handled by editors but kindly asked …

[peterbe]

I tend to agree with @peterbe in #1498 (comment) - generally you should try upload an image to correct size, and this should be the minimum size that conveys the relevant information. If only because big files are heavy for recipients and unlike server-based wiki systems, static sites can’t dynamically resize images on sending (not to mention when we get the source locally).

Devils advocate:

* you can't regrow an image you've shrunk. In another site I recently added the feature to allow images to  expand when clicked. This is really useful in some cases, but diligent pruning of image sizes over the years means that much of the benefit was lost.

* When using images within a table or other layout structure you don't always know the ideal layout size when you're starting. I find it useful to be able to set widths, but I almost never set heights.

Responding to your “devil’s advocating”… If we allow people to upload a 2000x2000 PNG but you explicitly set the width like <img src="pic.png" width="200"> then it’s likely that people end up downloading a LOT more data to be able to see a smaller image and it’s not any crisper. Resized down to 200px it’s very possible that no human eye can tell it apart from one that natively 200px wide. But the amount of data transferred might be 1MB vs 50KB which hurts every single reader indefinitely. And implementing complicated override’able rules and exceptions might lead to complexity that is undesirable.

(I feel like you knew ALL of that perfectly well but I think it’s fair to log the complete argument here)