The multi-framework JavaScript library for responsive images.
π¦ Multi Framework: Supports Vite and Webpack for local image processing, a framework-agnostic core and components for multiple frontend frameworks: Ember.js, Lit, Solid, Svelte and React.
π Next-gen image formats: Supports basic PNG and JPEG formats, as well as next-gen WebP and AVIF, for increased performance with optimal image quality at small file sizes.
π οΈ Local image processing: Fast image processing of local images with a selection of optionally applyable filters and effects, using the popular sharp library.
π Image CDNs: Besides processing of local images, it also supports integrating remote images from image CDNs like Cloudinary or imgix using a versatile image provider abstraction.
β³ Image Placeholders: Supports Low Quality Image Placeholders (LQIP) techniques to show a preview while loading, using different strategies like a blurry low-res image, BlurHash or a simple dominant color.
π± Layout modes: Layout modes for fixed sizes (with 1x and 2x image variants) as well as responsive layouts (srcset with optimized image sizes across all devices).
π Web Performance: Lazy rendering by default, with optimized content-visibility and decoding settings and optimized markup, to prevent CLS (Cumulative Layout Shift), a core Web Vital and Lighthouse metric.
β¨ High Quality: Engineered with quality in mind, all functionality is fully tested (unit and integration tests), packages ship with native TypeScript types.
Visit responsive-image.dev for our complete documentation site.
See the Contributing guide for details.
This project is licensed under the MIT License.