Preload the picture markup

[Mai-Saad]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version => 3.16_alpha1
• Used the search feature to ensure that the bug hasn’t been reported before

Describe the bug
srcset of picture element isn't preloaded as mentioned here https://web.dev/articles/preload-responsive-images#preload_and_picture

Expected behavior
srcset shall be preloaded as same as src img when it's detected a LCP image

The markup input:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

The markup output:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Acceptance Criteria (for WP Media team use only)
LCP

1. source srcset images are preloaded using the image URL from the srcset
2. media attributes must be moved to the preload markup
3. if the min-width is not defined for the next srcset images we'll need to add it using the previous max-width value + 0.1px.
4. if the min-width is not defined for the img markup, we'll need to add it using the previous max-width value + 0.1px.
5. fetchpriority="high" is added to the preload markup
6. Image is excluded from LL feature

Above the fold

1. Image is excluded from LL Background Images feature

[jeawhanlee]

Expected data structure in DB for LCP:

   {
     "type": "picture",
     "src": "large_cat.jpg",
     "sources": [
       {
         "srcset": "small_cat.jpg",
         "media": "(max-width: 400px)"
       },
       {
         "srcset": "medium_cat.jpg",
         "media": "(max-width: 800px)"
       }
     ]
   }

Same will apply for ATF.