From 40b2b0720d83d4bae3afb689941c2162c1a20dec Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Thu, 13 Oct 2016 11:12:04 +0100
Subject: [PATCH] Issue #2481637 by Jelle_S, attiks, mdrummond, Wim Leers: Use
 src in fallback image

---
 .../responsive_image/responsive_image.module   | 18 +++++++-----------
 .../Tests/ResponsiveImageFieldDisplayTest.php  |  6 +-----
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module
index 89ac37f4903..8890dd9f23d 100644
--- a/core/modules/responsive_image/responsive_image.module
+++ b/core/modules/responsive_image/responsive_image.module
@@ -197,17 +197,13 @@ function template_preprocess_responsive_image(&$variables) {
   }
   else {
     $variables['output_image_tag'] = FALSE;
-    // Prepare the fallback image. Use srcset in 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.
+    // Prepare the fallback image. We use the src attribute, which might cause
+    // double downloads in browsers that don't support the picture tag (might,
+    // because when picturefill kicks in, it cancels the download and triggers
+    // the download for the correct image).
     $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(), $image->getSource()),
     );
   }
 
@@ -265,7 +261,7 @@ function template_preprocess_responsive_image(&$variables) {
  * <picture>
  *   <source media="(min-width: 0px)" srcset="sites/default/files/styles/thumbnail/image.jpeg" />
  *   <source media="(min-width: 560px)" sizes="(min-width: 700px) 700px, 100vw" srcset="sites/default/files/styles/large/image.jpeg 480w, sites/default/files/styles/medium/image.jpeg 220w" />
- *   <img srcset="fallback.jpeg" />
+ *   <img src="fallback.jpeg" />
  * </picture>
  * @endcode
  *
@@ -294,7 +290,7 @@ function template_preprocess_responsive_image(&$variables) {
  * <picture>
  *   <source [...] mime-type="image/webp" srcset="image1.webp 1x, image2.webp 2x, image3.webp 3x"/>
  *   <source [...] mime-type="image/jpeg" srcset="image1.jpeg 1x, image2.jpeg 2x, image3.jpeg 3x"/>
- *   <img srcset="fallback.jpeg" />
+ *   <img src="fallback.jpeg" />
  * </picture>
  * @endcode
  * This way a browser can decide which <source> tag is preferred based on the
diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php
index f5b277dcdf7..aef5ec016e0 100644
--- a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php
+++ b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php
@@ -315,11 +315,7 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
     $fallback_image = array(
       '#theme' => 'image',
       '#alt' => $alt,
-      '#srcset' => array(
-        array(
-          'uri' => file_url_transform_relative($large_style->buildUrl($image->getSource())),
-        ),
-      ),
+      '#uri' => file_url_transform_relative($large_style->buildUrl($image->getSource())),
     );
     // The image.html.twig template has a newline after the <img> tag but
     // responsive-image.html.twig doesn't have one after the fallback image, so