Responsive image confusion

#1

I’m beating my head against a brick wall here.

No matter how I configure my img srcset the images on my home page show an intrinsic size of 756px wide, even on small mobile view. I’m beyond exasperated. It’s killing my Lighthouse scores. Any hint or clue as to why would be greatly appreciated…

#2

Can you create a reduced test case in a CodePen? That’ll certainly help people help you :slightly_smiling_face:

1 Like
#3

I think I may have figured it out, at least in part. If I continue having problems I’ll use CodePen - keep forgetting about them!

2 Likes
#4

Fabulous. We’re all here if you need help :slight_smile:

1 Like
#5

I see you got your Lighthouse score sorted but with the way you did it you are not taking into account display density.

Here is how I would refactor your code to take into account display density.

The thing is the browser doesn’t know the size at which the image will be rendered on the page until it has downloaded and parsed all the relevant CSS and JavaScript files. If we give sizes based on screen width then the browser will know which image to use.

In your case your image has three sizes it can be:

  • Up to a screen width of 42rem the image is 100%
  • Then up to a screen width of 64rem the image is 640px
  • Larger than that the image is essentially 756px

So we set the sizes as:
sizes="(max-wdith: 42rem) 100vw, (max-width: 64rem) 640px, 756px"

And adding a range of srcset sizes so the browser can grab a suitable size. The browser is smart enough to know which size it needs, for example, with a double density screen on desktop the image will be 756px wide, but being double density it will grab the 1512px image.

Putting it all together would give us:

<img
  src="https://thedixons.net/img/grandpacornall.jpg?nf_resize=fit&w=756"
  srcset="
    https://thedixons.net/img/grandpacornall.jpg?nf_resize=fit&w=320 320w,
    https://thedixons.net/img/grandpacornall.jpg?nf_resize=fit&w=640 640w,
    https://thedixons.net/img/grandpacornall.jpg?nf_resize=fit&w=756 756w,
    https://thedixons.net/img/grandpacornall.jpg?nf_resize=fit&w=1280 1280w,
    https://thedixons.net/img/grandpacornall.jpg?nf_resize=fit&w=1512 1512w"
  sizes="(max-wdith: 42rem) 100vw, (max-width: 64rem) 640px, 756px"
>

Here is the code pen https://codepen.io/wanacode/full/BaoBaBO

2 Likes
#6

In this particular case, my original is only 756px wide. I don’t think NLM will expand it beyond that, and it would certainly look bad if it did…

I have not yet added display density, correct…

#7

I eventually moved images to Cloudinary and used Picture code, so something like this:

<picture>
<source srcset="cloudinary url w/ transformer options" media="(max-width: 320px)">
<source srcset="cloudinary url w/ transformer options" media="(max-width: 755px)">
etc.
</picture>

It just works, I don’t get weird intrinsic sizes.

1 Like
#8

I remember being really confused by responsive images as few years ago. Once I got my head around creating a max-width based sizes attribute, even though I was building mobile first websites with min-width based media queries it all made sense. I can’t believe this was 3.5 years ago - https://stackoverflow.com/a/40758302/1134053 but I hope it helps. It’s a tricky concept but it’s worth understanding what’s actually going on.

I usually load up my page in a private window at my smallest breakpoint, hover over the srcset attribute in dev tools and then see which currentSrc is being shown to be :100: sure the correct images are loading in for each sizes attribute breakpoint. I use a private window because images get cached by the browser really quickly so once a larger crop has been loaded that displays at smaller screen sizes… at least it did last time I checked! That was quite confusing too.

#9

I would recommend reading through this series of articles to anyone wanting to learn more. This is what helped me finally get my head around responsive images:

1 Like