Responsive images with high dpi and screen size.

index.html

<picture>
  <source
  	media="(min-width: 1024px)"
  	srcset="opera-fullshot-1x.jpg 1x,
  			opera-fullshot-2x.jpg 2x,
  			opera-fullshot-3x.jpg 3x">
  <img
  	src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
  	srcset="opera-closeup-2x.jpg 2x,
  			opera-closeup-3x.jpg 3x">
</picture>

<!--
  For browser windows with a width of 1024 CSS pixels and wider, 
  a full-shot photo is used; smaller browser windows get a close-up 
  photo. In addition, these photos are served as high-resolution images 
  to browsers on devices with high-DPI screens; other browsers get a 
  normal image.
-->