- Issue created by @mariohernandez
- 🇺🇸United States mariohernandez Los Angeles
I did additional research and testing using vanilla installations of Drupal 10.x.
First test - Using fallback image width and height
Expected behavior, image should render large on desktop (max 1290px), and full width on mobile.
1. First I configured responsive images (resp-img.png)
2. While inspecting the image, visually it looks tiny and that's because it is using the fallback image dimensions (dimensions.png)
3. However, looking at the Network tab in the dev tools, we see the right image is loaded, but because Drupal is changing the width and height of the img tag based on the fallback image dimensions (network.png)Second test - Not using fallback image
1. Same responsive image configuration as above
2. Inspecting the image this time, reveals the right width/height on the image tag which is provided by the Sizes configuration in item #1 above.
3. The Network tab in inspector's console displays the right image dimensions and visually the image also looks correct (dimensions2.png)Conclusion
Drupal is able to provide the right width and height to the img tag without resourcing to the fallback image. Hoping this can be resolved to be able to effectively use responsive images.
- 🇳🇿New Zealand quietone
Changes are made on the main development branch 11.x first, then backported.