| Framework | Live Demo |
|---|---|
| Yew | |
| Dioxus | TODO |
| Leptos | TODO |
Image RS is a highly optimized, feature-rich image component built for WASM-based frameworks like Yew, Dioxus, and Leptos. It offers lazy loading, blur-up placeholders, fallback image handling, responsive layouts, and full ARIA accessibility.
The following features make Image RS a must-have for modern WASM apps:
- 🚀 Performance Optimized: Smart lazy loading with
IntersectionObserverand fallback strategies. - 🎨 Advanced Layouts: Responsive, Fill, Intrinsic, Fixed, Stretch, and ScaleDown layouts.
- 🧩 Accessibility First: Full ARIA attribute support to build inclusive UIs.
- ⚡ Interactive Events: Callbacks for loading completion and error handling.
- 🖼️ Visual Enhancements: Blur placeholders and fallback images for seamless loading UX.
Refer to our guide to integrate this component into your Yew app.
Refer to our guide to integrate this component into your Dioxus app.
Refer to our guide to integrate this component into your Leptos app.
- Open browser DevTools (Press F12) > Lighthouse tab.
- Record page load by clicking "Analyze Page Load".
- Observe:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Time to Interactive (TTI)
- Total network transfer size
- Memory usage
| Feature | Yew Image RS | Next.js Image |
|---|---|---|
| Native Rust+Wasm | ✅ | ❌ |
| Built-in Image Optimization | ✅ | ✅ |
| SSR/SEO Friendly | ✅ | ✅ |
| Fine-grained DOM Control | ✅ | ❌ |
| Smaller JS Payload | ✅ | ✅ |
When loading 10 images, Yew Image RS and Next.js Image are on par:
| Metric | Yew (Wasm) | Next.js |
|---|---|---|
| Performance Score (Lighthouse) | 100 | 100 |
| Memory Usage (Heap) | ~8 MB | ~8 MB |
However, when scaling up to 10,000 images loaded simultaneously:
| Metric | Yew (Wasm) | Next.js |
|---|---|---|
| Performance Score (Lighthouse) | 64 | ❌ (Lighthouse fails) |
| Memory Usage (Heap) | ~78 MB | ~83 MB |
| Scrolling Smoothness | Very Smooth | Laggy |
Key observations:
- Wasm (Yew) handles large DOM updates much better than JavaScript.
- Memory usage is slightly lower with Wasm.
- Next.js site failed Lighthouse audit at 10,000 images (due to TTI timeout).
- Smoothness is significantly better with Yew under heavy load.
- Image RS is working on automatic image optimization.
- Progressive loading and lazy hydration strategies are being researched for even better large-scale performance.
Contributions are welcome! Whether it's bug fixes, feature requests, or examples, we would love your help to make Image RS better.
- Fork the repository.
- Create a new branch for your feature/bugfix.
- Submit a pull request for review.
Image RS is licensed under the MIT License. You are free to use, modify, and distribute this library in your projects.