What is Container-Aware Image Rendering?
Container-aware rendering means the image adapts to the size of its parent container rather than relying on screen breakpoints alone. This ensures images look sharp and load efficiently in all layout scenarios, including nested or dynamically sized components.
1. Improves Performance
Loads only the appropriately sized image from Cloudinary, reduces bandwidth, speeds up page load time, and avoids layout shifts.
2. Ideal for modern frameworks
Smoothly integrates with modern responsive frameworks, providing consistent, optimized image rendering across breakpoints, components, and devices.
3. Adapts to dynamic layouts
Seamlessly adjusts when containers resize—whether due to window resizing, collapsible components, or layout changes—ensuring visuals always fit perfectly.
4. Eliminates guesswork with automatic width detection
Automatic detection of image size based on the container's actual width, instead of hardcoded dimensions or assumptions about screen size or layout.
How It Works
To add this capability to your React applications follow these steps:
Create Cloudinary Account
Sign up for a Cloudinary account and upload your assets.
Request your npm access token
Reach out to Klish Group to get your token and repository details so you can install the library.
Define Cloudinary Image Transformation
Reach out to Klish Group for assistance creating the required image transformation in your account.
Install React Library
Add to your application's package.json file or install using the below command:
npm install @klish-group/react-responsive-imagesImport & Use
Add the library and component reference to areas of your application that display images.
import { ResponsiveImageContainer } from '@klish-group/react-responsive-images';
<ResponsiveImageContainer
styleClasses={styleClasses}
src={imagePath}
altText={altText}
ignoreResponsiveTransformationformat={ignoreResponsiveTransformationformat} />