diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 12c11e6..767d1da 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1276,9 +1276,31 @@ function template_preprocess_links(&$variables) {
  *   - 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 URI's and sizes/multipliers.
  */
 function template_preprocess_image(&$variables) {
-  $variables['attributes']['src'] = file_create_url($variables['uri']);
+  if (isset($variables['uri']) && !empty($variables['uri'])) {
+    $variables['attributes']['src'] = file_create_url($variables['uri']);
+  }
+
+  if (isset($variables['srcset'])) {
+    $srcsets = array();
+    foreach ($variables['srcset'] as $srcset) {
+      // URI is mandatory.
+      if (isset($srcset['uri']) && !empty($srcset['uri'])) {
+        $srcset['src'] = file_create_url($srcset['uri']);
+        $new_source = $srcset['src'];
+        if (isset($srcset['width']) && !empty($srcset['width'])) {
+          $new_source .= ' ' . $srcset['width'];
+        }
+        elseif (isset($srcset['multiplier']) && !empty($srcset['multiplier'])) {
+          $new_source .= ' ' . $srcset['multiplier'];
+        }
+        $srcsets[] = $new_source;
+      }
+    }
+    $variables['attributes']['srcset'] = implode(', ', $srcsets);
+  }
 
   foreach (array('width', 'height', 'alt', 'title') as $key) {
     if (isset($variables[$key])) {
@@ -2545,7 +2567,7 @@ function drupal_common_theme() {
       // - http://dev.w3.org/html5/spec/Overview.html#alt
       // The title attribute is optional in all cases, so it is omitted by
       // default.
-      'variables' => array('uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array()),
+      'variables' => array('uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', 'title' => NULL, 'attributes' => array(), 'srcset' => array()),
       'template' => 'image',
     ),
     'breadcrumb' => array(
diff --git a/core/modules/image/lib/Drupal/image/Entity/ImageStyle.php b/core/modules/image/lib/Drupal/image/Entity/ImageStyle.php
index 4eaa2ec..ac028a2 100644
--- a/core/modules/image/lib/Drupal/image/Entity/ImageStyle.php
+++ b/core/modules/image/lib/Drupal/image/Entity/ImageStyle.php
@@ -312,6 +312,15 @@ public function transformDimensions(array &$dimensions) {
   /**
    * {@inheritdoc}
    */
+  public function transformMimeType(&$mime_type) {
+    foreach ($this->getEffects() as $effect) {
+      $effect->transformMimeType($mime_type);
+    }
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   public function getPathToken($uri) {
     // Return the first 8 characters.
     return substr(Crypt::hmacBase64($this->id() . ':' . $uri, \Drupal::service('private_key')->get() . drupal_get_hash_salt()), 0, 8);
diff --git a/core/modules/image/lib/Drupal/image/ImageEffectBase.php b/core/modules/image/lib/Drupal/image/ImageEffectBase.php
index ea3208a..099eea0 100644
--- a/core/modules/image/lib/Drupal/image/ImageEffectBase.php
+++ b/core/modules/image/lib/Drupal/image/ImageEffectBase.php
@@ -47,6 +47,13 @@ public function transformDimensions(array &$dimensions) {
   /**
    * {@inheritdoc}
    */
+  public function transformMimeType(&$mime_type) {
+    $mime_type = NULL;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   public function getSummary() {
     return array(
       '#markup' => '',
diff --git a/core/modules/image/lib/Drupal/image/ImageEffectInterface.php b/core/modules/image/lib/Drupal/image/ImageEffectInterface.php
index 66b7f4e..719f0b7 100644
--- a/core/modules/image/lib/Drupal/image/ImageEffectInterface.php
+++ b/core/modules/image/lib/Drupal/image/ImageEffectInterface.php
@@ -37,6 +37,14 @@ public function applyEffect(ImageInterface $image);
   public function transformDimensions(array &$dimensions);
 
   /**
+   * Determines the mime type of the styled image.
+   *
+   * @param string $mime_type
+   *   Mime type to be modified.
+   */
+  public function transformMimeType(&$mime_type);
+
+  /**
    * Returns a render array summarizing the configuration of the image effect.
    *
    * @return array
diff --git a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/DesaturateImageEffect.php b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/DesaturateImageEffect.php
index 4d899c6..4db895c 100644
--- a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/DesaturateImageEffect.php
+++ b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/DesaturateImageEffect.php
@@ -30,6 +30,12 @@ public function transformDimensions(array &$dimensions) {
   /**
    * {@inheritdoc}
    */
+  public function transformMimeType(&$mime_type) {
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   public function applyEffect(ImageInterface $image) {
     if (!$image->desaturate()) {
       watchdog('image', 'Image desaturate failed using the %toolkit toolkit on %path (%mimetype, %dimensions)', array('%toolkit' => $image->getToolkitId(), '%path' => $image->getSource(), '%mimetype' => $image->getMimeType(), '%dimensions' => $image->getWidth() . 'x' . $image->getHeight()), WATCHDOG_ERROR);
diff --git a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ResizeImageEffect.php b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ResizeImageEffect.php
index da9b176..81857f2 100644
--- a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ResizeImageEffect.php
+++ b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ResizeImageEffect.php
@@ -45,6 +45,12 @@ public function transformDimensions(array &$dimensions) {
   /**
    * {@inheritdoc}
    */
+  public function transformMimeType(&$mime_type) {
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   public function getSummary() {
     return array(
       '#theme' => 'image_resize_summary',
diff --git a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/RotateImageEffect.php b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/RotateImageEffect.php
index b0e6bf3..2fc516a 100644
--- a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/RotateImageEffect.php
+++ b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/RotateImageEffect.php
@@ -73,6 +73,12 @@ public function transformDimensions(array &$dimensions) {
   /**
    * {@inheritdoc}
    */
+  public function transformMimeType(&$mime_type) {
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   public function getSummary() {
     return array(
       '#theme' => 'image_rotate_summary',
diff --git a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ScaleImageEffect.php b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ScaleImageEffect.php
index 4316bd0..88f5fee 100644
--- a/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ScaleImageEffect.php
+++ b/core/modules/image/lib/Drupal/image/Plugin/ImageEffect/ScaleImageEffect.php
@@ -44,6 +44,12 @@ public function transformDimensions(array &$dimensions) {
   /**
    * {@inheritdoc}
    */
+  public function transformMimeType(&$mime_type) {
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   public function getSummary() {
     return array(
       '#theme' => 'image_scale_summary',