Preload image URLs for elements with external background images

[westonruter]

Fixes #1584

Given the Twenty Thirteen theme which has a CSS background image in the header and some images in the post content, on desktop the header is the LCP element whereas on mobile the first image is the LCP element:

Desktop	Mobile

With the changes in this PR, the CSS background image gets a fetchpriority=high preload link for desktop, whereas the first image in the content gets a preload link for mobile:

<link
  data-od-added-tag
  rel="preload"
  fetchpriority="high"
  as="image"
  href="http://localhost:8888/wp-content/themes/twentythirteen/images/headers/circle.png"
  media="screen and (min-width: 783px)"
>
<link
  data-od-added-tag
  rel="preload"
  fetchpriority="high"
  as="image"
  href="http://localhost:8888/wp-content/uploads/2024/06/bison2-1024x673-jpg.webp"
  imagesrcset="http://localhost:8888/wp-content/uploads/2024/06/bison2-1024x673-jpg.webp 1024w, http://localhost:8888/wp-content/uploads/2024/06/bison2-300x197-jpg.webp 300w, http://localhost:8888/wp-content/uploads/2024/06/bison2-768x505-jpg.webp 768w, http://localhost:8888/wp-content/uploads/2024/06/bison2-1536x1010.jpg 1536w, http://localhost:8888/wp-content/uploads/2024/06/bison2-2048x1347.jpg 2048w, http://localhost:8888/wp-content/uploads/2024/06/bison2-1568x1031.jpg 1568w"
  imagesizes="(max-width: 1024px) 100vw, 1024px"
  media="screen and (max-width: 480px)"
>

Todo

• Add additional validation constraints on the new root property (e.g. require same-origin).

[westonruter]

@felixarntz This is getting close! I'm excited about this one since it unlocks a very common use case which we've seen especially among page builders. This unlocks potential optimization of the DIV (assuming it has a background image) which is the second most common LCP element: