Last updated: Jan-18-2023
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
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.
Make images responsive in other frameworks