Add fetchpriority=low to occluded initial-viewport images

[westonruter]

Feature Description

When an image is in the initial viewport but is hidden, it should get fetchpriority=low. For example, this would apply to images which appear inside of a mega menu or images which are part of hidden carousel slides. Such images should not get loading=lazy since they should still be loaded and ready to go the moment the user interacts with the page to reveal it, but they should not get the same priority as images which are visible when first loading the page.

See https://web.dev/articles/fetch-priority#lower-carousel-priority

[devansh016]

@westonruter
I would like to contribute on this. Can you assign me this issue?

[westonruter]

@devansh016 Actually I don't think it's going to be as simple as what you've proposed in #1320. Namely if I understand correctly, your PR would add fetchpriority=low to every image that is currently also getting loading=lazy. I don't think the URL metrics actually capture the necessary information yet to implement what we need here, and that is to detect images which are not visible while also being "above the fold". These would be non-initial images in a carousel which appears in the initial viewport, or images which appear inside of a mega menu which is not open until clicked. We'll need to think some more about how best to capture this information in detect.js.