Using this tutorial for example I found out how to use responsive image styles in Drupal 8 without <picture> (which is pretty straight forward anyway).

However this approach forces you to use sizes. The article says

The default here 100vw is hard-coded for a good reason, it's a pretty sane default and works well in most situations.

which I completely disagree with. I find that in most cases you simply want to provide higher resolution images of simple <img>s for devices with a dppx that is greater than 1.

So how do I achieve something as simple like

<img src="foo_320.png" srcset="foo_640.png 2x">

with responsive image styles in Drupal?

  • IMHO it might look simple, but you're trying to "replace" the image with a different one for a 2x device, which is quite different from how the module is set up to work which is transforming/displaying the same image at different sizes. I think there's no simple answer here. What I can say is that you can always copy the core module or even extend it (there's classes behind those) with your own to achieve the desired result you're looking.
    – Beebee
    Commented Nov 14, 2017 at 14:13
  • Just to add, from reading the article, I'm assuming that <picture> is more suitable for your use-case, which is what they're trying to say in the tutorial regarding srcset vs picture: Use <picture> when you need separate art direction/crops across breakpoints
    – Beebee
    Commented Nov 14, 2017 at 14:16
  • @Beebee regarding your first comment: yes, agreed - simply providing higher resolution images is probably not what that core module is intended to do. However I find it difficult to believe that such a basic task is not possible within Drupal by default?
    – fritzmg
    Commented Nov 14, 2017 at 14:25
  • Regading your second comment: no, <picture> would not be suitable for my use case. If you need an image to be displayed at a size equal to 320 "CSS Pixel" and you want the image to still look good on images with a dppx of above 1, then you usually simply work with a srcset that provides the higher resolution versions of that image. Using <picture> would be wrong in this case (and would not work).
    – fritzmg
    Commented Nov 14, 2017 at 14:27

1 Answer 1

  1. Define your own breakpoints group with "multipliers" settings in YOURTHEME.breakspoints.yml (see D8 Docs)
  2. Go to Admin > Configuration > Media > Responsive Image Styles and add a new image style.
  3. When creating the responsive image style, select your breakpoint group created in (1.). When your YAML is correct, you should see a separate detail set for every multiplier (=dppx).
  4. Select type " Select a single image style." and select your corresponding image size. Repeat for every DPI group defined in your breakpoints.yml
  5. In your node's display settings, for your image field, select the responsive image formatter and choose your responsive image style created in (2.)

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.