@@ -47,8 +47,8 @@ declare module '$lib/assets/*' {
47
47
### Under the hood
48
48
49
49
Local 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
52
52
image placeholder.
53
53
54
54
Invoke the preset with the ` ?as=run ` query param:
@@ -238,7 +238,7 @@ Renders into:
238
238
239
239
The full [ repertoire] ( https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md )
240
240
of 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.
242
242
243
243
<!-- prettier-ignore -->
244
244
``` html
@@ -263,8 +263,11 @@ select when those conditions are true. Read up more on
263
263
import Img from ' @zerodevx/svelte-img'
264
264
</script >
265
265
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
+ -->
268
271
<img {src} alt =" cat" sizes =" (max-width: 600px) 480px, 800px" />
269
272
```
270
273
@@ -317,7 +320,7 @@ attribute on the rendered `<img>` tag by default. This is supported by
317
320
318
321
### Batch loading local images
319
322
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 ) .
321
324
322
325
<!-- prettier-ignore -->
323
326
``` html
@@ -347,18 +350,12 @@ Use the `svelte-img` component on its own by passing a `src` object, like so:
347
350
import Img from ' @zerodevx/svelte-img'
348
351
349
352
const src = {
350
- img: { src: ' path/to/img' , w: 1920 , h: 1080 },
351
353
sources: {
352
354
// 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 },
362
359
}
363
360
</script >
364
361
0 commit comments