diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module
index ec4dbe1..d3f0453 100644
--- a/core/modules/responsive_image/responsive_image.module
+++ b/core/modules/responsive_image/responsive_image.module
@@ -9,9 +9,7 @@
 use Drupal\Core\Routing\RouteMatchInterface;
 use \Drupal\Core\Template\Attribute;
 use Drupal\image\Entity\ImageStyle;
-use Drupal\Core\Url;
 use Drupal\responsive_image\Entity\ResponsiveImageStyle;
-use Drupal\Core\Image\ImageInterface;
 use Drupal\breakpoint\BreakpointInterface;
 
 /**
@@ -139,25 +137,19 @@ function template_preprocess_responsive_image_formatter(&$variables) {
  * @param $variables
  *   An associative array containing:
  *   - uri: The URI of the image.
- *   - width: The width of the image (if known).
- *   - height: The height of the image (if known).
+ *   - width: The width of the image.
+ *   - height: The height of the image.
  *   - attributes: Associative array of attributes to be placed in the img tag.
  *   - responsive_image_style_id: The ID of the responsive image style.
  */
 function template_preprocess_responsive_image(&$variables) {
-  // Make sure that width and height are proper values
-  // If they exists we'll output them
-  // @see http://www.w3.org/community/respimg/2012/06/18/florians-compromise/
-  if (isset($variables['width']) && empty($variables['width'])) {
-    unset($variables['width']);
-    unset($variables['height']);
-  }
-  elseif (isset($variables['height']) && empty($variables['height'])) {
-    unset($variables['width']);
-    unset($variables['height']);
-  }
+  $dimensions = [
+    'width' => $variables['width'],
+    'height' => $variables['height'],
+  ];
+  $extension = pathinfo($variables['uri'], PATHINFO_EXTENSION);
 
-  $image = \Drupal::service('image.factory')->get($variables['uri']);
+  // Load the responsive image style and the breakpoints.
   $responsive_image_style = ResponsiveImageStyle::load($variables['responsive_image_style_id']);
   // If a responsive image style is not selected, log the error and stop
   // execution.
@@ -173,23 +165,27 @@ function template_preprocess_responsive_image(&$variables) {
   // width. For responsive images, we need largest breakpoint widths first, so
   // we need to reverse the order of these breakpoints.
   $breakpoints = array_reverse(\Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));
+  // Build the attributes for one <source> tag per mapping in the responsive
+  // image style.
   foreach ($responsive_image_style->getKeyedImageStyleMappings() as $breakpoint_id => $multipliers) {
     if (isset($breakpoints[$breakpoint_id])) {
-      $variables['sources'][] = responsive_image_build_source_attributes($image, $variables, $breakpoints[$breakpoint_id], $multipliers);
+      $variables['sources'][] = responsive_image_build_source_attributes($variables['uri'], $dimensions, $extension, $breakpoints[$breakpoint_id], $multipliers);
     }
   }
-  // Prepare the fallback image. Use srcset in the fallback image to avoid
-  // unnecessary preloading of images in older browsers. See
+
+  // Prepare the controlling image element. Use the srcset for the fallback
+  // image to avoid unnecessary preloading of images in older browsers. See
   // http://scottjehl.github.io/picturefill/#using-picture and
   // http://scottjehl.github.io/picturefill/#gotchas for more information.
   $variables['img_element'] = array(
     '#theme' => 'image',
     '#srcset' => array(
       array(
-        'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
+        'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $variables['uri']),
       ),
     ),
   );
+  // Assign the incoming alt, title and attributes to the image element.
   if (isset($variables['attributes'])) {
     if (isset($variables['attributes']['alt'])) {
       $variables['img_element']['#alt'] = $variables['attributes']['alt'];
@@ -206,9 +202,8 @@ function template_preprocess_responsive_image(&$variables) {
 /**
  * Helper function for template_preprocess_responsive_image().
  *
- * Builds an array of attributes for <source> tags to be used in a <picture>
- * tag. In other words, this function provides the attributes for each <source>
- * tag in a <picture> tag.
+ * Builds an array of attributes for a <source> tag to be used in a <picture>
+ * tag.
  *
  * In a responsive image style, each breakpoint has an image style mapping for
  * each of its multipliers. An image style mapping can be either of two types:
@@ -223,7 +218,7 @@ function template_preprocess_responsive_image(&$variables) {
  *   'label' => 'Style One',
  *   'breakpoint_group' => 'responsive_image_test_module',
  * ));
- * $responsive_img_style->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
+ * ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
  *   'image_mapping_type' => 'image_style',
  *   'image_mapping' => 'thumbnail',
  * ))
@@ -231,10 +226,7 @@ function template_preprocess_responsive_image(&$variables) {
  *   'image_mapping_type' => 'sizes',
  *   'image_mapping' => array(
  *     'sizes' => '(min-width: 700px) 700px, 100vw',
- *     'sizes_image_styles' => array(
- *       'large' => 'large',
- *       'medium' => 'medium',
- *     ),
+ *     'sizes_image_styles' => array('large', 'medium')
  *   ),
  * ))
  * ->save();
@@ -325,27 +317,23 @@ function template_preprocess_responsive_image(&$variables) {
  * See http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#image-candidate-string
  * for further information.
  *
- * @param \Drupal\Core\Image\ImageInterface $image
- *   The image to build the <source> tags for.
- * @param array $variables
+ * @param string $uri
+ *   The URI of the image.
+ * @param array $dimensions
  *   An array with the following keys:
- *     - responsive_image_style_id: The \Drupal\responsive_image\Entity\ResponsiveImageStyle
- *       ID.
- *     - width: The width of the image (if known).
- *     - height: The height of the image (if known).
- *     - uri: The URI of the image file.
+ *     - width: The original width of the image.
+ *     - height: The original height of the image.
+ * @param string $extension
+ *   The original extension of the image (without the leading dot).
  * @param \Drupal\breakpoint\BreakpointInterface $breakpoint
  *   The breakpoint for this source tag.
  * @param array $multipliers
  *   An array with multipliers as keys and image style mappings as values.
  *
- * @return \Drupal\Core\Template\Attribute[]
- *   An array of attributes for the source tag.
+ * @return \Drupal\Core\Template\Attribute
+ *   A set of attributes for the source tag.
  */
-function responsive_image_build_source_attributes(ImageInterface $image, array $variables, BreakpointInterface $breakpoint, array $multipliers) {
-  $width = isset($variables['width']) && !empty($variables['width']) ? $variables['width'] : $image->getWidth();
-  $height = isset($variables['height']) && !empty($variables['height']) ? $variables['height'] : $image->getHeight();
-  $extension = pathinfo($image->getSource(), PATHINFO_EXTENSION);
+function responsive_image_build_source_attributes($uri, array $dimensions, $extension, BreakpointInterface $breakpoint, array $multipliers) {
   $sizes = array();
   $srcset = array();
   $derivative_mime_types = array();
@@ -356,7 +344,7 @@ function responsive_image_build_source_attributes(ImageInterface $image, array $
         // Loop through the image styles for this breakpoint and multiplier.
         foreach ($image_style_mapping['image_mapping']['sizes_image_styles'] as $image_style_name) {
           // Get the dimensions.
-          $dimensions = responsive_image_get_image_dimensions($image_style_name, array('width' => $width, 'height' => $height), $variables['uri']);
+          $dimensions = responsive_image_get_image_dimensions($image_style_name, $dimensions, $uri);
           // Get MIME type.
           $derivative_mime_type = responsive_image_get_mime_type($image_style_name, $extension);
           $derivative_mime_types[] = $derivative_mime_type;
@@ -367,12 +355,12 @@ function responsive_image_build_source_attributes(ImageInterface $image, array $
           // this breakpoint should be merged into one srcset and the sizes
           // attribute should be merged as well.
           if (is_null($dimensions['width'])) {
-            throw new \LogicException("Could not determine image width for '{$image->getSource()}' using image style with ID: $image_style_name. This image style can not be used for a responsive image style mapping using the 'sizes' attribute.");
+            throw new \LogicException(SafeMarkup::format('Could not determine image width for @file using image style with ID: @image_style_name. This image style can not be used for a responsive image style mapping using the \'sizes\' attribute.', array('@file' => $uri, '@image_style_name' => $image_style_name)));
           }
           // Use the image width as key so we can sort the array later on.
           // Images within a srcset should be sorted from small to large, since
           // the first matching source will be used.
-          $srcset[intval($dimensions['width'])] = file_create_url(_responsive_image_image_style_url($image_style_name, $image->getSource())) . ' ' . $dimensions['width'] . 'w';
+          $srcset[intval($dimensions['width'])] = file_create_url(_responsive_image_image_style_url($image_style_name, $uri)) . ' ' . $dimensions['width'] . 'w';
           $sizes = array_merge(explode(',', $image_style_mapping['image_mapping']['sizes']), $sizes);
         }
         break;
@@ -386,13 +374,13 @@ function responsive_image_build_source_attributes(ImageInterface $image, array $
         // be sorted from small to large, since the first matching source will
         // be used. We multiply it by 100 so multipliers with up to two decimals
         // can be used.
-        $srcset[intval(Unicode::substr($multiplier, 0, -1) * 100)] = file_create_url(_responsive_image_image_style_url($image_style_mapping['image_mapping'], $image->getSource())) . ' ' . $multiplier;
+        $srcset[intval(Unicode::substr($multiplier, 0, -1) * 100)] = file_create_url(_responsive_image_image_style_url($image_style_mapping['image_mapping'], $uri)) . ' ' . $multiplier;
         break;
     }
   }
   // Sort the srcset from small to large image width or multiplier.
   ksort($srcset);
-  $source_attributes = new \Drupal\Core\Template\Attribute(array(
+  $source_attributes = new Attribute(array(
     'srcset' => implode(', ', array_unique($srcset)),
   ));
   $media_query = trim($breakpoint->getMediaQuery());