Cacher is the code snippet organizer for pro developers

joshbroton

<picture alt="Description of image subject.">
    <source srcset="small.jpg 1x, small-highres.jpg 2x">
    <source media="(min-width: 768px)" 
            srcset="med.jpg 1x, med-highres.jpg 2x"> 
    <source media="(min-width: 1382px)" 
            srcset="large.jpg 1x, large-highres.jpg 2x"> 
    <img src="small.jpg" alt="Description of image subject."> 
</picture>

/* Responisive images now */

<script src="picturefill.js" type="text/javascript"></script>
<div data-picture data-alt="A giant stone face at The Bayon temple">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     
         data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      
         data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" 
         data-media="(min-width: 1000px)"></div>
    <!-- Fallback content for non-JS browsers. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face">
    </noscript>
</div>

<!-- Use object for older browsers 

delete svg width - height

-->

<object svg>
  
</object>


<object type="image/svg+xml" data="image.svg">
 <!--[if lte IE 8]> 
  <img src="image/twitter.png" alt="twitter img">
<![endif]-->
</object>


<style>
  
  img, object{
    max-width: 100%;
  }
</style>

/* Build a responsive websites treehouse */

img {
  max-width: 100%;
}