Lazy Images: Improve reflow for images

[ebinnion]

Currently, we try and set the width and height attributes when possible for any image we lazy load. Ideally, this would help the browser to reserve the correct amount of space in the window to minimize reflows as we load the image later on.

But, many themes do something like the following for responsive layouts:

img {
    max-width: 100%;
    height: auto;
}

Since the theme's CSS sets the height for the img tag, it overrides the height we set via the image attribute, which results in the image not reserving the correct amount of vertical space.

This doesn't break lazy images, but it can cause significant reflow in some cases, and in other cases, especially where a post has a ton of images, it may result in all of the images loading on $( document ).ready.

I think we can do better with the reflowing if we set the height and width via the style attribute on the image tag. Although, for the best experience, we may need to look at setting the aspect ratio as opposed to strict height and width values.

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[Salubritas]

I've hit some problems with image lazy loading and reflow.

There's a neat solution which is basically to add an SVG inline into the src attribute so it acts as a scalable placeholder until the image loads.

src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 324 258'%3E%3C/svg%3E"

324 and 258 are the width and height. As it's a scalable box you don't need to provide the aspect ratio as well.

From here: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/

[Salubritas]

I've found that the default base 64 encoded placeholder gif does not help with this problem, and using the filter which allows you to replace the placeholder image makes no difference. It doesn't pass in the size attributes so can't be used to achieve the fix I found.

I get content reflow images at full desktop width, when the URL includes an anchor which is towards the end of the page. The images load after the browser scrolls to the anchor so the user ends up in the wrong place - very confusing!

Lazy loading turned off for me until I find a solution unfortunately.

[tkelling]

@Salubritas, @ebinnion: Do you have any solution for this yet? Thanks.

[Salubritas]

I don't have a solution. The ideal would be for Jetpack to replace the placeholder with a scalable SVG as suggested above.

Second best would be for the filter lazyload_images_placeholder_image to pass in the dimensions of the image in some way, so we can pass back the correct SVG ourselves.

Third best is could try hooking the filter jetpack_lazy_images_skip_image_with_attributes which is called before the placeholder function, and put the image dimensions in global variables. Then in the filter lazyload_images_placeholder_image we should be able to get those dimensions to return the correct SVG.

I only just thought of option 3, and it's hacky, but will give it a try some time. The reflow on my site is pretty horrible (TOC anchors at the top of the post very often go to the wrong location) so is worth investigating.

[Salubritas]

I have implemented option #3 now and it is working well. There is a potential performance impact as it needs to get images by URL from the media library to find the dimensions if not specified elsewhere, but otherwise does the job for me.

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.