core/includes/theme.inc                            | 63 ----------------------
 core/modules/system/templates/image.html.twig      | 55 ++++++++++++++++++-
 core/themes/classy/templates/field/image.html.twig | 25 +++++++--
 core/themes/stable/stable.theme                    | 63 ++++++++++++++++++++++
 core/themes/stable/templates/field/image.html.twig | 22 +++++++-
 5 files changed, 159 insertions(+), 69 deletions(-)

diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 54b038b..826401f 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -724,69 +724,6 @@ function template_preprocess_links(&$variables) {
 }
 
 /**
- * Prepares variables for image templates.
- *
- * Default template: image.html.twig.
- *
- * @param array $variables
- *   An associative array containing:
- *   - uri: Either the path of the image file (relative to base_path()) or a
- *     full URL.
- *   - width: The width of the image (if known).
- *   - height: The height of the image (if known).
- *   - alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0
- *     always require an alt attribute. The HTML 5 draft allows the alt
- *     attribute to be omitted in some cases. Therefore, this variable defaults
- *     to an empty string, but can be set to NULL for the attribute to be
- *     omitted. Usually, neither omission nor an empty string satisfies
- *     accessibility requirements, so it is strongly encouraged for code
- *     building variables for image.html.twig templates to pass a meaningful
- *     value for this variable.
- *     - http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
- *     - http://www.w3.org/TR/xhtml1/dtds.html
- *     - http://dev.w3.org/html5/spec/Overview.html#alt
- *   - title: The title text is displayed when the image is hovered in some
- *     popular browsers.
- *   - attributes: Associative array of attributes to be placed in the img tag.
- *   - srcset: Array of multiple URIs and sizes/multipliers.
- *   - sizes: The sizes attribute for viewport-based selection of images.
- *     - http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
- */
-function template_preprocess_image(&$variables) {
-  if (!empty($variables['uri'])) {
-    $variables['attributes']['src'] = file_url_transform_relative(file_create_url($variables['uri']));
-  }
-  // Generate a srcset attribute conforming to the spec at
-  // http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-srcset
-  if (!empty($variables['srcset'])) {
-    $srcset = array();
-    foreach ($variables['srcset'] as $src) {
-      // URI is mandatory.
-      $source = file_url_transform_relative(file_create_url($src['uri']));
-      if (isset($src['width']) && !empty($src['width'])) {
-        $source .= ' ' . $src['width'];
-      }
-      elseif (isset($src['multiplier']) && !empty($src['multiplier'])) {
-        $source .= ' ' . $src['multiplier'];
-      }
-      $srcset[] = $source;
-    }
-    $variables['attributes']['srcset'] = implode(', ', $srcset);
-  }
-
-  foreach (array('width', 'height', 'alt', 'title', 'sizes') as $key) {
-    if (isset($variables[$key])) {
-      // If the property has already been defined in the attributes,
-      // do not override, including NULL.
-      if (array_key_exists($key, $variables['attributes'])) {
-        continue;
-      }
-      $variables['attributes'][$key] = $variables[$key];
-    }
-  }
-}
-
-/**
  * Prepares variables for table templates.
  *
  * Default template: table.html.twig.
diff --git a/core/modules/system/templates/image.html.twig b/core/modules/system/templates/image.html.twig
index 6411eaa..4ca403f 100644
--- a/core/modules/system/templates/image.html.twig
+++ b/core/modules/system/templates/image.html.twig
@@ -4,12 +4,63 @@
  * Default theme implementation of an image.
  *
  * Available variables:
+ * - uri: Either the path of the image file (relative to base_path()) or a
+ *   full URL.
+ * - width: The width of the image (if known).
+ * - height: The height of the image (if known).
+ * - alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0
+ *   always require an alt attribute. The HTML 5 draft allows the alt
+ *   attribute to be omitted in some cases. Therefore, this variable defaults
+ *   to an empty string, but can be set to NULL for the attribute to be
+ *   omitted. Usually, neither omission nor an empty string satisfies
+ *   accessibility requirements, so it is strongly encouraged for code
+ *   building variables for image.html.twig templates to pass a meaningful
+ *   value for this variable.
+ *   - http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
+ *   - http://www.w3.org/TR/xhtml1/dtds.html
+ *   - http://dev.w3.org/html5/spec/Overview.html#alt
+ * - title: The title text is displayed when the image is hovered in some
+ *   popular browsers.
  * - attributes: HTML attributes for the img tag.
+ * - srcset: Array of multiple URIs and sizes/multipliers.
+ * - sizes: The sizes attribute for viewport-based selection of images.
+ *   - http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
  * - style_name: (optional) The name of the image style applied.
  *
- * @see template_preprocess_image()
- *
  * @ingroup themeable
  */
 #}
+{% spaceless %}
+{% if uri is not empty %}
+  {% set attributes = attributes.setAttribute('src', file_url(uri)) %}
+{% endif %}
+{#
+  Generate a srcset attribute conforming to the spec at
+  http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-srcset
+#}
+{% if srcset is not empty %}
+  {% set srcset_attribute = [] %}
+  {% for source in srcset %}
+    {# URI is mandatory. #}
+    {% set current_source = file_url(source.uri) %}
+    {# Width and multiplier are optional. #}
+    {% if source.width is defined %}
+      {% set current_source = current_source ~ ' ' ~ source.width %}
+    {% elseif source.multiplier is defined %}
+      {% set current_source = current_source ~ ' ' ~ source.multiplier %}
+    {% endif %}
+    {% set srcset_attribute = srcset_attribute|merge([current_source]) %}
+  {% endfor %}
+  {% set attributes = attributes.setAttribute('srcset', srcset_attribute|join(', ')) %}
+{% endif %}
+{#
+  Use certain template variables as attributes, unless those attributes are
+  already specifically defined.
+#}
+{% for attribute_name in ['width', 'height', 'alt', 'title', 'sizes'] %}
+  {% if _context[attribute_name] is defined and attributes[attribute_name] is empty %}
+    {% set attributes = attributes.setAttribute(attribute_name, _context[attribute_name]) %}
+  {% endif %}
+{% endfor %}
+{% endspaceless %}
 <img{{ attributes }} />
diff --git a/core/themes/classy/templates/field/image.html.twig b/core/themes/classy/templates/field/image.html.twig
index 31f782b..690e0d8 100644
--- a/core/themes/classy/templates/field/image.html.twig
+++ b/core/themes/classy/templates/field/image.html.twig
@@ -1,13 +1,32 @@
+{% extends "@system/image.html.twig" %}
 {#
 /**
  * @file
  * Theme override of an image.
  *
  * Available variables:
+ * - uri: Either the path of the image file (relative to base_path()) or a
+ *   full URL.
+ * - width: The width of the image (if known).
+ * - height: The height of the image (if known).
+ * - alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0
+ *   always require an alt attribute. The HTML 5 draft allows the alt
+ *   attribute to be omitted in some cases. Therefore, this variable defaults
+ *   to an empty string, but can be set to NULL for the attribute to be
+ *   omitted. Usually, neither omission nor an empty string satisfies
+ *   accessibility requirements, so it is strongly encouraged for code
+ *   building variables for image.html.twig templates to pass a meaningful
+ *   value for this variable.
+ *   - http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
+ *   - http://www.w3.org/TR/xhtml1/dtds.html
+ *   - http://dev.w3.org/html5/spec/Overview.html#alt
+ * - title: The title text is displayed when the image is hovered in some
+ *   popular browsers.
  * - attributes: HTML attributes for the img tag.
+ * - srcset: Array of multiple URIs and sizes/multipliers.
+ * - sizes: The sizes attribute for viewport-based selection of images.
+ *   - http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
  * - style_name: (optional) The name of the image style applied.
- *
- * @see template_preprocess_image()
  */
 #}
 {%
@@ -15,4 +34,4 @@ set classes = [
   style_name ? 'image-style-' ~ style_name|clean_class,
 ]
 %}
-<img{{ attributes.addClass(classes) }} />
+{% set attributes = attributes.addClass(classes) %}
diff --git a/core/themes/stable/stable.theme b/core/themes/stable/stable.theme
index 456a4ad..9af2d6e 100644
--- a/core/themes/stable/stable.theme
+++ b/core/themes/stable/stable.theme
@@ -23,3 +23,66 @@ function stable_preprocess_links(&$variables) {
     }
   }
 }
+
+/**
+ * Prepares variables for image templates.
+ *
+ * Default template: image.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - uri: Either the path of the image file (relative to base_path()) or a
+ *     full URL.
+ *   - width: The width of the image (if known).
+ *   - height: The height of the image (if known).
+ *   - alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0
+ *     always require an alt attribute. The HTML 5 draft allows the alt
+ *     attribute to be omitted in some cases. Therefore, this variable defaults
+ *     to an empty string, but can be set to NULL for the attribute to be
+ *     omitted. Usually, neither omission nor an empty string satisfies
+ *     accessibility requirements, so it is strongly encouraged for code
+ *     building variables for image.html.twig templates to pass a meaningful
+ *     value for this variable.
+ *     - http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
+ *     - http://www.w3.org/TR/xhtml1/dtds.html
+ *     - http://dev.w3.org/html5/spec/Overview.html#alt
+ *   - title: The title text is displayed when the image is hovered in some
+ *     popular browsers.
+ *   - attributes: Associative array of attributes to be placed in the img tag.
+ *   - srcset: Array of multiple URIs and sizes/multipliers.
+ *   - sizes: The sizes attribute for viewport-based selection of images.
+ *     - http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
+ */
+function stable_preprocess_image(&$variables) {
+  if (!empty($variables['uri'])) {
+    $variables['attributes']['src'] = file_url_transform_relative(file_create_url($variables['uri']));
+  }
+  // Generate a srcset attribute conforming to the spec at
+  // http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#attr-img-srcset
+  if (!empty($variables['srcset'])) {
+    $srcset = array();
+    foreach ($variables['srcset'] as $src) {
+      // URI is mandatory.
+      $source = file_url_transform_relative(file_create_url($src['uri']));
+      if (isset($src['width']) && !empty($src['width'])) {
+        $source .= ' ' . $src['width'];
+      }
+      elseif (isset($src['multiplier']) && !empty($src['multiplier'])) {
+        $source .= ' ' . $src['multiplier'];
+      }
+      $srcset[] = $source;
+    }
+    $variables['attributes']['srcset'] = implode(', ', $srcset);
+  }
+
+  foreach (array('width', 'height', 'alt', 'title', 'sizes') as $key) {
+    if (isset($variables[$key])) {
+      // If the property has already been defined in the attributes,
+      // do not override, including NULL.
+      if (array_key_exists($key, $variables['attributes'])) {
+        continue;
+      }
+      $variables['attributes'][$key] = $variables[$key];
+    }
+  }
+}
diff --git a/core/themes/stable/templates/field/image.html.twig b/core/themes/stable/templates/field/image.html.twig
index b342eee..8bdf886 100644
--- a/core/themes/stable/templates/field/image.html.twig
+++ b/core/themes/stable/templates/field/image.html.twig
@@ -4,10 +4,30 @@
  * Theme override of an image.
  *
  * Available variables:
+ * - uri: Either the path of the image file (relative to base_path()) or a
+ *   full URL.
+ * - width: The width of the image (if known).
+ * - height: The height of the image (if known).
+ * - alt: The alternative text for text-based browsers. HTML 4 and XHTML 1.0
+ *   always require an alt attribute. The HTML 5 draft allows the alt
+ *   attribute to be omitted in some cases. Therefore, this variable defaults
+ *   to an empty string, but can be set to NULL for the attribute to be
+ *   omitted. Usually, neither omission nor an empty string satisfies
+ *   accessibility requirements, so it is strongly encouraged for code
+ *   building variables for image.html.twig templates to pass a meaningful
+ *   value for this variable.
+ *   - http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.8
+ *   - http://www.w3.org/TR/xhtml1/dtds.html
+ *   - http://dev.w3.org/html5/spec/Overview.html#alt
+ * - title: The title text is displayed when the image is hovered in some
+ *   popular browsers.
  * - attributes: HTML attributes for the img tag.
+ * - srcset: Array of multiple URIs and sizes/multipliers.
+ * - sizes: The sizes attribute for viewport-based selection of images.
+ *   - http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
  * - style_name: (optional) The name of the image style applied.
  *
- * @see template_preprocess_image()
+ * @see stable_preprocess_image()
  */
 #}
 <img{{ attributes }} />