Let the browser choose the best image

[ghisleouf]

Hi there,

I was working on a project these days and we were using nuxt-img to manage responsive images (using img tag). I'm a little bit confused about the way it works and not sure to understand why you coupled srcset and sizes attributes.

After working on performance improvement on previous projects, I would like to share how I would handle responsive images management because I'm not sure to be able to do it with nuxt-img today and I would like not doing wrong.

- sizes attribute: this attribute is here to say to the browser : "Hey browser, this picture occupies 100% ( or 50, 33, 20% ... whatever) of the viewport width from this breakpoint to the next one (for example) ... and then 40% (40vw) ... etc

- srcset attribute: this attribute is here to say: "hey browser, here are all the different versions of this image and I give you for each image the related width ... choose the one you want, I told you just before thanks to sizes attribute the width it occupies ... do the best you can do !"

As a result, if you tell the browser the size (with sizes attribute) of your image and allows it to pick the best image size (from srcset attributes), you don't care about 1x, 2x, 10x screen density...

Why? Because your browser detects pixel density of visitor screen.

• Let say your visitor, with a 1000px wide browser window and DPR 2, is visiting your website.
• The image you want to display occupies 50% (50vw) of the viewport.

-> The browser will automagically select the closest size over 1000px ( 500px * 2 because of DPR 2).

What I wanted to share there is that you don't need to couple sizesand srcset attributes that much to handle responsive images ... and ... I'm not sure I'm able to reproduce this behavior with Nuxt-img today.

Could you please tell me if I am wrong ? I would be happy to dig deeper with what I sshared and the way to do apply iit properly with nuxt-img library.

Thanks for your clarification. :)

[KaragiannidesAgapios]

I think this is relative with https://github.com/nuxt/image/pull/459.

[ghisleouf]

Hi @KaragiannidesAgapios,

Thanks, kind of ... The point is that with the current strategy involved in responsive images, you can't handle cool use case without drawbacks.

For example, I want to load a tiny blurred default version of my image and, as soon as it is visible into the viewport, load the good one. Today, if I want to achieve it with nuxt-image, I will use an IntersectionObserver to deal with the viewport and as soon as the image is into the viewport, inject sizes (or something like that)... What happens if I do that ? The src attribute is updated and I have a small period where I don't have image visible (during final image loading time) because default blurred one is removed and replaced by the final one.

Actually, you don't need to update the src attribute.

If I can suggest another approach, a great thing would be just to pass props like "from", "to" and "gap" to generate image version "from" a width "to" another one with a "gap" between the different sizes. You also pass sizes to "explain" to the browser the size of the image according to viewport width ... and that's it ... your browser takes care of the rest (best width, dpr, ...).

Maybe I am missing something but I wanted to suggest it because I really like other features of this library !

Thanks for feedbacks and your amazing work !

[luksak]

I just came across this issue as well. I totally agree with @ghisleouf. The behaviour of the sizes and src-set attributes should be different.

Doing this:

 <nuxt-picture :src="src" sizes="xs:100vw lg:33vw" />

Results in markup like this:

<picture>
  <img
    src="test.jpg"
    srcset="test.jpg 320w, test.jpg 317w"
    sizes="(max-width: 320px) 100vw, 33vw"
  />
</picture>

The src-set should always contain all the sizes defined by default. This makes the browser simply choose the best one based on the width defined in the sizes attribute and the different sizes available in src-set.

[luksak]

Here is a very similar issue: #458

[luksak]

i created another issue related to this one: #469

[toddpadwick]

Are there any updates to this? or does anyone use an alternative tool to achieve it? I have a bunch of components for which I do not have any ability to predetermine the width they will be rendered at. So I am getting Lighthouse flags for oversized images.

[danielroe]

I think this issue is no longer relevant.

@toddpadwick You need to provide height and width values which allows Nuxt Image to optimise those images for you.