> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](react_integration) (see [below](#make_images_responsive_in_other_frameworks) for other frameworks):

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

```
npm i @cloudinary/url-gen @cloudinary/react
```

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

```react
import React from 'react'
import {Cloudinary} from "@cloudinary/url-gen";

// Import the responsive plugin
import {AdvancedImage, responsive} from '@cloudinary/react';

 const App = () => {

  // Create and configure your Cloudinary instance.
  const cld = new Cloudinary({
    cloud: {
      cloudName: 'demo'
    }
  }); 

  // Use the image with public ID, 'sample'.
  const myImage = cld.image('sample');

  // Use the responsive plugin, setting the step size to 200 pixels
  return (
    <div>
      <AdvancedImage cldImg={myImage} plugins={[responsive({steps: 200})]}/>
    </div>
  )
};
```

You can specify either the step size, as in the above example, or a [set of image widths](react_image_transformations#example_2_specify_a_set_of_image_widths_to_use). For syntax details, see the [reference](https://cloudinary.com/documentation/sdks/js/frontend-frameworks/responsive.html).

See this [code explorer](react_image_transformations#code_explorer_react_plugins) 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:

```react
<div style={{width: '800px'}}>
    <AdvancedImage style={{maxWidth: '100%'}} cldImg={img} plugins={[responsive(), placeholder()]}></AdvancedImage>
</div>
```

## Make images responsive in other frameworks

In addition to making images responsive in [React](react_image_transformations#responsive_images), as shown [above](#make_images_responsive_in_a_react_app), you can also make them responsive in [Angular](angular_image_transformations#responsive_images), [Vue](vue_image_transformations#responsive_images) and even plain [JavaScript](javascript_image_transformations#responsive_images).

Learn about other Cloudinary plugins for frontend frameworks and JavaScript:

* [React plugins](react_image_transformations#plugins)
* [Angular plugins](angular_image_transformations#plugins)
* [Vue plugins](vue_image_transformations#plugins)
* [JavaScript plugins](javascript_image_transformations#plugins)

> **NOTE**: To automate the DPR (Device Pixel Ratio) on the browser side, use the [cloudinary-core JS library](responsive_client_side_js).