Dynamic Responsive Images
Responsive images yield crucial performance improvements but require the creation of multiple versions of each image and delivering to users the one that best suits their viewing context.
Cloudinary simplifies responsive image delivery by dynamically adapting image properties—dimensions, crop, format, and quality—on the fly and delivering the optimal version based on the content and viewing context.
![adapt-responsive-images](http://web.archive.org./web/20190315202415im_/https://cloudinary-res.cloudinary.com/image/upload/c_scale,f_auto,q_auto,w_550/v1539280690/website/content/adapt-responsive-images.png)
Upload Once, Deliver Anywhere
Upload a single high-resolution version of any image and dynamically manipulate it on the fly to fit the resolution, viewport, and layout of any device.
Automatic resolution switching
Dynamically scale images to optimize them for the user’s device resolution and viewport dimensions without wasting bandwidth.
Automatic art-directed cropping
Dynamically crop images to fit the layout of any device without losing focus on the key area.
Automatic pixel-density detection
Dynamically manipulate images based on the device pixel density to serve the most appropriate version to every user.
Determine Image-Specific Breakpoints
Responsive design requires scaled-down versions of images to cover different device and layout dimensions. But how many versions do you need?
Balance the trade-off between dimensions and bandwidth reduction by automatically selecting the optimal responsive image breakpoints.
Based on the calculated breakpoints, Cloudinary creates HTML5 markup using a code sample that combines the different aspect ratios and their breakpoints into a single responsive HTML solution.
![determine-image-breakpoints](http://web.archive.org./web/20190315202415im_/https://cloudinary-res.cloudinary.com/image/upload/c_scale,f_auto,q_auto,w_550/v1539280849/website/content/determine-image-breakpoints.png)
Automate Resource Selection With HTTP Client Hints
Devices that access the web have different display capabilities. So, to optimize performance, you need to serve images that fit the resolution and viewport requirements.
Cloudinary selects the optimal resource by using client hints to determine the device pixel ratio and viewport width of the viewing device. With that information, Cloudinary then selects or dynamically generates the appropriate size of the requested image.
Each image can be tailored to a user’s specific requirements, ensuring a visually seamless experience while improving performance.
![resource-selection-client-hints](http://web.archive.org./web/20190315202415im_/https://cloudinary-res.cloudinary.com/image/upload/c_scale,f_auto,q_auto,w_550/v1539281170/website/content/resource-selection-client-hints.png)