Web pages often shift their content around while loading images and other data. Using skeleton screens is one approach to prevent this. If you know the width and height you want to display for the image you’re loading, this is pretty easy to implement by setting the width and height in the CSS, along with a background color.
See the Pen Fixed size image loading by Clinton Dreisbach (@cndreisbach) on CodePen.
This solution is based around the fact that padding in CSS is relative to the width of the element. Given that, we can make a container for our image with a percentage-based width, a height of 0, and padding on the bottom based on our picture’s aspect ratio. If you have a picture that is 4:3, and it should take up 50% of the page, the padding we will use is 37.5% (50% * 3⁄4). Give the container
position: relative and set the image to have 100% height and width and give it
See the Pen Percentage size image loading by Clinton Dreisbach (@cndreisbach) on CodePen.
Credit where it is due: I found this trick in this answer from Stack Overflow.