1

I have some large images at the top of pages on a site. Post titles are layered over the images and utilize some transparency (which I imagine adds to the issue). The images load late and as they're a prominent element above the fold lead to very noticeable DOM reflow. Basically the remainder of the page loads and then is pushed down by the late loading image.

Are there html elements that I can surround the eventual landing location of the image with that will prevent other content from loading in the place of the image and consequently being "pushed down?"

The idea here is to take a block html element with the same dimensions and position as the image to be loaded. In this case even if the image hasn't loaded there's no "jolt" that pushes additional content down the screen. I've looked for resources or examples on this. But have not found any.

cjc
  • 731
  • 3
  • 13
Merrill Cook
  • 988
  • 1
  • 8
  • 18
  • 1
    It is not better to get rid of too large images. Google recommends that the maximum weight of the photo was 200KB :) You can change the image quality depending on the media query. – Grzegorz T. Jun 19 '19 at 23:25

1 Answers1

4

You can define the image size (in pixels) in the HTML using the width and height attributes (on the img tag itself). You can also use CSS to define the width and height of the img elements. This answer provides more details about how the two interact.

By defining the size, the space for the images will be allocated before the image is loaded. In fact, if you define the size this way, the browser will display the image in the specified space even if the actual image size is different.

You can also put a wrapper div around the images that use define the size of in the CSS so that you don't run into any strange artifacts of defining both the width and the height of an image (if it differs from the actual dimensions of the image).

And as @Grzegorz T noted in the comments, you should try to reduce the image file size so that the site will load faster in general.

cjc
  • 731
  • 3
  • 13