1.0.1 • Published 4 months ago

@tylermcrobert/svelte-sanity-image v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
4 months ago

svelte-sanity-image

A Svelte component for creating responsive, optimized images from Sanity.io. Powered by the Sanity Image Builder under the hood, it simplifies responsive image handling and layout shift prevention in your Svelte projects.

✨ Features

  • Prevents layout shifts by setting image dimensions automatically.
  • Creates srcset attributes for responsive images out of the box.
  • Supports custom aspect ratios.
  • Provides control of native <img /> attributes.
  • Available preloading of images with the preload prop.
  • Fully typed with TypeScript support and unit-tested for reliability.

📦 Installation

Install the package via npm:

npm install @tylermcrobert/svelte-sanity-image

🚀 Quick Start

A minimal example of using svelte-sanity-image:

<SanityImage
	{client}
	{image}
	sizes="(max-width: 768px) 50vw, 100vw"
	alt="The Beatles crossing Abbey Road in London."
/>

This component extends the standard <img /> element, so you can use any native attributes or events.

An example creating a wrapper component:

<script lang="ts">
	import { client } from '$lib/sanity';
	import Image, { type SvelteSanityImageProps } from '@tylermcrobert/svelte-sanity-image';

	type ImageProps = Omit<SvelteSanityImageProps, 'client'> & {
		aboveTheFold: boolean;
	};

	let { aboveTheFold, ...props }: ImageProps = $props();
</script>

<Image
	{...props}
	{client}
	quality={80}
	loading={aboveTheFold ? 'eager' : 'lazy'}
	fetchpriority={aboveTheFold ? 'high' : undefined}
/>

An example using getImageProps:

<script lang="ts">
	import { client } from '$lib/sanity';
	import Image, { type getImageProps } from '@tylermcrobert/svelte-sanity-image';

	type ImageProps = { image: SanityImageSource };

	let { image }: ImageProps = $props();

	let imageProps = $derived(getImageProps(client, image, { quality: 80 }));
</script>

<img {...imageProps} />

⚙️ Component Props

PropertyTypeDescriptionRequired
clientObjectA configured Sanity client or project details.Yes
imageObjectImage data returned from Sanity API.Yes
altStringDescriptive alt text for accessibility.Yes
sizesString | nullA responsive image size string (MDN reference). Set to null to bypass responsivity.Yes
aspectNumberEnforces an aspect ratio on the image.
preloadBooleanAdds a <link rel="preload" /> in <svelte:head> for prioritized loading.
srcsetBreakpointsstring[]Overrides the default breakpoints for srcset. Defaults to 640, 750, 828, 1080, 1200, 1920, 2048, 3840.

Optimization Defaults

This package makes similar default optimizations as Next/Image.

PropertyValueDescription
loadinglazyDefers loading of images until they are near the viewport.
autoFormattrueAutomatically return an image in the most optimized format supported by the browser as determined by its Accept header.
quality75Set automatically to 75 by Sanity`s internal image transformations

Supported Sanity transformations:

svelte-sanity-image supports the following Image Transformations:

blur, bg, dpr, width, height, quality, sharpen, format, invert, download, flipHorizontal, flipVertical, saturation, and frame.

🤝 Contributing

Go into the package.json and give your package the desired name through the "name" option. Also consider adding a "license" field and point it to a LICENSE file which you can create from a template (one popular option is the MIT license).

📜 License

MIT License © 2024 Tyler McRobert

1.0.1

4 months ago

1.0.0

5 months ago

0.4.0-next.6

7 months ago

0.4.0-next.7

7 months ago

0.4.0-next.3

7 months ago

0.4.0-next.4

7 months ago

0.4.0-next.5

7 months ago

0.3.13-next.2

7 months ago

0.3.13

7 months ago

0.3.12

1 year ago

0.3.11

1 year ago

0.4.0-next.2

1 year ago

0.4.0-next.1

1 year ago

0.3.0

1 year ago

0.3.6

1 year ago

0.3.5

1 year ago

0.3.8

1 year ago

0.3.7

1 year ago

0.3.2

1 year ago

0.3.1

1 year ago

0.3.4

1 year ago

0.3.3

1 year ago

0.3.9

1 year ago

0.2.22

1 year ago

0.2.21

1 year ago

0.2.20

1 year ago

0.2.19

1 year ago

0.2.18

1 year ago

0.2.17

1 year ago

0.2.16

1 year ago

0.2.15

1 year ago

0.2.14

1 year ago

0.2.13

1 year ago

0.2.12

1 year ago

0.2.11

1 year ago

0.2.10

1 year ago

0.3.0-next.2

1 year ago

0.3.0-next.1

1 year ago

0.2.7

1 year ago

0.2.9

1 year ago

0.2.8

1 year ago

0.2.6

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.0

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.1

2 years ago