Hero images: desktop vs. mobile

[helms-charity]

Current situation

• The hero areas have 2 authored images, a large one for desktop and smaller one for mobile.
• Currently we are loading both desktop and mobile picture elements, and hiding one or the other with CSS.
• The current live site does not load both images Example: https://www.sling.com/whatson/entertainment/comedy/watch-emma-stone-curse

To do

For performance, I think it would be better to only load the one needed. However, what would be the best way to handle the case of device rotation that crosses a breakpoint?

Other customer example

For UST global, the 2 cropped images were from the same original picture, just different aspect size/dimension. If the initial load was portrait (vertical) mobile, no refetch/refresh of the image was done if the device was turned to landscape (horizontal) even if the breakpoint changed, because the
customer accepted the variation for this edge case. (not many people change viewport size).

Example page: https://www.ust.com/en/insights/usts-upm-solution-helped-healthcare-it-company-improve-test-automation-coverage-by-78-percent

[amol-anand]

You could still load the image that matters with "eager" since it is hero and the other one can be "lazy". So if they do change the window size while browsing it still works fine. Agree that no one is resizing windows on mobile/tablet, but on desktop that happens more when ppl move things around etc..

[amol-anand]

What is the performance hit we have today? depending on that we can make the call.

[helms-charity]

Closing, as we are addressing via a custom index.