SXG tests

Responsive images demo

1. Open Network tab in Chrome Dev Tools.
2. Click both buttons.
3. Wait for the SXG cache to fill (up to 1 minute, typically 15 seconds). Continuing without waiting won't break anything, but keep in mind results may not be final and you may need to repeat the next steps one or more times.
4. Click the "Prefetch complete" button.
5. Observe that imagesrcset.png is correctly prefetched.
6. Click the "Prefetch incomplete" button.
7. Observe presence of the "Warning" header in the SXG response. No image is prefetched.

CORS errors may appear temporarily. You can ignore them.

What happens?

The "Prefetch complete" button causes to prefetch a document with 2 link tags:

      <link href="href.png" rel="preload" as="image" imagesrcset="href.png 1w, imagesrcset.png 2w">
      <link href="imagesrcset.png" rel="preload" as="image" imagesrcset="href.png 1w, imagesrcset.png 2w">  

The "Prefetch incomplete" button causes to prefetch a document with only 1 link tag:

    <link href="href.png" rel="preload" as="image" imagesrcset="imagesrcset.png 2w">
  

Explanation

There must be a separate <link> tag for each image referenced in the imagesrcset attributes.
The href attribute of each <link> tag should point to its corresponding image.

For the context see this article.