examples/demo-01.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8 />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Picturefill - Demo</title>
		<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
		<link href='../examples/styles.css' rel='stylesheet' type='text/css'>

		<script>
			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
			document.createElement( "picture" );
		</script>
		<script async="true" src="../dist/picturefill.js"></script>
	</head>
	<body>
		<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>


		<h3>An img with "srcset" and sizes" attributes:</h3>
<pre><code>&lt;img sizes=&quot;(min-width: 40em) 80vw, 100vw&quot;
srcset=&quot;../examples/images/medium.jpg 375w, ../examples/images/large.jpg 480w, ../examples/images/extralarge.jpg 768w&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
</code></pre>

		<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>

		<img sizes="(min-width: 40em) 80vw, 100vw"
				srcset="../examples/images/small.jpg 375w, ../examples/images/large.jpg 480w, ../examples/images/extralarge.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

	</body>
</html>