I've been struggling for a while to figure out how to support higher pixel density screens for my images in drupal. I have 3 variations for every image on the site (@1x, @2x, @3x) but I haven't been able to find an easy way to use them. I searched around and found articles like: https://www.advomatic.com/blog/adding-responsive-images-to-your-drupal-8-site and https://evolvingweb.ca/blog/making-drupal-websites-retina-ready

but they usually talk about using the retina module for drupal which seems to not pass security adviory policy or are just adding different image styles and using the picture tag. Is there no way to use just srcset and using 3 different images for different dpi in drupal?

Ideally I'd like to have an image field which will just let me upload 3 images for different dpi.

2 Answers 2


I think the answer from @ipwa is close but is not quite there.

What you want is an output like this:

<img src="/fallback.jpg" srcset="/1x.jpg 1x, /2x.jpg 2x, /3x.jpg 3x" />

Here's what you need to do:

  1. Enable both the Breakpoint and Repsonsive Image Style modules.
  2. Add an image field for uploading 1 image to a content type. Editors should upload the highest quality image needed.
  3. Configure three normal image styles that produce the desired resolutions for each of the 1x, 2x, and 3x pixel densities.
  4. In your theme, or a custom module, create a breakpoint yaml file with the following contents:
  label: Pixel Density Only
  mediaQuery: ''
  weight: 0
    - 1x
    - 2x
    - 3x
  1. Rebuild caches.
  2. Add a new responsive image style.
  3. Configure the responsive image style so that it uses the breakpoint group that you just created. This should expose a 1x, 2x, and 3x fieldset. For each of these fieldsets, select type "Select a single image style." and choose the appropriate image style.
  4. Configure the image field formatter for image field you created in step 1 to use the responsive image style you just created.

Drupal will output the srcset just like I described above and will not output a "sizes" attribute (which you don't need). Browsers will know what the pixel density is of the device and automatically select the most appropriate image based on that.


You can do this in Drupal 8 with just core:

  1. Skip creating specific breakpoints in your theme, they aren't needed with this approach.
  2. Setup your different image styles at admin/config/media/image-styles. Usually something like, Author Small, Author Medium and Author Large.
  3. Create a responsive image style at admin/config/media/responsive-image-style. Make sure the Responsive Image module is enabled first.
  4. Ensure "Responsive Image" is selected for the "Breakpoint group".
  5. Choose a suitable "Fallback image style". Click "Save". The following screen is where the secret sauce is.
  6. Under the "1x Viewport Sizing []" fieldset, Select "Select multiple image styles and use the sizes attribute."
  7. Select each of Image styles you'd like to use.
  8. Adjust the Sizes value as needed. The default here 100vw is hard-coded for a good reason, it's a pretty sane default and works well in most situations. Customize this is you want even finer control.

From: https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset

  • I think OP is actually asking something slightly different. Following these instructions, the srcset list will contain the list of image styles along with width descriptor instead of a pixel density descriptor. OP wants to just indicate the pixel density descriptor next to each image.
    – Brian
    Apr 5, 2019 at 19:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.