diff --git a/core/modules/responsive_image/src/ResponsiveImageStyleForm.php b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php
index 04241fd..55ab48e 100644
--- a/core/modules/responsive_image/src/ResponsiveImageStyleForm.php
+++ b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php
@@ -117,19 +117,49 @@ public function form(array $form, FormStateInterface $form_state) {
           '#type' => 'container',
         );
         $image_style_mapping = $responsive_image_style->getImageStyleMapping($breakpoint_id, $multiplier);
-        // @todo The image_mapping_type is only temporarily hardcoded, until
-        // support for the other responsive image mapping type ('sizes') is
-        // added in https://www.drupal.org/node/2334387.
         $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type'] = array(
-          '#type' => 'value',
-          '#value' => 'image_style',
+          '#title' => $this->t('Type'),
+          '#type' => 'radios',
+          '#options' => array(
+            '_none' => $this->t('Do not use this breakpoint'),
+            'image_style' => $this->t('Use image styles'),
+            'sizes' => $this->t('Use the sizes attribute'),
+          ),
+          '#default_value' => isset($image_style_mapping['image_mapping_type']) ? $image_style_mapping['image_mapping_type'] : '_none',
         );
-        $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping'] = array(
+        $form['keyed_styles'][$breakpoint_id][$multiplier]['image_style'] = array(
           '#type' => 'select',
           '#title' => $label,
           '#options' => $image_styles,
-          '#default_value' => isset($image_style_mapping['image_mapping']) ? $image_style_mapping['image_mapping'] : array(),
+          '#default_value' => isset($image_style_mapping['image_style']) ? $image_style_mapping['image_style'] : array(),
           '#description' => $this->t('Select an image style for this breakpoint.'),
+          '#states' => array(
+            'visible' => array(
+              ':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'image_style'),
+            ),
+          ),
+        );
+        $form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'] = array(
+          '#type' => 'textfield',
+          '#title' => $this->t('Sizes'),
+          '#default_value' => isset($image_style_mapping['sizes']) ? $image_style_mapping['sizes'] : '',
+          '#description' => $this->t('Enter the value for the sizes attribute (e.g. "(min-width:700px) 700px, 100vw").'),
+          '#states' => array(
+            'visible' => array(
+              ':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'sizes'),
+            ),
+          ),
+        );
+        $form['keyed_styles'][$breakpoint_id][$multiplier]['sizes_image_styles'] = array(
+          '#title' => $this->t('Image styles'),
+          '#type' => 'checkboxes',
+          '#options' => array_diff_key($image_styles, array('' => '')),
+          '#default_value' => isset($image_style_mapping['sizes_image_styles']) ? $image_style_mapping['sizes_image_styles'] : array(),
+          '#states' => array(
+            'visible' => array(
+              ':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'sizes'),
+            ),
+          ),
         );
       }
     }