Responsive images using HTML and dynamic image transformations

Cloudinary can help reduce the complexity of maintaining and generating multiple image versions with the dynamic image transformation feature. You can build Cloudinary dynamic image URLs with parameters to scale the image to any size. This means you don't have to pre-create the images, and your images are dynamically resized on the fly as needed.

This is especially useful when using the <picture> element and the srcset and sizes parameters of the <img> tag where the browser chooses which of the image versions to display. All of the Cloudinary image URLs that you build can also include any of Cloudinary's image transformation parameters, and the images will be created on the fly if they don't already exist.

This responsive solution is ideal for reducing the Largest Contentful Paint time as there is no JavaScript library to load and it doesn't rely on client hints which are not universally supported. You can also consider adding fetchpriority="high" to your <img> or <picture> tags if they are the largest or most important images on the page.

Responsive images using srcset, sizes and dynamic transformations

You can use the <img> tag with srcset and sizes to deliver images that are correctly sized for the viewport.

See how the browser loads the larger sized images as the viewport increases:

Try it yourself!

The srcset attribute

The srcset attribute specifies the different sized images, together with a width descriptor for each. The width descriptor tells the browser what the image's width is, so for example, 256w means 256 pixels. The browser decides which image to load based on the width of the viewport.

Using Cloudinary transformation parameters in the URLs lets you resize the same image on the fly, so you only need one original asset. For example, c_scale,w_256 delivers an image scaled to 256 pixels.

The sizes attribute

The sizes attribute tells the browser which size of image to use for different page layouts.

For example, the following means if the viewport is at least 50em (50 times the current font size) wide, the image will be 50em wide. Otherwise, the image will be 100vw (100% of the viewport) wide:

Responsive images using image elements interactive demo

Try this responsive demo to see how the browser loads different sized images based on the viewport width.

View the demo code in GitHub.

Art-directed responsive images using the picture element

The <picture> element is a wrapper for the <img> element. It also provides a way to supply alternative <source> elements, which are visually distinct versions of the image for the browser to display at the specified breakpoints.

See how the image changes based on the viewport width:

Try it yourself!

The source element

Each <source> element has a srcset attribute, as described in the previous section, and a media attribute that specifies the minimum width from which to display one of the images given in the srcset attribute.

For example, if the viewport is at least 800 pixels wide, the browser chooses an image from the srcset in this source: