adobe / adobe/aem-core-wcm-components
[Image] [Dynamic Media] The widths in srcset are not correctly generated
- 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
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