Programmable Media
Menu

Responsive images

Last updated: Nov-25-2024

Note
This guide details Cloudinary's responsive solution for browser applications. For more information on Cloudinary's responsive solution for mobile applications, see the documentation on iOS responsive images and Android responsive images.

Responsive web design is a method of designing websites to provide an optimal viewing experience to users, irrespective of the device, viewport size, orientation, or resolution used to view it. A site designed responsively adapts its layout to the viewing environment, resizing and moving elements dynamically based on the properties of the browser or device the site is displayed on.

A responsive web design is developed with fluid grids, flexible images and media queries to produce a layout that dynamically adapts to the user's viewing environment. For images to be flexible, they need to dynamically adjust their resolution (and sometimes format, quality, or even content) on the fly. To learn more about responsive design see the additional resources section.

On this page:

An example of responsive web design

The following sets of images demonstrate how responsive web design can be applied. Resize this browser window to see how the layout and images (including the text overlays) dynamically respond to the changes.

4 columns

4 columns changing to 3 columns, then to 2 columns as the page width narrows

3 columns changing to 2 columns, then to 1 column as the page width narrows

Notes
  • This example uses the cloudinary-core JS library solution.
  • The text overlays change based on the DPR of the device and the width of the delivered image (l_text:Arial_18_bold:dpr_auto%0Aw_auto). dpr_auto and w_auto are replaced with the actual values on the client side based on the screen properties and viewport width.
  • When the browser width is wide, the first images delivered are smaller in dimensions. As you make the browser narrower, the individual columns get more space on the next breakpoint, so larger images are requested to fill the larger available space.
  • The change in overlay width indicates that a new image was requested and displayed.
  • When increasing the width of the page, as the largest version with the best resolution was already requested and delivered, that version is used and scaled down on the client side, so the overlays don't change back.

Responsive solutions using Cloudinary

When it comes to images, a responsively designed website should not just send a high-resolution image and then use browser resizing to display the image on various devices: that would be a huge waste of bandwidth for users on small, low-resolution displays. The image should be prepared in various resolutions, so that the requesting device can load only the image data that it needs. However, generating multiple, alternate resolutions of each image manually results in complex, time-consuming workflows.

Cloudinary has various solutions to help reduce the complexity of delivering responsive images. Choose the one that best suits your environment and application:

Solution Description Key Benefits Possible Downsides
Responsive images using HTML and dynamic image transformations Use Cloudinary dynamic URLs to generate transformed versions of images (e.g., resized or cropped) on the fly that can then be used in the HTML srcset attribute of <img> or <picture> elements.

The browser decides which of the image versions to display.

 ✅ Images delivered via well-authored markup are correctly sized and load as fast as possible.
✅ Best option for improving the Largest Contentful Paint time.		 💡 Multiple-URL, layout-dependent markup can be complex to write and difficult to maintain.
Responsive images using JavaScript frontend frameworks If your app is written in a JavaScript framework, such as React, Angular or Vue, you can programmatically set the <img> src URL with a Cloudinary dynamic URL that delivers the optimal image for the available image width.

This is a client-side solution.

 ✅ Loads correctly sized images via a single URL.
✅ Markup does not depend on layout.		 💡 Delays image load start and may negatively impact paint times.
Responsive images using the cloudinary-core JS library This is a pure JavaScript solution that not only delivers the optimal image for the available image width, but also takes into account the viewing device's DPR.

This is a client-side solution.

 ✅ Loads correctly sized images via a single URL.
✅ Markup does not depend on layout.		 💡 Delays image load start and may negatively impact paint times.
Responsive images using client hints This solution delivers the optimal image based on the available width and device's DPR reported in the Client Hint request headers.

This is a server-side solution that currently only works on Chromium-based browsers.

 ✅ Loads correctly sized images via a single URL without delaying image load start, offering optimal performance. 💡 Still requires a sizes attribute, which depends on layout and can be difficult to author and maintain.
💡 Incomplete browser support.
Simple global responsive resizing For quick and easy responsiveness that affects any delivered image that is not otherwise being resized, apply the default width limit in the optimization settings of your product environment. The size of the delivered image is determined by the requesting device. ✅ Easy to set up.
✅ No code necessary.		 💡 Only two sizes delivered, so images could be optimized more.
💡 Available to certain plans only.

Combining responsive automation with other Cloudinary features

In addition to automating resizing, Cloudinary offers a number of other automation features that you can combine with your responsive image solution:

Responsive images - additional resources

Blog posts:

Tools:

External resources:

✔️ Feedback sent!

Rate this page: