Responsive images
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%;
}