Output original image dimensions for feature image to remove jank on mobiles

Ideas
1

Because feature images are responsive, lazy loaded and their size controlled in CSS, the Casper theme (which I love btw!) shows the first text of an article until the feature image loads, at which point it shifts the text down below the image.

This jank, or Cumulative Layout Shift, is especially jarring on slow, mobile connections.

Recent versions of Chrome and Firefox use the width and height attributes of the img tag to calculate the aspect ratio of the yet-to-be-loaded image, thus reserving the correct amount of empty space on the page before the image loads, avoiding the jank.

I tried myself to add hardcoded width and height values to post.hbs - and it resolved the issue - but I can’t work out how to get the actual width and height values for a feature image and use them in templates.

It would be great to use the actual dimensions of the original image for the values… :slight_smile:

Here’s a nice video from Mozilla explaining the causes of the issue and how using width and height attributes on responsive images can help solve it:

2

Here’s an article that also does a good job of explaining the problem and solution.

It also explains my findings that you get pretty good results even if you use the wrong values for width and height, if they’re approximately the correct aspect ratio for the type of image…
Essentially, the browser uses the aspect ratio to reserve space on the page during loading, then when both the actual (responsive) image and CSS are loaded, it corrects the aspect ratio (due to the CSS width: 100%; height: auto;) according to the actual dimensions of the loaded image.

1 Like
3

Another useful option that would perhaps be easier to implement – being able to load and present two different images depending on the viewport aspect ratio. In the new Ghost-approved theme I am using, desktop feature images are shown full-width at almost at a 4:1 aspect ratio when mobile feature images are shown at 5:4.

This is a huge difference between double widescreen and almost square that is really difficult to find good photography to fit.