improve intrinsic dimension demo (see scottjehl#628)

index.html

@@ -110,12 +110,12 @@ <h2 class="hed-section" id="examples">Markup Patterns</h2>
 			<h3 class="hed-pattern" id="img-srcset">Using the `srcset` attribute</h3>
 			<p class="usecase">The <code>srcset</code> attribute (without <code>sizes</code>) is used to serve larger—but otherwise identical—image sources to high resolution displays only.</p>
 
-			<pre><code>&lt;img srcset=&quot;examples/images/large.jpg 1x, examples/images/extralarge.jpg 2x&quot; alt=&quot;…&quot;&gt;</code></pre>
+			<pre><code>&lt;img srcset=&quot;examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x&quot; alt=&quot;…&quot;&gt;</code></pre>
 
 			<p>Here's how that renders on your display:</p>
-			<img srcset="examples/images/large.jpg 1x, examples/images/extralarge.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+			<img srcset="examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
 
-			<p>If the <a href="dist/plugins/intrinsic-dimension/">intrinsic dimension plugin</a> is installed: The <code>2x</code> source will be shown at the inherent width of the <code>1x</code> source—so the two sources will occupy the same space in your layout, but the <code>2x</code> source will be displayed at double the pixel density. This only applies to the <em>natural</em> size of the <code>img</code>—resizing the image via CSS will behave as expected.</p>
+			<p>If the <a href="dist/plugins/intrinsic-dimension/">intrinsic dimension plugin</a> is installed: The <code>2x</code> source will be automatically scaled down by 2  — so that the image will occupy the same space in your layout as the <code>1x</code>, but the <code>2x</code> source will be displayed at double the pixel density. This only applies to the <em>natural</em> size of the <code>img</code>—resizing the image via CSS or <code>width</code> content attribute will behave as expected.</p>
 
 			<p class="note" id="caching">Modern browsers that support <code>srcset</code> natively may select a cached file that meets the minimum media condition, even if it is “overkill” for the current media condition. For example, a <code>2x</code> file may be shown on a <code>1x</code> device, if that <code>2x</code> file is already in the cache—there’d be no reason to make an additional request when the user will see no discernable difference, after all. This is typically encountered only on sites with multiple versions of the same image displayed in multiple elements at different sizes (like our demo page). The occasional selection of "oversize" resources—depending on the cache—is currently an expected behavior in native implementations and you may encounter it during testing.</p>