The purpose of this ticket is to document the need for more work to be done when dealing with responsive images in the Image component provided in the engine-theme-sdk.
Currently, the Image component works to serve custom image ratios targeting three different device resolutions. This is good for getting responsive images fast.
However , the consideration for an example, iOS devices hasn't been made.
Consider an iPhone8:
CSS viewport size: 375px by 667px
Pixel density: 2
Effective device resolution: 750px by 1334px , for which the image served won't be of correct dimensions as per current code. This is only one example, here is a list of most mobiles with ratios https://www.h3xed.com/web-and-internet/mobile-device-resolution-and-pixel-ratio-list.
The code you currently have is only working on the CSS Viewport size , but does not seem to work on the basis of detecting pixel density.
I deem that this addition is a smaller one to be done within the existing image component as opposed to us developers re-building our own custom Image component, thereby invalidating the use of the core Image component.
In order to have an all-rounder Image component, the DPR (Device Pixel Ratio) needs to be detected and then image served.
Savitha Premkumar
Thanks for this feedback – the problem makes sense. We'll investigate options for this.