Can't get sizes to render correctly with custom breakpoints

[joeczucha]

Firstly, thank you for all the work you’ve put into this plugin.

I’m having a bit of difficulty getting Unpic to generate the sizes attribute I’d expect and I’m hoping you can advise whether I’m misunderstanding something or missing a configuration option.

I have an image that resizes based on viewport width, with the following rendered image widths:

• < 640px → calc(100vw - 32px)
• ≥ 640px → 608px
• ≥ 768px → 728px
• ≥ 1024px → 604px
• ≥ 1280px → 630px
• ≥ 1536px → 766px

Based on this, I’m aiming for srcset and sizes values roughly like the following:

<img
  src="https://www.mysite.ie/cdn-cgi/image/width=608,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg"
  alt=""
  srcset="
    https://www.mysite.ie/cdn-cgi/image/width=608,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg 608w,
    https://www.mysite.ie/cdn-cgi/image/width=630,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg 630w,
    https://www.mysite.ie/cdn-cgi/image/width=728,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg 728w,
    https://www.mysite.ie/cdn-cgi/image/width=766,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg 766w
  "
  sizes="
    (min-width: 1536px) 766px,
    (min-width: 1280px) 630px,
    (min-width: 1024px) 604px,
    (min-width: 768px) 728px,
    (min-width: 640px) 608px,
    calc(100vw - 32px)
  "
  style="width: 100%; max-width: 766px; height: auto"
/>

I added the widths via the breakpoints prop, which correctly generates the srcset:

import { Image } from "@unpic/vue/base";
import { transform } from "unpic/providers/cloudflare";

<Image
  src="https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg"
  alt=""
  :breakpoints="[608, 728, 630, 766]"
  :transformer="transform"
  :options="{ domain: 'www.mysite.ie' }"
  priority
/>

(The domain option was required, otherwise the path was treated as relative.)

This generates the following markup:

<img
  src="https://www.mysite.ie/cdn-cgi/image/width=766,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg"
  alt=""
  loading="eager"
  fetchpriority="high"
  role="presentation"
  sizes="(min-width: 766px) 766px, 100vw"
  srcset="
    https://www.mysite.ie/cdn-cgi/image/width=608,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg 608w,
    https://www.mysite.ie/cdn-cgi/image/width=630,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg 630w,
    https://www.mysite.ie/cdn-cgi/image/width=728,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg 728w,
    https://www.mysite.ie/cdn-cgi/image/width=766,f=auto,fit=cover/https://cdn.agriland.ie/uploads/2019/05/horticulture-vegetable.jpg 766w
  "
  breakpoints="608,630,728,766"
  style="object-fit: cover; max-width: 766px; width: 100%"
/>

While the srcset looks correct, the generated sizes attribute doesn’t seem to reflect the actual layout. As a result, the browser often selects a larger image than necessary. Also, I'm not sure why it's leaving the non-standard breakpoints attribute on the img tag, when this should just be being used to generate the srcsets.

For example, when the container is ~630px wide, the Unpic-generated image requests the 766px variant, whereas the manually written correctly selects the 630px variant.

Here’s a minimal reproduction: https://kxrrms-5173.csb.app/ where the top image is generated by Unpic and the bottom image is my manually written one above.

You can see in the network tab that the 766px and 630px versions are downloaded (whereas when the container is 766px, both images use the same src).

Have I missed something regarding generating sizes based on breakpoints, or is the current behaviour expected? Any guidance would be much appreciated.

Thanks again for your time.

Joe C