adobe / adobe/aem-core-wcm-components

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

Open
#3,012 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
795
Forks
775
Avg merge
3d 22h
Merged PRs (30d)
8

Description

**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`:

```js
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
```

Contributor guide

Open the contributing guide

Research direction

Start with content/src/content/jcr_root/apps/core/wcm/components/image/v3/image/clientlibs/site/js/imageDynamicMedia.js and inspect setDMAttributes and getSrcSet. Compare the generated srcset descriptors with the DPR value applied to each URL. Done means the descriptors represent the intrinsic pixel width delivered for DPR-enabled URLs, as shown in the issue examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.