Challenge 1: Write a Responsive <picture> — Possible Solution
====================================================================

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.jpg" width="600" height="600" alt="Product photo" loading="lazy">
</picture>

WHY THIS WORKS
--------------
- The two <source> elements are listed AVIF first, then WebP — matching
  the chapter's own example ordering, since the browser tries each
  <source> in order and uses the first one whose "type" it supports,
  meaning the most space-efficient format the browser can handle gets
  picked automatically.
- The fallback <img> tag still carries width="600" height="600" —
  regardless of which format actually ends up loading (AVIF, WebP, or
  the JPEG fallback), the browser can reserve the correct box
  immediately from these attributes, continuing to do Chapter 3's
  CLS-prevention work no matter which source wins.
- loading="lazy" is applied HERE specifically because this chapter's
  challenge describes a "below-the-fold product image" — this is
  exactly the correct, safe use case the chapter's own tip box
  describes: an offscreen image that isn't visible on initial load, not
  an above-the-fold or LCP candidate. Applying loading="lazy" to a
  below-the-fold image is the intended, beneficial use of the
  attribute, unlike applying it to a hero image which the tip box
  specifically warns against.
- alt="Product photo" is included since every real <img> should carry
  meaningful alt text — while not the direct focus of this chapter,
  it's a baseline correctness expectation for any image markup being
  written.