diff --git a/examples/demo-02.html b/examples/demo-02.html
index 00fa5beb..17ed1ae6 100644
--- a/examples/demo-02.html
+++ b/examples/demo-02.html
@@ -25,8 +25,8 @@ <h2 class="hed-pattern">The <code>picture</code> element</h2>
 
 	<pre><code>&lt;picture&gt;
   &lt;source srcset=&quot;../examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
-  &lt;source srcset=&quot;../examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
-  &lt;img srcset=&quot;../examples/images/medium.jpg&quot; alt=&quot;…&quot;&gt;
+  &lt;source srcset=&quot;../examples/images/art-large.jpg&quot; media=&quot;(min-width: 600px)&quot;&gt;
+  &lt;img srcset=&quot;../examples/images/art-medium.jpg&quot; alt=&quot;…&quot;&gt;
 &lt;/picture&gt;</code></pre>
 
 		<h3 class="subhed">Supporting Picture in Internet Explorer 9</h3>
@@ -35,9 +35,9 @@ <h3 class="subhed">Supporting Picture in Internet Explorer 9</h3>
 <pre><code>&lt;picture&gt;
   &lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
   &lt;source srcset=&quot;../examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
-  &lt;source srcset=&quot;../examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
+  &lt;source srcset=&quot;../examples/images/art-large.jpg&quot; media=&quot;(min-width: 600px)&quot;&gt;
   &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
-  &lt;img srcset=&quot;../examples/images/medium.jpg&quot; alt=&quot;…&quot;&gt;
+  &lt;img srcset=&quot;../examples/images/art-medium.jpg&quot; alt=&quot;…&quot;&gt;
 &lt;/picture&gt;</code></pre>
 
 		<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>
@@ -45,9 +45,9 @@ <h3 class="subhed">Supporting Picture in Internet Explorer 9</h3>
 		<picture>
 			<!--[if IE 9]><video style="display: none;"><![endif]-->
 			<source srcset="../examples/images/extralarge.jpg" media="(min-width: 1000px)">
-			<source srcset="../examples/images/large.jpg" media="(min-width: 800px)">
+			<source srcset="../examples/images/art-large.jpg" media="(min-width: 600px)">
 			<!--[if IE 9]></video><![endif]-->
-			<img srcset="../examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+			<img srcset="../examples/images/art-medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
 		</picture>
 
 	</main>
diff --git a/examples/images/art-large.jpg b/examples/images/art-large.jpg
new file mode 100644
index 00000000..99d72cd2
Binary files /dev/null and b/examples/images/art-large.jpg differ
diff --git a/examples/images/art-medium.jpg b/examples/images/art-medium.jpg
new file mode 100644
index 00000000..f17b7293
Binary files /dev/null and b/examples/images/art-medium.jpg differ
diff --git a/examples/images/art-small.jpg b/examples/images/art-small.jpg
new file mode 100644
index 00000000..edee676e
Binary files /dev/null and b/examples/images/art-small.jpg differ
diff --git a/index.html b/index.html
index 36e6f934..cffc91bd 100644
--- a/index.html
+++ b/index.html
@@ -149,17 +149,17 @@ <h3 class="hed-pattern" id="using-picture">Using the `picture` element</h3>
 
 	<pre><code>&lt;picture&gt;
   &lt;source srcset=&quot;examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
-  &lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
-  &lt;img srcset=&quot;examples/images/medium.jpg&quot; alt=&quot;…&quot;&gt;
+  &lt;source srcset=&quot;examples/images/art-large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
+  &lt;img srcset=&quot;examples/images/art-medium.jpg&quot; alt=&quot;…&quot;&gt;
 &lt;/picture&gt;</code></pre>
 
 			<p>Here's how that renders at your current viewport size:</p>
 
-			<picture>
-				<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
-				<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
-				<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
-			</picture>
+		<picture>
+			<source srcset="../examples/images/extralarge.jpg" media="(min-width: 1000px)">
+			<source srcset="../examples/images/art-large.jpg" media="(min-width: 600px)">
+			<img srcset="../examples/images/art-medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+		</picture>
 			<a href="examples/demo-02.html" class="demo">Standalone <code>picture</code> demo</a>