fix(gatsby-image): Safari Downloading multiple resolutions (#11920)

Author: tbrannam

e2e-tests/gatsby-image/src/pages/fixed.js

@@ -24,7 +24,7 @@ export const pageQuery = graphql`
     fruitsFixed: file(relativePath: { eq: "citrus-fruits.jpg" }) {
       childImageSharp {
         fixed(width: 500) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp
         }
       }
     }

e2e-tests/gatsby-image/src/pages/fluid.js

@@ -24,7 +24,7 @@ export const pageQuery = graphql`
     fruitsFluid: file(relativePath: { eq: "citrus-fruits.jpg" }) {
       childImageSharp {
         fluid(maxWidth: 500) {
-          ...GatsbyImageSharpFluid
+          ...GatsbyImageSharpFluid_withWebp
         }
       }
     }

packages/gatsby-image/README.md

@@ -348,3 +348,5 @@ You will need to add it in your graphql query as is shown in the following snipp
 - Gifs can't be resized the same way as pngs and jpegs, unfortunately—if you try
   to use a gif with `gatsby-image`, it won't work. For now, the best workaround is
   to [import the gif directly](/docs/adding-images-fonts-files).
+- Lazy loading behavior is dependent on `IntersectionObserver` which is not available
+  in some fairly common browsers including Safari and IE. A polyfill is recommended.

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -22,21 +22,19 @@ exports[`<Img /> should render fixed size images 1`] = `
         srcset="some srcSetWebp"
         type="image/webp"
       />
-      <source
-        srcset="some srcSet"
-      />
       <img
         alt="Alt text for the image"
         height="100"
         itemprop="item-prop-for-the-image"
         src="test_image.jpg"
+        srcset="some srcSet"
         style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
         title="Title for the image"
         width="100"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' srcSet="some srcSetWebp" /&gt;&lt;source srcSet="some srcSet" /&gt;&lt;img width="100" height="100" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;img width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>
@@ -68,20 +66,18 @@ exports[`<Img /> should render fluid images 1`] = `
         srcset="some srcSetWebp"
         type="image/webp"
       />
-      <source
-        sizes="(max-width: 600px) 100vw, 600px"
-        srcset="some srcSet"
-      />
       <img
         alt="Alt text for the image"
         itemprop="item-prop-for-the-image"
+        sizes="(max-width: 600px) 100vw, 600px"
         src="test_image.jpg"
+        srcset="some srcSet"
         style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
         title="Title for the image"
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' srcSet="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcSet="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>

packages/gatsby-image/src/__tests__/index.js

@@ -58,6 +58,7 @@ describe(`<Img />`, () => {
   it(`should have correct src, title and alt attributes`, () => {
     const imageTag = setup().querySelector(`picture img`)
     expect(imageTag.getAttribute(`src`)).toEqual(`test_image.jpg`)
+    expect(imageTag.getAttribute(`srcSet`)).toEqual(`some srcSet`)
     expect(imageTag.getAttribute(`title`)).toEqual(`Title for the image`)
     expect(imageTag.getAttribute(`alt`)).toEqual(`Alt text for the image`)
   })

packages/gatsby-image/src/index.js

@@ -80,25 +80,26 @@ const noscriptImg = props => {
   const src = props.src ? `src="${props.src}" ` : `src="" ` // required attribute
   const sizes = props.sizes ? `sizes="${props.sizes}" ` : ``
   const srcSetWebp = props.srcSetWebp
-    ? `<source type='image/webp' srcSet="${props.srcSetWebp}" ${sizes}/>`
-    : ``
-  const srcSet = props.srcSet
-    ? `<source srcSet="${props.srcSet}" ${sizes}/>`
+    ? `<source type='image/webp' srcset="${props.srcSetWebp}" ${sizes}/>`
     : ``
+  const srcSet = props.srcSet ? `srcset="${props.srcSet}" ` : ``
   const title = props.title ? `title="${props.title}" ` : ``
   const alt = props.alt ? `alt="${props.alt}" ` : `alt="" ` // required attribute
   const width = props.width ? `width="${props.width}" ` : ``
   const height = props.height ? `height="${props.height}" ` : ``
   const opacity = props.opacity ? props.opacity : `1`
   const transitionDelay = props.transitionDelay ? props.transitionDelay : `0.5s`
-  return `<picture>${srcSetWebp}${srcSet}<img ${width}${height}${src}${alt}${title}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/></picture>`
+  return `<picture>${srcSetWebp}<img ${width}${height}${sizes}${srcSet}${src}${alt}${title}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/></picture>`
 }
 
 const Img = React.forwardRef((props, ref) => {
-  const { style, onLoad, onError, ...otherProps } = props
+  const { sizes, srcSet, src, style, onLoad, onError, ...otherProps } = props
 
   return (
     <img
+      sizes={sizes}
+      srcSet={srcSet}
+      src={src}
       {...otherProps}
       onLoad={onLoad}
       onError={onError}
@@ -315,12 +316,12 @@ class Image extends React.Component {
                 />
               )}
 
-              <source srcSet={image.srcSet} sizes={image.sizes} />
-
               <Img
                 alt={alt}
                 title={title}
+                sizes={image.sizes}
                 src={image.src}
+                srcSet={image.srcSet}
                 style={imageStyle}
                 ref={this.imageRef}
                 onLoad={this.handleImageLoaded}
@@ -399,14 +400,14 @@ class Image extends React.Component {
                 />
               )}
 
-              <source srcSet={image.srcSet} sizes={image.sizes} />
-
               <Img
                 alt={alt}
                 title={title}
                 width={image.width}
                 height={image.height}
+                sizes={image.sizes}
                 src={image.src}
+                srcSet={image.srcSet}
                 style={imageStyle}
                 ref={this.imageRef}
                 onLoad={this.handleImageLoaded}