Opt-out of lazy-load: Add 'critical' flag to Img component (#7083)

Address #4297 * Add `critical` attribute to opt-out of lazy-loading behavior * Picture tag to allow browser to select best matching file format (webp detection) * if fadeIn is true (default) - then the loaded image still will not appear until after the component is mounted ``` <Img fixed={images.file1.childImageSharp.fixed} /> <Img fixed={images.file1.childImageSharp.fixed} /> <Img fixed={images.file2.childImageSharp.fixed} critical fadeIn={false}/> <Img fixed={images.file2.childImageSharp.fixed} critical/> ```
gatsbyjs · Sep 11, 2018 · 5ffb130 · 5ffb130
1 parent bcf3af5
commit 5ffb130
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 107 deletions.
diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md
@@ -260,6 +260,7 @@ prop. e.g. `<Img fluid={fluid} />`
 | `backgroundColor`       | `string` / `bool`   | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
 | `onLoad`                | `func`              | A callback that is called when the full-size image has loaded.                                                              |
 | `Tag`                   | `string`            | Which HTML tag to use for wrapping elements. Defaults to `div`.                                                             |
+| `critical`              | `bool`              | Opt-out of lazy-loading behavior. Defaults to `false`.                                                                      |
 
 ## Image processing arguments
 
@@ -270,6 +271,12 @@ prop. e.g. `<Img fluid={fluid} />`
 
 - If you want to set `display: none;` on a component using a `fixed` prop,
   you need to also pass in to the style prop `{ display: 'inherit' }`.
-- Images don't load until JavaScript is loaded. Gatsby's automatic code
+- By default, images don't load until JavaScript is loaded. Gatsby's automatic code
   splitting generally makes this fine but if images seem slow coming in on a
   page, check how much JavaScript is being loaded there.
+- Images marked as `critical` will start loading immediately as the DOM is 
+  parsed, but unless `fadeIn` is set to `false`, the transition from placeholder
+  to final image will not occur until after the component is mounted.
+- Gatsby-Image now is backed by newer `<picture>` tag. This newer standard allows for
+  media types to be chosen by the browser without using javascript. It also is
+  backward compatible to older browsers (IE 11, etc)
diff --git a/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap
@@ -14,17 +14,25 @@ exports[`<Img /> should render fixed size images 1`] = `
         style="width: 100px; opacity: 0; height: 100px;"
         title="Title for the image"
       />
-      <img
-        alt="Alt text for the image"
-        height="100"
-        src="test_image.jpg"
-        srcset="some srcSet"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1;"
-        title="Title for the image"
-        width="100"
-      />
+      <picture>
+        <source
+          srcset="some srcSetWebp"
+          type="image/webp"
+        />
+        <source
+          srcset="some srcSet"
+        />
+        <img
+          alt="Alt text for the image"
+          height="100"
+          src="test_image.jpg"
+          style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1;"
+          title="Title for the image"
+          width="100"
+        />
+      </picture>
       <noscript>
-        &lt;img width="100" height="100" src="test_image.jpg" srcset="some srcSet" 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;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;
       </noscript>
     </div>
   </div>
@@ -48,16 +56,25 @@ exports[`<Img /> should render fluid images 1`] = `
         style="position: absolute; top: 0px; bottom: 0px; opacity: 0; right: 0px; left: 0px;"
         title="Title for the image"
       />
-      <img
-        alt="Alt text 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: 1;"
-        title="Title for the image"
-      />
+      <picture>
+        <source
+          sizes="(max-width: 600px) 100vw, 600px"
+          srcset="some srcSetWebp"
+          type="image/webp"
+        />
+        <source
+          sizes="(max-width: 600px) 100vw, 600px"
+          srcset="some srcSet"
+        />
+        <img
+          alt="Alt text for the image"
+          src="test_image.jpg"
+          style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1;"
+          title="Title for the image"
+        />
+      </picture>
       <noscript>
-        &lt;img src="test_image.jpg" srcset="some srcSet" alt="Alt text for the image" title="Title for the image" sizes="(max-width: 600px) 100vw, 600px" 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;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;
       </noscript>
     </div>
   </div>

diff --git a/packages/gatsby-image/src/__tests__/index.js b/packages/gatsby-image/src/__tests__/index.js
@@ -10,12 +10,14 @@ const fixedShapeMock = {
   height: 100,
   src: `test_image.jpg`,
   srcSet: `some srcSet`,
+  srcSetWebp: `some srcSetWebp`,
 }
 
 const fluidShapeMock = {
   aspectRatio: 1.5,
   src: `test_image.jpg`,
   srcSet: `some srcSet`,
+  srcSetWebp: `some srcSetWebp`,
   sizes: `(max-width: 600px) 100vw, 600px`,
 }