diff --git a/core/modules/image/image.install b/core/modules/image/image.install
index fd14d03..7e82f62 100644
--- a/core/modules/image/image.install
+++ b/core/modules/image/image.install
@@ -61,3 +61,25 @@ function image_requirements($phase) {
 
   return $requirements;
 }
+
+/**
+ * Add allowed attributes to existing html filters.
+ */
+function image_update_8001() {
+  $config_factory = \Drupal::configFactory();
+  foreach ($config_factory->listAll('filter.format') as $name) {
+    $config = $config_factory->getEditable($name);
+    if (!$config->get('filters.image_style.status')) {
+      continue;
+    }
+    $allowed_html = $config->get('filters.filter_html.settings.allowed_html');
+    $matches = [];
+    if (!empty($allowed_html) && preg_match('/<img([^>]*)>/', $allowed_html, $matches)) {
+      $new_attributes = array_filter(explode(' ', $matches[1]));
+      $new_attributes[] = 'data-image-style';
+      $allowed_html = preg_replace('/<img([^>]*)>/', '<img ' . implode(' ', array_unique($new_attributes)) . '>', $allowed_html);
+      $config->set('filters.filter_html.settings.allowed_html', $allowed_html);
+      $config->save();
+    }
+  }
+}
diff --git a/core/modules/image/js/plugins/drupalimagestyle/plugin.js b/core/modules/image/js/plugins/drupalimagestyle/plugin.js
index fd75f4b..8de686f 100644
--- a/core/modules/image/js/plugins/drupalimagestyle/plugin.js
+++ b/core/modules/image/js/plugins/drupalimagestyle/plugin.js
@@ -58,11 +58,13 @@
           else if (element.attributes['data-cke-realelement']) {
             return;
           }
-          element = originalUpcast.call(this, element, data);
 
           // Parse the data-image-style attribute.
           data['data-image-style'] = element.attributes['data-image-style'];
 
+          // Upcast after parsing so correct element attributes are parsed.
+          element = originalUpcast.call(this, element, data);
+
           return element;
         };
 
diff --git a/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php b/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php
index 79f23c0..a2e0652 100644
--- a/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php
+++ b/core/modules/image/src/Plugin/CKEditorPlugin/DrupalImageStyle.php
@@ -12,7 +12,7 @@
  *
  * @CKEditorPlugin(
  *   id = "drupalimagestyle",
- *   label = @Translation("Drupal image style"),
+ *   label = @Translation("Image style"),
  *   module = "ckeditor"
  * )
  */
diff --git a/core/modules/image/src/Plugin/Filter/FilterImageStyle.php b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php
index 7de068f..fac9f80 100644
--- a/core/modules/image/src/Plugin/Filter/FilterImageStyle.php
+++ b/core/modules/image/src/Plugin/Filter/FilterImageStyle.php
@@ -20,7 +20,7 @@
  * Provides a filter to render inline images as image styles.
  *
  * @Filter(
- *   id = "filter_imagestyle",
+ *   id = "image_style",
  *   module = "image",
  *   title = @Translation("Display image styles"),
  *   description = @Translation("Uses the data-image-style attribute on &lt;img&gt; tags to display image styles."),
@@ -52,7 +52,7 @@ class FilterImageStyle extends FilterBase implements ContainerFactoryPluginInter
   protected $renderer;
 
   /**
-   * Constructs a Drupal\Component\Plugin\PluginBase object.
+   * Constructs a Drupal\image\Plugin\Filter\FilterImageStyle object.
    *
    * @param array $configuration
    *   A configuration array containing information about the plugin instance.
@@ -184,14 +184,17 @@ protected function getImageInfo($file_uuid) {
    *  The attributes array.
    */
   protected function prepareImageAttributes(\DOMElement $dom_element) {
-    // Make sure all non-regenerated attributes are retained.
+    // Remove attributes that are no longer needed.
     $dom_element->removeAttribute('data-entity-type');
     $dom_element->removeAttribute('data-entity-uuid');
     $dom_element->removeAttribute('data-image-style');
+
+    // Remove attributes that are generated by the image style.
     $dom_element->removeAttribute('width');
     $dom_element->removeAttribute('height');
     $dom_element->removeAttribute('src');
 
+    // Make sure all non-regenerated attributes are retained.
     $attributes = [];
     for ($i = 0; $i < $dom_element->attributes->length; $i++) {
       $attr = $dom_element->attributes->item($i);
@@ -216,9 +219,6 @@ protected function prepareImageAttributes(\DOMElement $dom_element) {
    */
   protected function getImageStyleHtml($file_uuid, $image_style_id, \DOMElement $dom_element) {
     $image_info = $this->getImageInfo($file_uuid);
-    $image_uri = $image_info['uri'];
-    $image_width = $image_info['width'];
-    $image_height = $image_info['height'];
 
     // Remove attributes that will be generated by the image style.
     $attributes = $this->prepareImageAttributes($dom_element);
@@ -227,9 +227,9 @@ protected function getImageStyleHtml($file_uuid, $image_style_id, \DOMElement $d
     $image = [
       '#theme' => 'image_style',
       '#style_name' => $image_style_id,
-      '#uri' => $image_uri,
-      '#width' => $image_width,
-      '#height' => $image_height,
+      '#uri' => $image_info['uri'],
+      '#width' => $image_info['width'],
+      '#height' => $image_info['height'],
       '#attributes' => $attributes,
     ];
 
diff --git a/core/modules/image/tests/src/Unit/FilterImageStyleTest.php b/core/modules/image/tests/src/Unit/FilterImageStyleTest.php
index b6af52f..622bb29 100644
--- a/core/modules/image/tests/src/Unit/FilterImageStyleTest.php
+++ b/core/modules/image/tests/src/Unit/FilterImageStyleTest.php
@@ -80,12 +80,12 @@ public function testProcessWithImage() {
     $original_img = '<img src="' . $original_src .'" width="' . $original_width .'" height="' . $original_height .'" alt="' . $original_alt .'" data-entity-uuid="' . $original_uuid . '" data-entity-type="file" data-image-style="' . $original_image_style . '" />';
     $original_text = '<p>' . $original_img . '</p>';
 
-    $generated_src = 'styles/medium/public/inline-images/image.png';
-    $generated_width = '200';
-    $generated_height = '150';
+    $expected_src = 'styles/medium/public/inline-images/image.png';
+    $expected_width = '200';
+    $expected_height = '150';
 
-    $generated_img = '<img src="' . $generated_src .'" width="' . $generated_width .'" height="' . $generated_height .'" alt="' . $original_alt .'" />';
-    $generated_text = '<p>' . $generated_img . '</p>';
+    $expected_img = '<img src="' . $expected_src .'" width="' . $expected_width .'" height="' . $expected_height .'" alt="' . $original_alt .'" />';
+    $expected_text = '<p>' . $expected_img . '</p>';
 
     $this->filterImageStyle
       ->method('loadImageStyles')
@@ -102,9 +102,9 @@ public function testProcessWithImage() {
         $this->equalTo($original_image_style),
         $this->anything()
       )
-      ->willReturn($generated_img);
+      ->willReturn($expected_img);
 
     $output = $this->filterImageStyle->process($original_text, 'en');
-    $this->assertEquals($generated_text, $output);
+    $this->assertEquals($expected_text, $output);
   }
 }
diff --git a/core/modules/responsive_image/js/plugins/drupalresponsiveimagestyle/plugin.js b/core/modules/responsive_image/js/plugins/drupalresponsiveimagestyle/plugin.js
index 8d44b39..0f3bba3 100644
--- a/core/modules/responsive_image/js/plugins/drupalresponsiveimagestyle/plugin.js
+++ b/core/modules/responsive_image/js/plugins/drupalresponsiveimagestyle/plugin.js
@@ -58,11 +58,13 @@
           else if (element.attributes['data-cke-realelement']) {
             return;
           }
-          element = originalUpcast.call(this, element, data);
 
           // Parse the data-responsive-image-style attribute.
           data['data-responsive-image-style'] = element.attributes['data-responsive-image-style'];
 
+          // Upcast after parsing so correct element attributes are parsed.
+          element = originalUpcast.call(this, element, data);
+
           return element;
         };
 
diff --git a/core/modules/responsive_image/responsive_image.install b/core/modules/responsive_image/responsive_image.install
index 1a64048..062c45c 100644
--- a/core/modules/responsive_image/responsive_image.install
+++ b/core/modules/responsive_image/responsive_image.install
@@ -11,7 +11,7 @@ function responsive_image_update_8001() {
   $config_factory = \Drupal::configFactory();
   foreach ($config_factory->listAll('filter.format') as $name) {
     $config = $config_factory->getEditable($name);
-    if (!$config->get('filters.filter_responsive_image_style.status')) {
+    if (!$config->get('filters.responsive_image_style.status')) {
       continue;
     }
     $allowed_html = $config->get('filters.filter_html.settings.allowed_html');
diff --git a/core/modules/responsive_image/src/Plugin/CKEditorPlugin/DrupalResponsiveImageStyle.php b/core/modules/responsive_image/src/Plugin/CKEditorPlugin/DrupalResponsiveImageStyle.php
index 80fc8f9..e782427 100644
--- a/core/modules/responsive_image/src/Plugin/CKEditorPlugin/DrupalResponsiveImageStyle.php
+++ b/core/modules/responsive_image/src/Plugin/CKEditorPlugin/DrupalResponsiveImageStyle.php
@@ -1,10 +1,5 @@
 <?php
 
-/**
- * @file
- * Contains \Drupal\responsive_image\Plugin\CKEditorPlugin\DrupalResponsiveImageStyle.
- */
-
 namespace Drupal\responsive_image\Plugin\CKEditorPlugin;
 
 use Drupal\Component\Plugin\PluginBase;
@@ -17,7 +12,7 @@
  *
  * @CKEditorPlugin(
  *   id = "drupalresponsiveimagestyle",
- *   label = @Translation("Drupal responsive image style"),
+ *   label = @Translation("Responsive image style"),
  *   module = "ckeditor"
  * )
  */
diff --git a/core/modules/responsive_image/src/Plugin/Filter/FilterResponsiveImageStyle.php b/core/modules/responsive_image/src/Plugin/Filter/FilterResponsiveImageStyle.php
index eb79093..6f0f5cb 100644
--- a/core/modules/responsive_image/src/Plugin/Filter/FilterResponsiveImageStyle.php
+++ b/core/modules/responsive_image/src/Plugin/Filter/FilterResponsiveImageStyle.php
@@ -1,10 +1,5 @@
 <?php
 
-/**
- * @file
- * Contains \Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle.
- */
-
 namespace Drupal\responsive_image\Plugin\Filter;
 
 use Drupal\Component\Utility\Html;
@@ -25,9 +20,9 @@
  * Provides a filter to render inline images as responsive images.
  *
  * @Filter(
- *   id = "filter_responsive_image_style",
+ *   id = "responsive_image_style",
  *   module = "responsive_image",
- *   title = @Translation("Display responsive images"),
+ *   title = @Translation("Display responsive image styles"),
  *   description = @Translation("Uses the data-responsive-image-style attribute on &lt;img&gt; tags to display responsive images."),
  *   type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE
  * )
@@ -57,7 +52,7 @@ class FilterResponsiveImageStyle extends FilterBase implements ContainerFactoryP
   protected $renderer;
 
   /**
-   * Constructs a Drupal\Component\Plugin\PluginBase object.
+   * Constructs a Drupal\responsive_image\Plugin\Filter\FilterResponsiveImageStyle object.
    *
    * @param array $configuration
    *   A configuration array containing information about the plugin instance.
@@ -189,19 +184,22 @@ protected function getImageInfo($file_uuid) {
    *  The attributes array.
    */
   protected function prepareResponsiveImageAttributes(\DOMElement $dom_element) {
-    // Make sure all non-regenerated attributes are retained.
+    // Remove attributes that are no longer needed.
     $dom_element->removeAttribute('data-entity-type');
     $dom_element->removeAttribute('data-entity-uuid');
     $dom_element->removeAttribute('data-responsive-image-style');
+
+    // Remove attributes that are generated by the image style.
     $dom_element->removeAttribute('width');
     $dom_element->removeAttribute('height');
     $dom_element->removeAttribute('src');
 
     // Responsive image styles should override image styles.
-    if ($dom_element->hasAttribute('data-image-style')) {
-      $dom_element->removeAttribute('data-image-style');
+    if ($dom_element->hasAttribute('data-responsive-image-style')) {
+      $dom_element->removeAttribute('data-responsive-image-style');
     }
 
+    // Make sure all non-regenerated attributes are retained.
     $attributes = [];
     for ($i = 0; $i < $dom_element->attributes->length; $i++) {
       $attr = $dom_element->attributes->item($i);
@@ -226,9 +224,6 @@ protected function prepareResponsiveImageAttributes(\DOMElement $dom_element) {
    */
   protected function getResponsiveImageStyleHtml($file_uuid, $responsive_image_style_id, \DOMElement $dom_element) {
     $image_info = $this->getImageInfo($file_uuid);
-    $image_uri = $image_info['uri'];
-    $image_width = $image_info['width'];
-    $image_height = $image_info['height'];
 
     // Remove attributes that will be generated by the image style.
     $attributes = $this->prepareResponsiveImageAttributes($dom_element);
@@ -237,9 +232,9 @@ protected function getResponsiveImageStyleHtml($file_uuid, $responsive_image_sty
     $responsive_image = [
       '#theme' => 'responsive_image',
       '#responsive_image_style_id' => $responsive_image_style_id,
-      '#uri' => $image_uri,
-      '#width' => $image_width,
-      '#height' => $image_height,
+      '#uri' => $image_info['uri'],
+      '#width' => $image_info['width'],
+      '#height' => $image_info['height'],
       '#attributes' => $attributes,
     ];
 
diff --git a/core/modules/responsive_image/tests/src/Unit/FilterResponsiveImageStyleTest.php b/core/modules/responsive_image/tests/src/Unit/FilterResponsiveImageStyleTest.php
index a01c8ac..b6f8932 100644
--- a/core/modules/responsive_image/tests/src/Unit/FilterResponsiveImageStyleTest.php
+++ b/core/modules/responsive_image/tests/src/Unit/FilterResponsiveImageStyleTest.php
@@ -81,12 +81,12 @@ public function testProcessWithImage() {
     $original_img = '<img src="' . $original_src .'" width="' . $original_width .'" height="' . $original_height .'" alt="' . $original_alt .'" data-entity-uuid="' . $original_uuid . '" data-entity-type="file" data-image-style="' . $original_image_style . '" data-responsive-image-style="' . $original_responsive_image_style . '" />';
     $original_text = '<p>' . $original_img . '</p>';
 
-    $generated_src = 'styles/max_325x325/public/inline-images/image.png';
-    $generated_srcset = 'styles/max_325x325/public/inline-images/image.png 325w, styles/max_650x650/public/inline-images/image.png 650w, styles/max_1300x1300/public/inline-images/image.png 1300w';
-    $generated_sizes = '(min-width: 1290px) 325px, (min-width: 851px) 25vw, (min-width: 560px) 50vw, 100vw';
+    $expected_src = 'styles/max_325x325/public/inline-images/image.png';
+    $expected_srcset = 'styles/max_325x325/public/inline-images/image.png 325w, styles/max_650x650/public/inline-images/image.png 650w, styles/max_1300x1300/public/inline-images/image.png 1300w';
+    $expected_sizes = '(min-width: 1290px) 325px, (min-width: 851px) 25vw, (min-width: 560px) 50vw, 100vw';
 
-    $generated_img = '<img srcset="' . $generated_srcset .'" sizes="' . $generated_sizes .'" src="' . $generated_src .'" alt="' . $original_alt .'" />';
-    $generated_text = '<p>' . $generated_img . '</p>';
+    $expected_img = '<img srcset="' . $expected_srcset .'" sizes="' . $expected_sizes .'" src="' . $expected_src .'" alt="' . $original_alt .'" />';
+    $expected_text = '<p>' . $expected_img . '</p>';
 
     $this->filterResponsiveImageStyle
       ->method('loadResponsiveImageStyles')
@@ -102,9 +102,9 @@ public function testProcessWithImage() {
         $this->equalTo($original_image_style),
         $this->anything()
       )
-      ->willReturn($generated_img);
+      ->willReturn($expected_img);
 
     $output = $this->filterResponsiveImageStyle->process($original_text, 'en');
-    $this->assertEquals($generated_text, $output);
+    $this->assertEquals($expected_text, $output);
   }
 }
diff --git a/core/modules/system/system.install b/core/modules/system/system.install
index e9a34de..b3a0ec1 100644
--- a/core/modules/system/system.install
+++ b/core/modules/system/system.install
@@ -1645,27 +1645,5 @@ function system_update_8014() {
 }
 
 /**
- * Add allowed attributes to existing html filters.
- */
-function system_update_8015() {
-  $config_factory = \Drupal::configFactory();
-  foreach ($config_factory->listAll('filter.format') as $name) {
-    $config = $config_factory->getEditable($name);
-    if (!$config->get('filters.filter_imagestyle.status')) {
-      continue;
-    }
-    $allowed_html = $config->get('filters.filter_html.settings.allowed_html');
-    $matches = [];
-    if (!empty($allowed_html) && preg_match('/<img([^>]*)>/', $allowed_html, $matches)) {
-      $new_attributes = array_filter(explode(' ', $matches[1]));
-      $new_attributes[] = 'data-image-style';
-      $allowed_html = preg_replace('/<img([^>]*)>/', '<img ' . implode(' ', array_unique($new_attributes)) . '>', $allowed_html);
-      $config->set('filters.filter_html.settings.allowed_html', $allowed_html);
-      $config->save();
-    }
-  }
-}
-
-/**
  * @} End of "addtogroup updates-8.0.0-rc".
  */