https://github.com/otterdev-io/sanity-img
Sanity image tags for common frontend frameworks
https://github.com/otterdev-io/sanity-img
Last synced: 5 months ago
JSON representation
Sanity image tags for common frontend frameworks
- Host: GitHub
- URL: https://github.com/otterdev-io/sanity-img
- Owner: otterdev-io
- Created: 2023-10-09T03:09:16.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-09T06:10:04.000Z (over 2 years ago)
- Last Synced: 2025-09-29T12:44:50.680Z (10 months ago)
- Language: TypeScript
- Size: 480 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# otterstack - sanity-img
An set of js framework components for rendering responsive `![]()
` elements for images fetched from [Sanity](https://www.sanity.io). They will generate the elements with a srcset optimised for a range of resolutions and formats, using sanity's image API to serve the optimised images. Then you provide the `sizes` attribute, to ensure the browser delivers the ideal source. Refer to [Responsive images - MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) for information on providing responsive images.
Then usage can be as simple as:
```astro
---
import SanityImg from "@otterstack/sanity-img-astro"
---
```
Refer to the readme file in each package for specific usage instructions in the relevant framework:
- [Astro](https://github.com/otterdev-io/sanity-img/tree/main/astro#readme)
- [Svelte](https://github.com/otterdev-io/sanity-img/tree/main/svelte#readme)
There is a sample project demonstrating its use in astro, with astro and svelte components, in the `examples/astro` directory.