feat(gatsby-plugin-sharp): remove 3x DPi resolutions (#14201)

* Remove images having 3x dimensions of original

* Make tests not include 3x image size checking

* Remove all instances of 3x images and related code

* Remove 3x sizing from gatsby-source-contentful/extend-node-type.js

* Revert changes to gatsby-source-contentful

* Revert changes to examples/using-contentful

* five -> four to reflect one image size being removed

* Update preoptimizing-images.md

* Remove images having 3x dimensions of original

* Make tests not include 3x image size checking

* Remove all instances of 3x images and related code

* Remove 3x sizing from gatsby-source-contentful/extend-node-type.js

* Revert changes to gatsby-source-contentful

* Revert changes to examples/using-contentful

* five -> four to reflect one image size being removed

* Update preoptimizing-images.md

* Update e2e-tests/gatsby-image/cypress/integration/fixed.js

Co-Authored-By: Dustin Schau <[email protected]>

* test: add a negation test for the 3x srcset

Author: thecodingaviator

docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md

@@ -394,7 +394,7 @@ There are far, far, far too many otherwise decently performing websites that loa
 - Responsive, optimized images using a `srcset`
   - A [`picture`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element with a `source srcset` is used
   - This means that using several media queries, you load the smallest image that matches your device (e.g. mobile devices get smaller images, desktop devices get larger images, etc.)
-  - We even generate 2x and 3x DPi images for beautiful images, regardless of the screen quality!
+  - We even generate 2x DPi images for beautiful images, regardless of the screen quality!
 - A base64 blurred image loaded by default
   - This has two wins: 1) Larger images outside the viewport are not requested until they're needed, and 2) The blurred image is in a container with the same dimensions as the real image--therefore, no jumping when the image loads!
   - Also see: [traced SVGs for a super slick alternative](/packages/gatsby-plugin-sharp/#tracedsvg)

docs/docs/preoptimizing-images.md

@@ -4,11 +4,11 @@ title: Preoptimizing your Images
 
 Gatsby ships with excellent image optimization capabilities (see the [Image Tutorial](/tutorial/image-tutorial/) for more info). However, this image optimization can come with a cost. It can be fairly CPU intensive, and in some cases may lead to long build times. As a means of debugging and perhaps improving your overall build performance, it _may_ be helpful to pre-optimize your (extremely large) images.
 
-First, some context. `gatsby-plugin-sharp` ships with a `fluid` option which will attempt to create five images intended to map to various screen resolutions. Producing multiple images ensures that your images are ready and optimized for phone displays, desktop displays, and everything in between. This plugin receives a non-optimized image and produces optimized images for _all_ of your users and devices. Magic!
+First, some context. `gatsby-plugin-sharp` ships with a `fluid` option which will attempt to create four images intended to map to various screen resolutions. Producing multiple images ensures that your images are ready and optimized for phone displays, desktop displays, and everything in between. This plugin receives a non-optimized image and produces optimized images for _all_ of your users and devices. Magic!
 
 If you find yourself running into build performance issues, it could be helpful to consider applying some image optimizations. Images in your setup _could_ be overly large, especially compared to the requested image sizes in your layout (e.g. if your layout has a max width of 600 pixels).
 
-For instance, if your layout is 600 pixels wide, then the highest resolution image you will need is 1800 pixels to account for 3x pixel density. If you have images that are 3000 or 4000 pixels wide then you could resize your image to 1800 pixels, which may improve overall build performance.
+For instance, if your layout is 600 pixels wide, then the highest resolution image you will need is 1200 pixels to account for 2x pixel density. If you have images that are 3000 or 4000 pixels wide then you could resize your image to 1800 pixels, which may improve overall build performance.
 
 Here's an example script to pre-optimize your image dimensions and slightly compress. This optimization may serve as a helpful technique to possibly improve build time if your local repository has many, very large images.
 

e2e-tests/gatsby-image/cypress/integration/fixed.js

@@ -22,18 +22,26 @@ describe(`fixed`, () => {
       })
   })
 
-  // TODO: figure out why these tests are failing
-  it(`applies 1x/2x/3x`, () => {
+  it(`applies 1x/2x`, () => {
     cy.getTestElement(fixedTestId)
       .find(`picture > source`)
       .should(`have.attr`, `srcset`)
       .and(srcset => {
-        ;[`1x`, `2x`, `3x`].forEach(size => {
+        ;[`1x`, `2x`].forEach(size => {
           expect(srcset).contains(size)
         })
       })
   })
 
+  it(`does not apply 3x`, () => {
+    cy.getTestElement(fixedTestId)
+      .find(`picture > source`)
+      .should(`have.attr`, `srcset`)
+      .and(srcset => {
+        expect(srcset).not.contains(`3x`)
+      })
+  })
+
   describe(`picture > img sizing`, () => {
     it(`applies height attribute`, () => {
       cy.getTestElement(fixedTestId)

examples/image-processing/src/pages/index.js

@@ -316,7 +316,7 @@ class Index extends React.Component {
         </p>
         <p>
           Automatically create images for different resolutions — we do 1x,
-          1.5x, 2x, and 3x.
+          1.5x, and 2x.
           {` `}
         </p>
 

packages/gatsby-plugin-sharp/README.md

@@ -60,8 +60,7 @@ plugins: [
 
 ### fixed
 
-Automatically create sizes for different resolutions — we do 1x, 1.5x, 2x, and
-3x.
+Automatically create sizes for different resolutions — we do 1x, 1.5x, and 2x.
 
 #### Parameters
 

packages/gatsby-plugin-sharp/src/index.js

@@ -316,7 +316,6 @@ async function fluid({ file, args = {}, reporter, cache }) {
     fluidSizes.push(options[fixedDimension] / 2)
     fluidSizes.push(options[fixedDimension] * 1.5)
     fluidSizes.push(options[fixedDimension] * 2)
-    fluidSizes.push(options[fixedDimension] * 3)
   } else {
     options.srcSetBreakpoints.forEach(breakpoint => {
       if (breakpoint < 1) {
@@ -436,12 +435,11 @@ async function fixed({ file, args = {}, reporter, cache }) {
   // if no width is passed, we need to resize the image based on the passed height
   const fixedDimension = options.width === undefined ? `height` : `width`
 
-  // Create sizes for different resolutions — we do 1x, 1.5x, 2x, and 3x.
+  // Create sizes for different resolutions — we do 1x, 1.5x, and 2x.
   const sizes = []
   sizes.push(options[fixedDimension])
   sizes.push(options[fixedDimension] * 1.5)
   sizes.push(options[fixedDimension] * 2)
-  sizes.push(options[fixedDimension] * 3)
   const dimensions = getImageSize(file)
 
   const filteredSizes = sizes.filter(size => size <= dimensions[fixedDimension])
@@ -521,9 +519,6 @@ async function fixed({ file, args = {}, reporter, cache }) {
         case 2:
           resolution = `2x`
           break
-        case 3:
-          resolution = `3x`
-          break
         default:
       }
       return `${image.src} ${resolution}`