DONT ADD ANYTHING HERE!

Picture of apples or flamingo

Notes

  1. Best viewed on laptop in Responsive Design Mode
    1. ⌃ ⌘ R on Mac/Safari
    2. ⌥ ⌘ R on Mac/Firefox
  2. Flamingo
    Intrinsic Width Density Image name
    1006w 1x flamingo-marked-1x.jpg
    2013w 2x flamingo-marked-2x.jpg
    3019w 3x flamingo-marked-3x.jpg
  3. Apples
    Images made with Mathematica
    Intrinsic Width Density Image Name
    900w 1x apples900.webp
    1800w 2x apples1800.webp
    2700w 3x apples2700.webp
  4. Apples, Negated Image
    Intrinsic Width Density Image Name
    900w 1x negatedApples900.webp
    1. Images negated with Mathematica
    2. Wolfram language code 
      apples = ExampleData[{"TestImage", "Apples"}]
ColorNegate[apples]

Example

<picture>

    <source
        srcset = "../images/flamingo-marked-1x.jpg 1x, 
                  ../images/flamingo-marked-2x.jpg 2x, 
                  ../images/flamingo-marked-3x.jpg 3x"

        media = "(min-width:800px)">

    <source
        srcset = "../images/apples-marked-900.webp 1x, 
                  ../images/apples-marked-1800.webp 2x, 
                  ../images/apples-marked-2700.webp"

        media = "(min-width:600px)">

    <img src = "../images/negatedApples900.webp" 
         alt = "Picture of apples or flamingo">

</picture>

References