Cacher is the code snippet organizer for pro developers

<!-- Here's an exammple of how to set up media queries inline.  
As in this example,  this is handy for swapping out different sized images at
different screen sizes -- >

<picture> 
  <source media="(min-width: 1024px)" »
  srcset="fullsize.jpg">
  <source media="(min-width: 700px)" »
  srcset="midsize.jpg">
  <img src="crop.jpg" alt="My image">
</picture>”

Excerpt From: Jeremy Keith and Rachel Andrew. “HTML5 for Web Designers, 2nd Edition.” iBooks. 

<!-- You can also use the above method to deliever different images for different resolution screens. -->

<picture>
  <source media="(min-width: 1024px)" 
    srcset="fullsize-1x.jpg 1x, fullsize-2x.jpg »
    2x, fullsize-3x.jpg 3x">
    <img src="crop-1x.jpg" alt="My image" »
    srcset="crop-2x.jpg 2x, crop-3x.jpg 3x">
</picture>”

Excerpt From: Jeremy Keith and Rachel Andrew. “HTML5 for Web Designers, 2nd Edition.” iBooks.