I have made an extension that adds dimensions to attached image.
Well, actually not a real extension since you need to edit the core attachment.html

Example of my source code with image dimensions:
[code]
<img src="xxx" width="300" height="235" loading="lazy" class="postimage" alt="ACP Setting and Watermark in top-right corner" title="watermark_attachment_acp.png (101.96 KiB) Viewed 2030 times" style="border: 3px solid transparent; border-radius: 6px; transition: border-color 0.1s ease-out; cursor: pointer;">
[/code]

I also added [c]loading="lazy"[/c] to the edit since this also is a huge improvement.

So why is it important to use width and height?

[b]1. Prevents layout shifts (better UX)[/b]
When dimensions are missing, the browser doesn’t know how much space to reserve while the image is loading.
Result: content “jumps” around as images load.
This is known as layout shift, and it’s a big annoyance for users—especially on slower connections.

[b]2. Improves Core Web Vitals (SEO)[/b]
Google measures something called Cumulative Layout Shift (CLS).
If your images don’t have dimensions, CLS gets worse → which can hurt your rankings.
So yes, this is directly tied to SEO.

[b]3. Faster perceived performance[/b]
When the browser knows image dimensions:
It can calculate layout immediately
It doesn’t need to reflow the page multiple times
Even if the image loads at the same speed, the page feels faster and smoother.

[b]4. Better lazy loading behavior[/b]
With loading="lazy":
The browser needs dimensions to decide when to load the image
Without them, lazy loading can behave unpredictably

[b]5. Reduces reflow/repaint cost[/b]
Each time the browser has to adjust layout:
CPU work increases
Rendering becomes less efficient
Specifying dimensions avoids unnecessary recalculations.