Update demo

Author: zerodevx

README.md

@@ -116,7 +116,7 @@ import Img from '@zerodevx/svelte-img'
 
 By default, LQIPs are 16px in width and set to `cover` the full image dimension. Increase for a
 higher quality LQIP at the expense of a larger `base64`, or set to 1px for a dominant single-colour
-background.
+background. To disable LQIP completely, set `?lqip=0`.
 
 <!-- prettier-ignore -->
 ```html
@@ -125,7 +125,7 @@ import src from '$lib/a/cat.jpg?lqip=1&run'
 import Img from '@zerodevx/svelte-img'
 </script>
 
-<!-- Should render a dominant single-colour background -->
+<!-- Render dominant colour background -->
 <Img {src} alt="cat" >
 ```
 

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
 import '../app.postcss'
-import { dev } from '$app/env'
+import { dev } from '$app/environment'
 </script>
 
 <svelte:head>

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-import cat01 from './cat01.jpg?run&width=480;1024;1920;2560'
+import cat01 from './cat01.jpg?run&width=480;1024;1920;2560&height=1024'
 import cat02 from './cat02.jpg?run'
 import cat03 from './cat03.jpg?run'
 import cat04 from './cat04.jpg?run'
@@ -18,15 +18,15 @@ import Img from '$lib/index.js'
 
 const features = [
   [
-    'Render the bare minimum, minimally invasive, HTML code to represent responsive images, served in multiple widths and next-gen formats.',
+    'Full width image in 10 variants - <code>avif/webp/jpg</code> formats at <code>480/1024/1920</code> widths, and a LQIP background.',
     cat02
   ],
   [
     'Delegate the heavy lifting to native browser handlers and existing build pipelines. Render <strong>&lt;img&gt;</strong> tags with modern defaults, with other component props spread into it.',
     cat03
   ],
   [
-    'Images still work without Javascript. Try disabling JS and refreshing the page. Also try checking the lighthouse score.',
+    'Images still work without Javascript. Try disabling JS and refreshing the page. Also check out the lighthouse score.',
     cat04
   ]
 ]
@@ -46,11 +46,20 @@ let selected = 0
   </div>
 </div>
 
-<div class="max-w-7xl mx-auto prose text-center px-4 mb-28">
-  {#each features as f}
-    <p>{@html f[0]}</p>
-    <Img class="w-full h-128 object-cover" src={f[1]} alt="cat" />
-  {/each}
+<div class="max-w-7xl mx-auto prose px-4 mb-28">
+  <h1>svelte-img</h1>
+  <blockquote>
+    Render the bare minimum, minimally invasive, LQIP-included HTML code to represent responsive
+    images, served in multiple widths and next-gen formats.
+  </blockquote>
+  <ol>
+    {#each features as f}
+      <li>
+        <p>{@html f[0]}</p>
+        <Img class="w-full h-128 object-cover" src={f[1]} alt="cat" />
+      </li>
+    {/each}
+  </ol>
 
   <p>
     Image <code>src</code> can be dynamically updated - well, this requires Javascript because interactivity.