A highly customizable, performance-focused React component for lazy loading images with advanced features like placeholder effects, image optimization, and responsive loading.

• 🎯 Lazy Loading: Load images only when they enter the viewport
• 🖼 Placeholder Support: Multiple placeholder types while images load
• 🎨 Effect Transitions: Smooth transitions with blur, opacity, or color effects
• 📱 Responsive Images: Automatic srcset and sizes generation
• ⚡ Performance Optimized: Intersection Observer for efficient lazy loading
• 🛠 Highly Customizable: Extensive props for fine-tuning behavior
• 📦 Lightweight: Small bundle size.

If our GitHub repository reaches 200 stars ⭐, we will proudly launch the Vue version of this package.

Star the Repository on GitHub

npm install zenui-image-react

import { LazyLoadImage } from 'zenui-image-react'; function MyComponent() { return ( <LazyLoadImage src="https://example.com/image.jpg" alt="Example" placeholderType="effect" effectType="blur" /> ); }

Choose from multiple placeholder types while your image loads:

// Effect Placeholder (blur, opacity, or color) <LazyLoadImage src="image.jpg" placeholderType="effect" effectType="blur" effectAmount={10} /> // Custom Image Placeholder <LazyLoadImage src="image.jpg" placeholderType="image" placeholderImage="placeholder.jpg" /> // Custom Component Placeholder <LazyLoadImage src="image.jpg" placeholderType="custom" customPlaceholder={<MyCustomLoader />} />

Enable automatic responsive image optimization:

<LazyLoadImage src="image.jpg" optimize quality={80} breakpoints={{ sm: 576, md: 768, lg: 992, xl: 1200 }} imageWidths={{ sm: [576], md: [768], lg: [992], xl: [1200] }} />

Control the intersection observer and loading offset:

<LazyLoadImage src="image.jpg" useIntersectionObserver={true} offset={200} // Start loading 200px before entering viewport onLoad={() => console.log('Image loaded')} onError={(e) => console.error('Load failed:', e)} />

{ xs: 320, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1400 }

{ xs: [320], sm: [576], md: [768], lg: [992], xl: [1200], xxl: [1400] }

1. Use WebP Format: Provide WebP images when possible for better compression
2. Optimize Image Dimensions: Use appropriate image sizes for different breakpoints
3. Enable Optimization: Use the optimize prop for automatic responsive handling
4. Adjust Loading Offset: Set an appropriate offset based on your use case
5. Choose Appropriate Quality: Balance quality and file size with the quality prop

MIT © Asfak Ahmed ( rahi )