Skip to content

Commit 187f550

Browse files
zerodevxzerodevx
committed
Init v1
1 parent 0088865 commit 187f550

28 files changed

+5894
-5422
lines changed

‎.eslintrc.cjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,9 @@ module.exports = {
1111
browser: true,
1212
es2017: true,
1313
node: true
14+
},
15+
rules: {
16+
'no-tabs': 'error',
17+
'no-unexpected-multiline': 'error'
1418
}
1519
}

‎README.md‎

Lines changed: 41 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,70 @@
11
# svelte-img
22

3-
A component to lazy-load images natively and progressively.
3+
> Elegant responsive images for SvelteKit.
44
5-
DEMO: https://zerodevx.github.io/svelte-img/
5+
Demo: https://zerodevx.github.io/svelte-img/
66

7-
This is a super simple and lightweight component that transforms this:
7+
## Install
88

9-
```html
10-
<svelte-img src="/image.jpg" placeholder="/image-tiny.jpg"></svelte-img>
11-
```
12-
13-
into this:
9+
Install the package:
1410

15-
```html
16-
<div>
17-
<div style="background:url('/image-tiny.jpg') center center / cover no-repeat"></div>
18-
<img src="/image.jpg" alt="image" loading="lazy" />
19-
</div>
2011
```
21-
22-
where the placeholder will be gaussian blurred and the main image beautifully transitioned in place
23-
when its download completes.
24-
25-
The work of lazy-loading is deferred to browsers to handle natively via the `loading="lazy"`
26-
attribute. For browsers that don't support this (yet), images will load as normal (i.e. eagerly).
27-
28-
## Usage
29-
30-
### Install
31-
32-
To install latest stable:
33-
34-
```bash
3512
$ npm i -D @zerodevx/svelte-img
3613
```
3714

38-
**NOTE**
15+
Add `imagetools` plugin into your `vite.config.js`:
3916

40-
This is still in `pre-release` so install with the `@next` tag:
17+
```js
18+
import { sveltekit } from '@sveltejs/kit/vite'
19+
import { imagetools } from '@zerodevx/svelte-img'
4120

42-
```bash
43-
$ npm i -D @zerodevx/svelte-img@next
44-
```
21+
/** @type {import('vite').UserConfig} */
22+
const config = {
23+
plugins: [sveltekit(), imagetools()]
24+
}
4525

46-
### Use as a Svelte component
26+
export default config
27+
```
4728

48-
Simply consume anywhere in your app:
29+
## Usage
4930

50-
`MyComponent.svelte`
31+
Use anywhere in your Svelte app:
5132

33+
<!-- prettier-ignore -->
5234
```html
5335
<script>
54-
import Img from '@zerodevx/svelte-img`
36+
// Import original max-sized image with `?run` query param.
37+
import cat from '$lib/assets/cat.jpg?run'
38+
import { Img } from '@zerodevx/svelte-img'
5539
</script>
5640

57-
<style>
58-
.container {
59-
width: 100%;
60-
max-width: 800px;
61-
height: 500px;
62-
}
63-
</style>
64-
65-
<div class="container">
66-
<img
67-
srcset="/images/hello-800.jpg 800w, /images/hello-480.jpg 480w"
68-
sizes="(max-width: 600px) 480px, 800px"
69-
src="/images/hello-800.jpg"
70-
alt="hello"
71-
placeholder="/images/hello-20.jpg"
72-
/>
73-
</div>
41+
<Img class="any classes" src="{cat}" alt="Cute cat" />
7442
```
7543

76-
### Use as native Web Component
77-
78-
Just load the web component definition from CDN then use anywhere.
44+
The `<Img>` tag renders into:
7945

8046
```html
81-
<head>
82-
...
83-
<!-- Load the web component definition -->
84-
<script type="module" src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-img@0"></script>
85-
</head>
86-
<body>
87-
...
88-
<!-- Use anywhere -->
89-
<div class="explicitly-sized-container">
90-
<svelte-img src="/image.jpg"></svelte-img>
91-
</div>
92-
</body>
93-
```
94-
95-
Or you can
96-
[download](https://raw.githubusercontent.com/zerodevx/svelte-img/master/dist/svelte-img.js) the
97-
script and host it yourself.
98-
99-
## Contributing
100-
101-
Fork, clone and install dependencies:
102-
103-
```bash
104-
$ git clone https://github.com/<username>/svelte-img
105-
$ cd svelte-img
106-
$ npm i
107-
```
108-
109-
Start the dev server:
110-
111-
```bash
112-
$ npm run dev
113-
```
114-
115-
Create a new branch, make changes and commit:
116-
117-
```bash
118-
$ git checkout -b my-contribution
119-
$ git add -A
120-
$ git commit -m <message>
121-
```
122-
123-
Lint the code:
124-
125-
```bash
126-
$ npm run lint
47+
<picture>
48+
<source
49+
type="image/avif"
50+
srcset="path/to/avif/480 480w, path/to/avif/1024 1024w, path/to/avif/1920 1920w"
51+
/>
52+
<source
53+
type="image/webp"
54+
srcset="path/to/webp/480 480w, path/to/webp/1024 1024w, path/to/webp/1920 1920w"
55+
/>
56+
<img
57+
class="any classes"
58+
src="path/to/jpg/480"
59+
srcset="path/to/jpg/480 480w, path/to/jpg/1024 1024w, path/to/jpg/1920 1920w"
60+
loading="lazy"
61+
decoding="async"
62+
style='background: url("data:image/webp;base64,UklGRmwAAABXRUJQVlA4IGAAAADwAQCdASoQAAwABUB8JbACdACVHAuzHEAA+FXw/vPuIDGE/UU8XBsY0aVUcxdGEcG5CngK2JQO7wxCmgwPJrlpw4REDWFeMX1yfLUHBxkTmnPYhBDAP1QyVOF7EB/AAAA=") no-repeat center/cover'
63+
alt="Cute cat"
64+
/>
65+
</picture>
12766
```
12867

129-
Then raise a PR.
130-
13168
## License
13269

13370
ISC

0 commit comments

Comments
 (0)