7/19/2014 - 9:31 PM

Responsive images

Responsive images


<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."> 

/* 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. -->
        <img src="external/imgs/small.jpg" alt="A giant stone face">
<!-- Use object for older browsers 

delete svg width - height


<object svg>

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

  img, object{
    max-width: 100%;
/* Build a responsive websites treehouse */

img {
  max-width: 100%;