{"repo":"coreyward/sanity-image","free":true,"listed":false,"github":"https://github.com/coreyward/sanity-image","clone":"git clone https://github.com/coreyward/sanity-image.git","description":"React component for displaying well-optimized images from Sanity.io easily","language":"TypeScript","stars":140,"topics":["image","react","sanity","sanity-io","srcset","images"],"license":null,"category":"media-processing","readme_excerpt":"sanity-image A well-considered React component for displaying images from Sanity. At a glance: - Outputs a single tag, no nested DOM structure to mess with - Zero styling included so you can style it however you want…it's just an img tag! - Supports low-quality image previews out of the box, without build-time penalties (native lazy loading) - Generates a srcSet automatically based on the width you specify - Dynamic srcSet factor based on image output width - Knows exactly what size the image will be and sets width and height attributes accordingly - Supports crop and hotspot values from the Sanity Studio - Automatically crops to the most “interesting” part of the image if the aspect ratio changes and no hotspot is provided - Images are never scaled up - Tiny 4kb bundle size (2kb gzipped) - No dependencies - TypeScript support - Works with Gatsby, Next.js, and any other React-based framework - Polymorphic component (supports as prop to render as a custom component) Quick Start Install it: Use it: You can find the full writeup on getting going below, but in the interest of making it easy to see if this is the thing you are looking for, here’s a quick example of most of what you’ll need to know: Simplest Case : This will render the image out assuming it will be displayed at half its original width with a srcSet included (multiplies vary based on original image size): More full-featured example : That’s the gist. Read on for more. 👇 Details How it works at a glance: - The image","default_branch":null,"files":null,"tree":[],"storefront":"/r/coreyward","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/coreyward/sanity-image/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}