Astro Sanity Picture
Asto component for rendering Sanity images in picture element
Overview
The Astro Sanity Picture component is an innovative solution for rendering responsive <picture> elements that elegantly serve images fetched from Sanity's image API. With adaptive resolutions and formats, this component optimizes image loading based on the user's device, ensuring an enriched viewing experience across all screen sizes. Whether you're developing a simple webpage or a more intricate application, this component streamlines the image-rendering process, making it as efficient as possible without sacrificing quality.
By effectively utilizing a minimal setup, the Astro Sanity Picture component allows developers to customize various attributes of the <img> element. This flexibility enables images to be displayed at varying widths depending on the screen size, automatically selecting the most appropriate resolution for the given viewport. This ensures that users receive a visually appealing experience while improving page load times.
Features
- Responsive Design: Automatically adjusts image size based on viewport width, offering optimal display (50vw or 100vw).
- Optimized Image Fetching: Utilizes a simple GROQ query to fetch images without requiring extensive metadata, while still optimizing the output for size.
- Low-Quality Placeholder: Integrates a low-quality image placeholder (LQIP) for a smoother loading experience, enhancing perceived performance.
- Flexible Source Configuration: Supports customizable source elements with multiple widths and media queries to fine-tune image display.
- WebP Support: Optionally includes images in WebP format for superior compression, ensuring high-quality visuals and reduced bandwidth usage.
- Attributes Customization: Easily set various attributes for the
<img>and<source>elements, enabling tailored usage depending on application needs. - Lazy Loading Built-In: Comes with built-in lazy loading to defer offscreen images loading until they are needed, improving initial load times.
- Seamless Integration: Works seamlessly with Sanity's image API and integrates smoothly into existing Astro projects.
- Astro
Astro is the all-in-one web framework designed for speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
- Sanity
Sanity is a fully customizable, API-first, and cloud-based headless content management system that enables developers to manage structured content across multiple channels and platforms.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.