Skip to content

srcset does not preserve operations.format in @unpic/core, so forced formats like webp are ignored by responsive images #861

Description

@Lqm1

Summary

When using @unpic/react / @unpic/core with provider-specific operations, operations.<provider>.format is applied to src but not to srcset.

In practice this means forced formats such as webp appear to "not work", because browsers usually pick a candidate from srcset instead of src.

Reproduction

Using @unpic/react@1.0.2 and @unpic/core@1.0.3:

<Image
  src="https://enka.network/ui/UI_AvatarIcon_PlayerBoy.png"
  cdn="wsrv"
  width={144}
  height={144}
  layout="constrained"
  operations={{
    wsrv: {
      format: "webp",
      quality: 80,
      we: true,
    },
  }}
/>

Actual result

src includes output=webp, but srcset does not.

Example result from transformProps():

src:
https://wsrv.nl/?url=enka.network%2Fui%2FUI_AvatarIcon_PlayerBoy.png&we=true&w=144&h=144&output=webp&q=80&fit=cover

srcset:
https://wsrv.nl/?url=enka.network%2Fui%2FUI_AvatarIcon_PlayerBoy.png&we=true&w=144&h=144&q=80&fit=cover 144w,
https://wsrv.nl/?url=enka.network%2Fui%2FUI_AvatarIcon_PlayerBoy.png&we=true&w=288&h=288&q=80&fit=cover 288w

Because srcset is missing the format parameter, the browser ends up requesting non-WebP candidates.

Expected result

If operations.<provider>.format is set, the same format should also be reflected in srcset.

Cause

getSrcSet() only forwards options.format into getSrcSetEntries().
It does not fall back to operations.format, even though the transformer itself receives operations.

So provider-specific format is preserved for the main src, but dropped while building srcset.

Notes

I confirmed the wsrv provider itself is mapping format correctly (format -> output), and the generated src returns Content-Type: image/webp. The problem seems limited to srcset generation in @unpic/core.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions