Retina image support (@1x @2x @3x)
I think the answer from @ipwa is close but is not quite there.

What you want is an output like this:

&lt;img src="/fallback.jpg" srcset="/1x.jpg 1x, /2x.jpg 2x, /3x.jpg 3x" /&gt;


Here's what you need to do:


Enable both the Breakpoint and Repsonsive Image Style modules.
Add an image field for uploading 1 image to a content type. Editors should upload the highest quality image needed.
Configure three normal image styles that produce the desired resolutions for each of the 1x, 2x, and 3x pixel densities.
In your theme, or a custom module, create a breakpoint yaml file with the following contents:


my_module_or_theme.image_pixel_density_only:
  label: Pixel Density Only
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 2x
    - 3x



Rebuild caches.
Add a new responsive image style.
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.
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.