Container-Aware Image Rendering with Cloudinary

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.

What is Container-Aware Image Rendering?

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

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-images
                      

Import & 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} />
  
                    