Responsive images w/ srcset & sizes

srcsetsizes.html

<img
    <!-- Fallback: smallest image in our srcset, see below -->
    src="small.jpg"

    <!-- srcset consists of three versions of the same image:

         * large.jpg is 1280px wide
         * medium.jpg is 768px wide
         * small.jpg is 320pw wide

         This is just so that the browser knows which images are
         available. It will determine which to use when based on
         this and the sizes attribut (see below). -->
    srcset="large.jpg  1280w,
            medium.jpg  768w,
            small.jpg   320w"

    <!-- sizes is a way to tell the browser about layout changes

         In this example, we'd have the full width of the viewport
         up to 48em (768px, iPad portrait), then 75% of it. -->
    sizes="(min-width: 48em) 75vw,
           100vw"

    <!-- … and of course, responsive images need an alt text as
         well. They could also have classes etc. -->
    alt="…">