React Smart Image
A zero-dependency drop-in image component with Core Web Vitals built in
Build Faster React Apps with Smarter Image Optimization
React Smart Image is a lightweight, high-performance image component that helps developers deliver faster websites with minimal effort. It combines lazy loading, responsive images, modern image formats, blur placeholders, skeleton loaders, retry handling, zoom functionality, and Core Web Vitals optimization into a single, easy-to-use component.
Whether you're building applications with React, Vite, or Next.js, React Smart Image provides production-ready image optimization without the complexity of configuring multiple libraries.
- Version
- 2.1.0
- Pricing
- Free
- Status
- Live
Features
Lazy Loading
Load images only when they enter the viewport to reduce initial page load time and improve performance.
Responsive Images
Automatically serve appropriately sized images for different screen sizes and resolutions.
WebP & AVIF Support
Deliver modern image formats for smaller file sizes while maintaining excellent visual quality.
Blur Placeholder
Show a smooth blurred preview while the original image loads, creating a premium loading experience.
Skeleton Loader
Display customizable skeleton placeholders instead of empty spaces during image loading.
Retry Failed Images
Automatically retry loading images when network failures occur.
Zoom / Magnifier
Enable click or hover zoom for product galleries, portfolios, and high-resolution images.
Fallback Image
Gracefully display a fallback image whenever the original image cannot be loaded.
Priority Loading
Prioritize important images like hero banners and above-the-fold content to improve LCP.
Prevent Layout Shift (CLS)
Reserve image space before loading to eliminate unexpected layout movement.
Core Web Vitals Optimized
Improve Lighthouse scores by optimizing image loading behavior for LCP, CLS, and FCP.
TypeScript Support
Built with complete TypeScript definitions for better developer experience.
SSR Compatible
Works seamlessly with Server-Side Rendering applications.
Next.js Alternative
Enjoy many of the optimization features provided by Next.js Image while remaining framework independent.
Easy API
Simple props with sensible defaults make implementation quick and intuitive.
Small Bundle Size
Designed to add powerful functionality without significantly increasing your application bundle size.
Installation
Install React Smart Image using your preferred package manager.
npm
npm install @concatstring/react-smart-imageYarn
yarn add @concatstring/react-smart-imagepnpm
pnpm add @concatstring/react-smart-imageAfter installation, simply import the component and start optimizing your images with just a few props.
Live Interactive Demo
The demo lets you experiment with different image settings and instantly preview the results while generating ready-to-use React code. Every change updates the live preview instantly and provides generated code that can be copied directly into your project.
Open Live Demo →Performance Comparison
| Feature | HTML <img> | Next.js Image | React Smart Image |
|---|---|---|---|
| Lazy Loading | ❌ | ✅ | ✅ |
| Blur Placeholder | ❌ | ✅ | ✅ |
| Skeleton Loader | ❌ | ❌ | ✅ |
| Retry Failed Images | ❌ | ❌ | ✅ |
| Zoom Support | ❌ | ❌ | ✅ |
| Responsive Images | Limited | ✅ | ✅ |
| WebP & AVIF Support | Manual | ✅ | ✅ |
| CLS Prevention | ❌ | ✅ | ✅ |
| TypeScript Support | N/A | ✅ | ✅ |
| Framework Independent | ✅ | ❌ | ✅ |
Frequently Asked Questions
What is React Smart Image?+
React Smart Image is a modern React image component that simplifies image optimization by providing lazy loading, responsive images, blur placeholders, skeleton loaders, retry handling, zoom support, and Core Web Vitals improvements in a single package.
Does React Smart Image work with React 19, Vite, and Next.js?+
Yes. React Smart Image is fully compatible with React 18+, React 19, Vite, Create React App, and can also be used inside Next.js applications.
Does it support WebP and AVIF images?+
Yes. React Smart Image supports modern image formats such as WebP and AVIF, allowing you to deliver smaller, faster-loading images with excellent visual quality.
Can React Smart Image help improve Lighthouse and Core Web Vitals?+
Yes. Features like lazy loading, priority loading, responsive images, and CLS prevention help improve key metrics such as Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Cumulative Layout Shift (CLS).
Can I customize placeholders, loaders, and zoom behavior?+
Absolutely. React Smart Image provides configurable props for blur placeholders, skeleton loaders, fallback images, retry logic, zoom effects, loading strategies, responsive behavior, and more, giving you complete control over image rendering.
Changelog
All notable changes to React Smart Image are documented here.
🚀 New Features
- •AVIF image format support via the new avif prop
- •format="auto" automatically serves the best available format, in order: .avif → .webp → original
- •Customizable image loading transitions via the transition prop — None, Fade, Flip, Rotate, Grow, Scale, Slide Up, Slide Left, Reveal — plus transitionDuration and a "fade" shorthand, with an exported TransitionKind type
- •SmartImageProvider for global configuration — shared default props, cleaner component usage, per-component overrides, and nested providers for feature-specific defaults
- •Image presets via createImagePresets() and the preset prop (e.g. Hero, Product, Avatar, Gallery images) — priority order: component props → preset configuration → provider defaults → library defaults
- •Added the official MIT License
🛠 Improvements
- •onLoadInfo now correctly reports cached image loads (fromCache: true) with accurate load time, for analytics-friendly tracking
🚀 New Features
- •Priority loading via the priority prop for LCP optimization — uses loading="eager", sets fetchpriority="high", disables lazy loading, and injects preload links into the document head; ideal for hero images, above-the-fold content, and landing pages
- •Aspect ratio support via aspectRatio (e.g. aspectRatio={16 / 9} or aspectRatio="16 / 9") to prevent layout shifts before images finish loading
- •Built-in zoom — lightbox, fullscreen, inline magnifier, and cursor magnifier modes, plus zoom animations, toolbar controls, download support, captions, and high-resolution zoom images
- •onVisible callback, useful for analytics, impression tracking, advertising, and performance monitoring
❌ Removed
- •Removed the densities prop from responsive image generation
🔄 Improvements
- •Improved Intersection Observer handling, expanded test coverage, updated README and package metadata
Added
- •Live demo link in the README
- •Repository and homepage information
- •Bug reporting links and GitHub issue tracker documentation
🎉 Initial Stable Release — Core Features
- •Lazy loading, responsive images, WebP auto-detection
- •Blur placeholder, skeleton loader, retry on failed images, error fallback image, thumbnail swap
- •Responsive srcSet generation with a custom srcSetBuilder
- •Image load analytics (onLoadInfo) and image cache utilities
- •Full TypeScript support
Included Utilities
- •clearImageCache() and invalidateImageCache()
- •Bundled type definitions, including SmartImageProps, LoadInfo, and ResponsiveSizes