DONT ADD ANYTHING HERE!

  1. The picture element contains zero or more source elements and one img element to offer alternative versions of an image for different display/device scenarios
  2. The browser will consider each child source element and choose the best match among them
  3. If no matches are found—or the browser doesn't support the picture element—the URL of the img element's src attribute is selected
  4. The selected image is then presented in the space occupied by the img element
  5. The img element must be present, and should appear last ( after the final source element)
  6. The image defined in a matching source element is substituted into the src attribute of the img element
  7. The picture element itself does not display anything; it merely provides a context for its contained img element that enables it to choose from multiple URLs
  8. width and height are defined by the img element values

Notes

  1. source
    1. The source element allows authors to specify multiple alternative source sets for img elements or multiple alternative media resources for media elements
    2. The source element's parent is a picture element
    3. The source element supports dimension attributes
    4. The img element can use the width and height attributes of a source instead of the img element itself
    5. srcset
      1. The srcset attribute must be present, and is a srcset attribute.
      2. It is used to offer a list of possible images based on size or the display's pixel density
      3. It is composed of a comma-separated list of image descriptors
      4. Each image descriptor is composed of a URL of the image, and either:
        1. A width descriptor followed by a w (such as 300w)
        2. A pixel density descriptor, followed by an x (such as 2x) to serve a high-res image for high-DPI screens
      5. width and pixel density descriptors should not be used together
      6. A missing pixel density descriptor implies 1x
      7. Duplicate descriptor values are not allowed (2x & 2x, 100w & 100w)
  2. type
    1. The type attribute may be present
    2. It does not represent anything on its own
    3. If present, the value must be a valid MIME type string
  3. media
    1. The media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each source element
    2. If the source media condition evaluates to false, the browser skips it and evaluates the next element inside picture
  4. Two Rules
    1. The source child element of picture must have srcset but must not have src
    2. The source child element of audio/video must have src but must not have srcset

Example

picture of apple

HTML

<picture>
    <source 
        srcset="../images/apples-marked-900.webp" 
        media="(min-width:800px)">

    <source 
        srcset="../images/negatedApples900.webp" 
        media="(min-width:600px)">
    
    <img 
        class="fallback" 
        src="../images/apples-marked-900.webp" 
        alt="picture of apple">

</picture>

mnemonic

  1. picture > source —> srcset not src
  2. audio/video > source —> src not srcset
  3. (Summary) PSST picture–source–srcset

References

MDN: picture element
HTML Living Standard: picture element