Responsive images using JavaScript frontend frameworks

With Cloudinary's JavaScript frontend frameworks you can make images responsive using the responsive plugin. This causes images to resize automatically based on the viewport size. If the viewport is small, then a small image is requested, saving bytes and reducing page load times.

This video shows responsive image behavior in action. See how a new image is requested when the browser is resized, based on the configured step size:

Make images responsive in a React app

To use the responsive plugin in the React SDK (see below for other frameworks):

First, install the @cloudinary/url-gen and @cloudinary/react packages:

Then, use the responsive plugin in the AdvancedImage component, for example:

You can specify either the step size, as in the above example, or a set of image widths. For syntax details, see the reference.

See this code explorer for a full working example.

Server-side rendering of responsive images

If you're using server-side rendering for your site, you must:

• Use the placeholder plugin together with the responsive plugin.
• Provide dimensions for the container element.
• Add styling to the AdvancedImage component.

For example:

Make images responsive in other frameworks

In addition to making images responsive in React, as shown above, you can also make them responsive in Angular, Vue and even plain JavaScript.

Learn about other Cloudinary plugins for frontend frameworks and JavaScript:

• React plugins
• Angular plugins
• Vue plugins
• JavaScript plugins