Reword "Art direction" docs in README.md (#43)

Author: leoj3n

README.md

@@ -251,21 +251,52 @@ of transformation directives offered by
 <Img {src} alt="cat" />
 ```
 
-### Art direction
+### Responsive Image Sizes
 
 Use the `sizes` attribute to define media conditions that provide hints as to which image size to
-select when those conditions are true. Read up more on the
-[art direction problem](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+select when those conditions are true. Read up more on
+[responsive images and the picture element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture).
 
-<!-- prettier-ignore -->
 ```html
 <script>
-  import src from '$lib/a/cat.jpg?w=480;800as=run
+  import src from '$lib/a/cat.jpg?w=480;800&as=run'
   import Img from '@zerodevx/svelte-img'
 </script>
 
-<!-- If viewport is <=600px, use 480px as viewport width -->
-<Img {src} alt="cat" sizes="(max-width: 600px) 480px, 800px" />
+<!-- When the viewport is <=600px, tell the browser's image preloader that once the CSS for our 
+design has been parsed and applied, we expect the width of the image in our design to be 480px -->
+<img {src} alt="cat" sizes="(max-width: 600px) 480px, 800px" />
+```
+
+Renders into:
+
+```html
+<picture>
+  <source
+    type="image/avif"
+    sizes="(max-width: 600px) 480px, 800px"
+    srcset="path/to/avif-480 480w, path/to/avif-800 800w"
+  />
+  <source
+    type="image/webp"
+    sizes="(max-width: 600px) 480px, 800px"
+    srcset="path/to/webp-480 480w, path/to/webp-800 800w"
+  />
+  <source
+    type="image/jpeg"
+    sizes="(max-width: 600px) 480px, 800px"
+    srcset="path/to/jpeg-480 480w, path/to/jpeg-800 800w"
+  />
+  <img
+    alt="cat"
+    width="800"
+    height="600"
+    loading="lazy"
+    decoding="async"
+    src="path/to/jpeg-800"
+    style="background: url(data:image/webp;base64,XXX) center center / cover no-repeat;"
+  />
+</picture>
 ```
 
 ### Lazy loading