---
title: "Integrate Acquia DAM with Responsive images"
date: "2026-04-15T08:32:52+00:00"
summary:
image:
type: "page"
url: "/acquia-dam/integrate-acquia-dam-responsive-images"
id: "3d5b1191-2d0a-4af5-bda8-c56bb012ff2e"
---

Use Drupal Responsive image styles with Acquia DAM: Image media to deliver optimized images for different devices and screen densities. Responsive image styles map Drupal breakpoints to image styles and render an `<img>` tag with responsive attributes such as `srcset` and often `sizes` to allow browsers to load the best image for the current viewport.

This integration is supported for image assets only. Other DAM asset types such as video, documents, and archives do not use image styles or responsive images.

Prerequisites
-------------

Before you begin, confirm that:

*   Acquia DAM is configured with the Media Library, and users can browse DAM assets in the Media Library.
*   Breakpoint, Responsive Image module is enabled and works.
*   You have the required breakpoints available, typically provided by your theme through breakpoint groups.
*   You have the required Drupal image styles, and they are allowed for Acquia DAM.

For general Drupal background on responsive design and breakpoints, you can reference [Drupal.org](https://www.drupal.org/docs/develop/mobile-drupal-sites/responsive-images) official website.

Configure image styles for responsive images
--------------------------------------------

Responsive image styles select image styles per breakpoint, you must define the image styles first.

1.  Go to **Configuration → Media → Image styles**.
2.  Create or review the image styles needed for responsive output such as _hero\_480w, hero\_768w, hero\_1024w, or hero\_1440w_.
3.  Allow the image styles for Acquia DAM, visit [Configure image styles](/acquia-dam/configure-image-styles "Configure image styles") for more details.

Create a responsive image style
-------------------------------

1.  Go to **Configuration** → **Media** → **Responsive image styles**.
2.  Click **\+ Add responsive image style**.
3.  Enter Label, Breakpoint group, and Fallback image style.
4.  Under Responsive image style mappings, map each breakpoint to the appropriate Drupal image style.
    
    ![Acquia-DAM_responsive-image-config](https://acquia.widen.net/content/bsprokg2mk/web/e12be_Acquia-DAM-integration-responsive-image-config.png?v=ffedb701-a2de-43d5-ba6d-c76cf3ee02ba)
    
5.  Click **Save**.

The Drupal site now has a responsive image style that can be selected in field formatter settings.

Note

You can also update the default responsive image styles, such as Wide or Narrow, if your site uses them.

Apply the responsive image formatter to Acquia DAM media
--------------------------------------------------------

To apply the formatter on the Acquia DAM image media type and/or specific media view modes used by content fields:

1.  Go to **Structure** → **Media types**.
2.  Edit the **Acquia DAM: image** media type.
3.  Go to **Manage display**.
4.  Locate the field that displays the image, such as _On-site stored asset image or Asset reference_.
    *   **If the site uses Embed**
        *   Configure the Asset reference field to use the Acquia DAM responsive image formatter.
        *   Open the formatter settings and choose your Responsive image style.
            
            ![Acquia-DAM_responsive-image-embed-setup](https://acquia.widen.net/content/e8xhenpwiz/web/60e28_Acquia-DAM-integration-responsive-image-embed-setup.png?v=2b9976cc-225f-4664-af69-995fac46a476)
            
    *   **If the site uses Download and sync**
        *   Configure the on-site stored asset image/file field to use the Responsive image formatter.
        *   Open the formatter settings and choose your Responsive image style.
5.  Select **Save**.

Repeat for additional media view modes such as Teaser, Card, and Hero if your site uses multiple view modes.

Use responsive DAM images in content
------------------------------------

Once the media type display uses the responsive image formatter:

1.  Add a Media reference field to a content type or reuse an existing one.
2.  On the content type Manage display, set the media reference field to render the media entity using the view mode that you configured, such as Hero.
3.  Create or edit content and select an Acquia DAM image through the Media Library.

Verify output
-------------

To confirm correct responsive render:

*   Inspect the frontend HTML and confirm Drupal renders an `<img>` element with `srcset` and typically `sizes`for the image field.
*   Resize the browser or use device emulation and confirm the selected image resource changes by breakpoint.
*   Confirm the content type display renders the media using the view mode you configured for responsive output.
*   If changes do not appear, clear the caches, then re-check the media display formatter settings.