Notebook / Performance
The image is part of the layout
File size matters, but so does what happens before a picture appears.
Reserve the space first
When an image arrives late and pushes a paragraph down, the page feels unfinished even if it loaded quickly. Giving the browser the image dimensions lets it reserve the correct space. Responsive CSS can still make the picture fit the available width.
Use a smaller source when it looks the same
A photograph that looks good across a full desktop screen does not necessarily need to be sent at the same size to a phone. Responsive sources are useful here. The aim is a sensible file for the space it occupies, rather than the smallest possible image at any cost.
Do not lazy-load everything
Images near the bottom of a long article are reasonable candidates for lazy loading. The main image at the top is a different case: delaying it can make the first screen feel slower. Decide which images matter to the initial view before applying one rule across the whole site.
Look at the actual result
Open the page with a slower connection and watch it load. Is the title visible early? Does the layout move? Does the photograph turn into a blur? A network report helps explain what happened, but the page itself is still worth looking at.