Responsive images dynamically crop and scale to fit responsive layouts. While they yield crucial performance improvements, implementing responsive images isn’t easy. It requires creating multiple versions of every image and delivering each user the resource that best suits their viewing context.

Dynamic Responsive Images

Dynamically adjust responsive image properties

Cloudinary simplifies responsive images by dynamically adapting image properties -- dimensions, crop, format, quality -- and delivering the optimal version based on the content and viewing context.

You can eliminate the time-consuming task of generating multiple versions of each image, while optimizing bandwidth.

Upload Once - Deliver Anywhere

Upload a single high-resolution version of any image and Cloudinary will dynamically manipulate the image, on the fly, to fit the resolution, viewport and layout for any device.

Automatic resolution switching

Dynamically scale an image’s resolution to optimize it for each user’s device resolution and viewport dimensions, without wasting bandwidth.

Automatic art-directed cropping

Detect an image's region of interest and crop it to fit the layout on any device, without losing focus on the important areas.

Automatic pixel density detection

Determine the pixel density of the viewing device and manipulate the image to serve the version that matches the device pixel ratio.

Determine Image-Specific Breakpoints

Responsive layouts require the same image to be displayed in various dimensions. And because one image for all devices is not enough, Cloudinary automatically selects the optimal responsive image breakpoints.

Video conversion, resizing and manipulation

Determine the required number of image versions and their dimensions. This unique features enables you to to balance the optimal dimensions and bandwidth reduction trade-off.

Based on the calculated breakpoints, HTML5 markup code is created using code sample that combines the different aspect ratios and their breakpoints into a single responsive HTML solution.

Try the Automatic Responsive Breakpoints Generator

Automate Resource Selection with Client Hints

The variety of devices used to access the web have different display capabilities. Cloudinary can help you determine and serve images that are optimized to meet various device requirements.

HTTP client hints

Cloudinary uses Client Hints to determine the device pixel ratio and the available image width of the viewing device to select the optimal resource.

With this information, Cloudinary 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.

Integrate with Your Development Framework

Cloudinary’s client-side integration libraries and SDKs simplify the integration with your development platform of choice.

<%= cl_image_tag("group.jpg", :client_hints=>true, :transformation => {:width => 300, :height => 200, :crop => "crop", :dpr => "auto"}) %>
<?php echo cl_image_tag("group.jpg", 
array("client_hints"=>true, "transformation"=>array("width"=>300, "height"=>200, "crop"=>"crop", "dpr"=>"auto")))
cloudinary.image("group.jpg", client_hints: true, transformation: {width: 300, height: 200, crop: "crop", dpr: "auto"})
CloudinaryImage("group.jpg").image(client_hints=True, width=300, height=200, crop="crop", dpr="auto")
$.cloudinary.image("group.jpg", { client_hints: true, transformation: {width: 300, height: 200, crop: "crop", dpr: "auto"} })
cloudinary.url().transformation(
  new Transformation().width(300).height(200).crop("crop").dpr("auto")).clientHints(true).imageTag("group.jpg")
cloudinary.Api.UrlVideoUp.Transform(
  new Transformation().Width(300).Height(200).Crop("crop").Dpr("auto")).ClientHints(true).BuildImageTag("group.jpg")
cloudinary.url().transformation(
  new Transformation().width(300).height(200).crop("crop").dpr("auto")).clientHints(true).imageTag("group.jpg")