@@ -47,8 +47,8 @@ declare module '$lib/assets/*' {
4747### Under the hood
4848
4949Local image transformations are delegated to the excellent
50- [ vite-imagetools] ( https://github.com/JonasKruckenberg/imagetools ) with a custom ` run ` directive.
51- This preset generates optimized images with sensible defaults, including a ` base64 ` low-quality
50+ [ ` vite-imagetools ` ] ( https://github.com/JonasKruckenberg/imagetools ) with a custom ` run ` directive.
51+ This preset generates optimised images with sensible defaults, including a ` base64 ` low-quality
5252image placeholder.
5353
5454Invoke the preset with the ` ?as=run ` query param:
@@ -238,7 +238,7 @@ Renders into:
238238
239239The full [ repertoire] ( https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md )
240240of transformation directives offered by
241- [ vite-imagetools] ( https://github.com/JonasKruckenberg/imagetools ) can be used.
241+ [ ` vite-imagetools ` ] ( https://github.com/JonasKruckenberg/imagetools ) can be used.
242242
243243<!-- prettier-ignore -->
244244``` html
@@ -263,8 +263,11 @@ select when those conditions are true. Read up more on
263263 import Img from ' @zerodevx/svelte-img'
264264 </script >
265265
266- <!-- When the viewport is <=600px, tell the browser's image preloader that once the CSS for our
267- design has been parsed and applied, we expect the width of the image in our design to be 480px -->
266+ <!--
267+ When the viewport is <=600px, tell the browser's image preloader that once
268+ the CSS for our design has been parsed and applied, we expect the width of
269+ the image in our design to be 480px.
270+ -->
268271<img {src} alt =" cat" sizes =" (max-width: 600px) 480px, 800px" />
269272```
270273
@@ -317,7 +320,7 @@ attribute on the rendered `<img>` tag by default. This is supported by
317320
318321### Batch loading local images
319322
320- Use Vite's ` import.meta.glob ` [ feature] ( https://vitejs.dev/guide/features.html#glob-import ) .
323+ Use ` Vite ` 's ` import.meta.glob ` [ feature] ( https://vitejs.dev/guide/features.html#glob-import ) .
321324
322325<!-- prettier-ignore -->
323326``` html
@@ -347,18 +350,12 @@ Use the `svelte-img` component on its own by passing a `src` object, like so:
347350import Img from ' @zerodevx/svelte-img'
348351
349352const src = {
350- img: { src: ' path/to/img' , w: 1920 , h: 1080 },
351353 sources: {
352354 // Order is important; last format is fallback img
353- webp: [
354- { src: ' path/to/img' , w: 1920 },
355- { src: ' path/to/img' , w: 1024 }
356- ],
357- jpeg: [
358- { src: ' path/to/img' , w: 1920 },
359- { src: ' path/to/img' , w: 1024 }
360- ]
361- }
355+ webp: ' path/to/480.webp 480w, ...' , // srcset
356+ jpeg: ' ...'
357+ },
358+ img: { src: ' path/to/img' , w: 1920 , h: 1080 },
362359}
363360 </script >
364361
0 commit comments