Skip to content

[Image] [Dynamic Media] The widths in srcset are not correctly generated #3012

@nicufarmache

Description

@nicufarmache

File: content/src/content/jcr_root/apps/core/wcm/components/image/v3/image/clientlibs/site/js/imageDynamicMedia.js

In setDMAttributes, the src variable has DPR applied before being passed to getSrcSet:

var src = properties.src.replace(SRC_URI_DPR_OFF, SRC_URI_DPR_ON);
src = src.replace(SRC_URI_TEMPLATE_DPR_VAR, dpr);  // e.g. dpr=on,2

This produces srcset entries like:

https://dm.example.com/image?dpr=on,2&w=400 400w,
https://dm.example.com/image?dpr=on,2&w=800 800w

The w descriptor is supposed to tell the browser the intrinsic pixel width of the image. But dpr=on,2 tells Dynamic Media to serve an image that is width * 2 physical pixels wide. So the 400w entry actually delivers an 800px image - the browser is being lied to about the size and will over-fetch.

for dpr=2 srcset should be something like this:

https://dm.example.com/image?dpr=on,2&w=400 800w,
https://dm.example.com/image?dpr=on,2&w=800 1600w

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions