Image src-set stretches Dynamic Media images

[HitmanInWis]

The Image component generates a src-set for dynamic images, each image with a &wid=NNNN parameter. If the image width happens to be larger than the source image uploaded to the DAM, this wid parameter to Dynamic media adds whitespace to the left/right of the image to make up the difference in requested size.

This results in issues, most noticeably in devices with high DPR, since the browser will request a larger image than the requested space on the page, and then the browser will shrink the image down to the contained space.

I'll illustrate this below, where each X is 100px wide.

Say I start with an image that is 400px wide.

XXXX XXXX XXXX

Now let's say I have a 800px wide piece of content, where this image is on the left 400px of it. My page will look like this:

XXXXaaaa XXXXbbbb XXXXcccc

However, now say Dynamic Media asks for a 800px version of this image, b/c my browser DPR is 2x and thus 400px needs a 800px image to get the correct quality. Dynamic Media will serve the images as such where "o" is whitespace:

ooXXXXoo ooXXXXoo ooXXXXoo

Then, when my browser enters this 800px image from DM into the 400px space available for the image, the page now looks like this:

oXXoaaaa oXXobbbb oXXocccc oXXodddd

See how the image is distorted?

This not only happens for reasons of DPR - it can also happen if in the example above the space I have available is 400px and my configured rendition sizes are 300px and 600px - since 300px is not big enough a 600px version will be requested from the src-set, and we'll see the same distortion.