@zerodevx/svelte-img - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

package.json

		{
		"name": "@zerodevx/svelte-img",
		"version": "1.2.4",
		"version": "1.2.5",
		"description": "High-performance responsive images for SvelteKit",
		@@ -13,7 +13,7 @@ "author": "Jason Lee <jason@zerodevx.com>",
		"@sveltejs/adapter-static": "1.0.5",
		"@sveltejs/kit": "1.3.1",
		"@sveltejs/kit": "1.3.6",
		"@sveltejs/package": "1.0.2",
		"@tailwindcss/typography": "0.5.9",
		"autoprefixer": "10.4.13",
		"eslint": "8.32.0",
		"eslint": "8.33.0",
		"eslint-config-prettier": "8.6.0",
		@@ -31,3 +31,3 @@ "eslint-plugin-svelte3": "4.0.0",
		"tslib": "2.5.0",
		"typescript": "4.9.4",
		"typescript": "4.9.5",
		"vite": "4.0.4"
		@@ -34,0 +34,0 @@ },

README.md

		@@ -37,2 +37,27 @@ # svelte-img

		Optionally, to silent typescript
		[warnings](https://github.com/JonasKruckenberg/imagetools/issues/160) on image imports, create a new
		file at `src/ambient.d.ts`:

		```js
		// Squelch warnings of all imports from your image assets dir
		declare module '$lib/assets/*' {
		const image: Record<string, any>
		export default image
		}
		```

		### Under the hood

		Local image transformations are delegated to the excellent
		[vite-imagetools](https://github.com/JonasKruckenberg/imagetools) with a custom `?run` directive.
		This preset generates optimized images with sensible defaults, including a `base64` low-quality
		image placeholder.

		Invoke the preset with the `?run` query param:

		```js
		import 'path/to/asset?run`
		```

		## Usage
		@@ -83,6 +108,4 @@

		Local image manipulation is delegated to the excellent
		[vite-imagetools](https://github.com/JonasKruckenberg/imagetools) with a custom `?run` directive. By
		default, this generates 10 variants of every image - `avif/webp/jpg` formats at `480/1024/1920`
		widths; and a `16px webp/base64` low-quality image placeholder (LQIP).
		By default, `svelte-img` generates 10 variants of an original full-sized image - in `avif/webp/jpg`
		formats at `480/1024/1920` widths; and a `16px webp/base64` low-quality image placeholder (LQIP).

		@@ -118,3 +141,3 @@ To change this globally, edit your `vite.config.js`:
		// We override defaults to generate 5 variants instead - `avif/jpg` formats at `768/1024` + LQIP
		import src from '$lib/a/cat.jpg?width=640;1024&format=avif;jpg&run'
		import src from '$lib/a/cat.jpg?run&width=640;1024&format=avif;jpg'
		import Img from '@zerodevx/svelte-img'
		@@ -130,3 +153,3 @@ </script>
		higher quality LQIP at the expense of a larger `base64`, or set to 1px for a dominant single-colour
		background. To disable LQIP completely, set `?lqip=0&run`.
		background. To disable LQIP completely, set `?run&lqip=0`.

		@@ -136,3 +159,3 @@ <!-- prettier-ignore -->
		<script>
		import src from '$lib/a/cat.jpg?lqip=1&run'
		import src from '$lib/a/cat.jpg?run&lqip=1'
		import Img from '@zerodevx/svelte-img'
		@@ -154,3 +177,3 @@ </script>
		<script>
		import src from '$lib/a/cat.jpg?width=600&height=600&fit=cover&normalize&run'
		import src from '$lib/a/cat.jpg?run&width=600&height=600&fit=cover&normalize'
		import Img from '@zerodevx/svelte-img'
		@@ -162,2 +185,18 @@ </script>

		#### Lazy loading

		`svelte-img` utilises the browser's native lazy loading capability by setting the `loading="lazy"`
		attribute on the rendered `<img>` tag by default. This is supported by
		[most modern browsers](https://caniuse.com/loading-lazy-attr). To load an image eagerly instead:

		<!-- prettier-ignore -->
		```html
		<script>
		import src from '$lib/a/cat.jpg?run'
		import Img from '@zerodevx/svelte-img'
		</script>

		<Img {src} alt="cat" loading="eager" />
		```

		#### Remote images from an API
		@@ -164,0 +203,0 @@

global.d.ts

@zerodevx/svelte-img - npm Package Compare versions

Improved metrics

Worsened metrics