responsive-img.html

<!-- from: http://www.creativebloq.com/features/the-pro-s-guide-to-responsive-web-design -->

<img
    <!-- Declare the fallback image for all non picture supporting browsers -->
    src="horse-350.jpg"
    <!-- Declare all of the image sizes in srcset. Include the image width using the w descriptor to inform the browser of the width of each image.-->
    srcset="horse-350.jpg 350w,
    horse-500.jpg 500w,
    horse-1024.jpg 1024w,
    horse.jpg 2000w"
    <!-- Sizes inform the browser of our site layout. Here we're saying for any viewport that is 64ems and bigger, use an image that will occupy 70% of the viewport -->
    sizes="(min-width: 64em) 70vw,
    <!-- If the viewport isn't that big, then for any viewport that is 37.5ems and bigger, use an image that occupies 95% of the viewport -->
    (min-width: 37.5em) 95vw,
    <!-- and if the viewport is smaller than that, then use an image that occupies 100% of the viewport-->
    100vw"
    <!-- always have alt text.-->
    alt="A horse"
  >