Skip to content

Commit a04edd6

Browse files
committed
Prep for patch
1 parent ba403fb commit a04edd6

File tree

3 files changed

+2644
-1396
lines changed

3 files changed

+2644
-1396
lines changed

README.md

+13-16
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ declare module '$lib/assets/*' {
4747
### Under the hood
4848

4949
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
5252
image placeholder.
5353

5454
Invoke the preset with the `?as=run` query param:
@@ -238,7 +238,7 @@ Renders into:
238238

239239
The full [repertoire](https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md)
240240
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.
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:
347350
import Img from '@zerodevx/svelte-img'
348351
349352
const 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

Comments
 (0)