Detailed answer
Matching source dimensions let the browser infer an aspect ratio before the image downloads.
This reserves space and helps reduce layout shifts. CSS can then scale the image while preserving its ratio. Arbitrary dimensions reserve the wrong shape and may distort the image instead of making it responsive.
Example
<img src="lesson.png" alt="An HTML lesson" width="1200" height="800" style="max-width:100%;height:auto">
Understanding the behavior
Width and height attributes provide an intrinsic aspect ratio so the browser can reserve space before the image arrives. Responsive CSS can still scale the image to its container. The declared proportions should match the actual asset.
Practical implementation notes
Throttle the network and watch the surrounding text during loading. If it jumps, inspect both dimensions and any CSS that overrides the ratio. Use height:auto when scaling a fixed-ratio image by width.
How to check it
Give the image its intrinsic aspect-ratio dimensions and reload with a slow network.
Expected result
Space can be reserved before the resource finishes, reducing layout movement.
Watch out: Use a width/height pair matching the image aspect ratio.
Read the reference ↗