Example 2 of 2 from blog post Shifting layouts, and how to deal with them
This illustrates how to prevent a slow-loading image from causing the page content to move around while you're interacting with it.
There are multiple paragraphs, one of which has a link you're interested in. But there's an image above that, which loads slowly.
The fix
To prevent the image from pushing the rest of the page down, you simply add either a height or a min-height to the container, the value of which matches the image's height.
Try it out
Reload the page and watch the next section. Note that none of the content below the image moves after the image loads.
This container's height is specified to match the height of the image it contains.
First paragraph
The first paragraph, containing a link you're not interested in, followed by more text.
Second paragraph
The second paragraph, containing the link you are interested in, followed by some more text.
Compare
Without a specified height on the container, the image will push the rest of the page down when it loads.