From d24c9beed8c036abbdc9fc603a25325fd51f6fd4 Mon Sep 17 00:00:00 2001 From: Melissa Mcewen Date: Tue, 20 Feb 2018 17:31:26 -0600 Subject: [PATCH 1/9] adding first draft --- docs/docs/optimizing-images.md | 96 ++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 docs/docs/optimizing-images.md diff --git a/docs/docs/optimizing-images.md b/docs/docs/optimizing-images.md new file mode 100644 index 0000000000000..15d69882a4494 --- /dev/null +++ b/docs/docs/optimizing-images.md @@ -0,0 +1,96 @@ +--- +title: Optimizing IMages +--- + +# Optimizing Images + +Gatsby has several tools that are ideal for managing images. These allow you to query your image files and then easily optimize them for the web. + + +The recommend approach is to +* Query your images with GraphQL +* Use Sharp, an image processing library, to transform images +* Use the Gatsby image plugin to optimize for the web + + +## Query Your Images With GraphQL + +GraphGL is how Gatsby recognizes files and allows you to use them on pages. [See the Querying With GrapgQL sectino on images to learn how this works](docs/querying-with-graphql/#images). + +You'll need the `gatsby-source-filesystem` in order to be able to query files like images. + + +`npm install --save gatsby-source-filesystem` + +Once you have this installed you should be able to query the files as shown in the our tutorial on [writing queries](tutorial/part-four/#build-a-page-with-a-graphql-query). + +For example, here I query an image in my images directory. The query can give me some basic info (size, extension) about the image now. + +```jsx +export const query = graphql` + query indexQuery { + { + fileName:file(relativePath: { eq: "images/myimage.jpg"}) + } + } +`; +``` + +So at this point you can grab your images with GraphQL, but we want our queries to also format them. + +## Formatting Images With Sharp + +[Sharp](https://github.com/lovell/sharp) is a high-performance image processing library. The gatsby-transformer-sharp installs everything that's needed to format your images responsively + +`npm install --save gatsby-transformer-sharp` + +and install it in your gatsby-config.js + +```javascript +// In your gatsby-config.js +module.exports = { + plugins: [`gatsby-transformer-sharp`], +}; +``` + +To view all the methods you can use with sharp the [Documentation](/packages/gatsby-plugin-sharp/). + +This also gives you access to special queries called [fragments](/packages/gatsby-image/#fragments) that automatically query a bunch of field's we'll want to use later including width, height, and src. + + +### How to chose the right formatting + +Which methods and fragments you use will depend on what type of responsive image you have. See the [Gatsby Image documentation for more information](/packages/gatsby-image/#two-types-of-responsive-images) . In general for fixed size images use resolution, for images you want to stretch use size. + + +A thing to remember about fragments [is they do not work in Graph_i_QL.](/packages/gatsby-image/#fragments) + + + + +In this case, I want the image to stretch so I use the resolution method with the parameters I want (a width of 400 pixels) and the resolution fragment to grab the right fields +```jsx +export const query = graphql` + query indexQuery { + fileName:file(relativePath: { eq: "images/myimage.jpg" }) { + childImageSharp { + resolutions(width: 400) { + ...GatsbyImageSharpResolutions + } + } + } + } +`; +``` + + +## Formatting Images In React Components With Gatsby Image + +[Gatsby Image](/packages/gatsby-image/) is a plugin that automatically creates React components for the image that are fully responsive and have other high performance features. + + + + +## Using Fragments To Standardize Formatting + + From 194271edfe57aef711544d06c079876449e0e330 Mon Sep 17 00:00:00 2001 From: Melissa Mcewen Date: Tue, 20 Feb 2018 17:37:20 -0600 Subject: [PATCH 2/9] adding info about fragments --- docs/docs/optimizing-images.md | 58 ++++++++++++++++++++++++++++++++-- 1 file changed, 55 insertions(+), 3 deletions(-) diff --git a/docs/docs/optimizing-images.md b/docs/docs/optimizing-images.md index 15d69882a4494..23ea10c207852 100644 --- a/docs/docs/optimizing-images.md +++ b/docs/docs/optimizing-images.md @@ -68,14 +68,14 @@ A thing to remember about fragments [is they do not work in Graph_i_QL.](/packag -In this case, I want the image to stretch so I use the resolution method with the parameters I want (a width of 400 pixels) and the resolution fragment to grab the right fields +In this case, I want the image to stretch so I use the resolution method with the parameters I want (a maxwidth of 400 pixels, max height of 250) and the resolution fragment to grab the right fields ```jsx export const query = graphql` query indexQuery { fileName:file(relativePath: { eq: "images/myimage.jpg" }) { childImageSharp { - resolutions(width: 400) { - ...GatsbyImageSharpResolutions + sizes(maxWidth: 400, maxHeight: 250) { + ...GatsbyImageSharpSizes } } } @@ -89,8 +89,60 @@ export const query = graphql` [Gatsby Image](/packages/gatsby-image/) is a plugin that automatically creates React components for the image that are fully responsive and have other high performance features. +`npm install --save gatsby-image` + +Now I can import it at the top of my page component + +``` +import Img from 'gatsby-image' + +``` + +And start using this component with my queried image as a prop + +``` + +``` ## Using Fragments To Standardize Formatting +What if you have a bunch of images and you want them all to us the same formatting? Like a gallery of square images. It's annoying to have to write the queries over and over again. + +You can make your own fragment, like + +``` +export const squareImage = graphql` +fragment squareImage on File { + childImageSharp { + sizes(maxWidth: 200, maxHeight: 200) { + ...GatsbyImageSharpSizes + } + } +} +`; +``` + +Then my query can use the fragment + +``` + +export const query = graphql` + query imageGallery { + image1:file(relativePath: { eq: "images/image1.jpg" }) { + ...squareImage + } + + image2:file(relativePath: { eq: "images/image2.jpg" }) { + ...squareImage + } + + image3:file(relativePath: { eq: "images/image3.jpg" }) { + ...squareImage + } + } +`; + +``` + From 8ba740de44ade86952f157e8b51bfd8a67073cba Mon Sep 17 00:00:00 2001 From: Melissa Mcewen Date: Wed, 21 Feb 2018 20:16:53 -0600 Subject: [PATCH 3/9] cleaning up language --- docs/docs/optimizing-images.md | 84 ++++++++++++---------------------- 1 file changed, 28 insertions(+), 56 deletions(-) diff --git a/docs/docs/optimizing-images.md b/docs/docs/optimizing-images.md index 23ea10c207852..2c7f5bd369bce 100644 --- a/docs/docs/optimizing-images.md +++ b/docs/docs/optimizing-images.md @@ -1,74 +1,52 @@ --- -title: Optimizing IMages +title: Working With Images In Gatsby --- -# Optimizing Images +# Working With Images In Gatsby -Gatsby has several tools that are ideal for managing images. These allow you to query your image files and then easily optimize them for the web. +Gatsby has several useful [plugins](/docs/plugins/) that work together for adding and optimizing images for [page components](/docs/building-with-components/#page-components) The recommend approach is to -* Query your images with GraphQL -* Use Sharp, an image processing library, to transform images -* Use the Gatsby image plugin to optimize for the web +* GraphQL to query image files +* Sharp, an image processing library, to transform images +* The Gat -## Query Your Images With GraphQL +## Access Your Images With GraphQL -GraphGL is how Gatsby recognizes files and allows you to use them on pages. [See the Querying With GrapgQL sectino on images to learn how this works](docs/querying-with-graphql/#images). - -You'll need the `gatsby-source-filesystem` in order to be able to query files like images. - - -`npm install --save gatsby-source-filesystem` +[GraphQL can access image files](docs/querying-with-graphql/#images) with the [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) plugin. Once you have this installed you should be able to query the files as shown in the our tutorial on [writing queries](tutorial/part-four/#build-a-page-with-a-graphql-query). -For example, here I query an image in my images directory. The query can give me some basic info (size, extension) about the image now. - -```jsx -export const query = graphql` - query indexQuery { - { - fileName:file(relativePath: { eq: "images/myimage.jpg"}) - } - } -`; -``` -So at this point you can grab your images with GraphQL, but we want our queries to also format them. ## Formatting Images With Sharp -[Sharp](https://github.com/lovell/sharp) is a high-performance image processing library. The gatsby-transformer-sharp installs everything that's needed to format your images responsively +[Sharp](https://github.com/lovell/sharp) is a high-performance image processing library. The [`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/) and [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp) plugins allow GraphQL queries to not only query images, but transform them. -`npm install --save gatsby-transformer-sharp` -and install it in your gatsby-config.js - -```javascript -// In your gatsby-config.js -module.exports = { - plugins: [`gatsby-transformer-sharp`], -}; -``` - -To view all the methods you can use with sharp the [Documentation](/packages/gatsby-plugin-sharp/). +Common transformations include `size` and `resolution` which are key for optimizing images. See [tocumentation for `gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/) to view all the transformation methods you can use. This also gives you access to special queries called [fragments](/packages/gatsby-image/#fragments) that automatically query a bunch of field's we'll want to use later including width, height, and src. +## Optimizing Images With Gatsby Image -### How to chose the right formatting - -Which methods and fragments you use will depend on what type of responsive image you have. See the [Gatsby Image documentation for more information](/packages/gatsby-image/#two-types-of-responsive-images) . In general for fixed size images use resolution, for images you want to stretch use size. - +[`gatsby-image`](/packages/gatsby-image/) is a plugin that automatically creates React components for optimized images that: -A thing to remember about fragments [is they do not work in Graph_i_QL.](/packages/gatsby-image/#fragments) +> * Loads the optimal size of image for each device size and screen resolution +> * Holds the image position while loading so your page doesn't jump around as images load +> * Uses the "blur-up" effect i.e. it loads a tiny version of the image to show while the full image is loading +> * Alternatively provides a "traced placeholder" SVG of the image. +> * Lazy loads images which reduces bandwidth and speeds the initial load time +> * Uses [WebP](https://developers.google.com/speed/webp/) images if browser supports the format +### Chosing The Right Approach +Which methods and fragments you use will depend on what type of responsive image you have. See the [Gatsby Image documentation for more information](/packages/gatsby-image/#two-types-of-responsive-images) . In general for fixed size images use resolution, for images you want to stretch use size. -In this case, I want the image to stretch so I use the resolution method with the parameters I want (a maxwidth of 400 pixels, max height of 250) and the resolution fragment to grab the right fields +This example is for an image gallery where images stretch when the page is resized. It uses the `sizes` method and the size fragment to grab the right props to use in `gatsby-image` components ```jsx export const query = graphql` query indexQuery { @@ -83,33 +61,27 @@ export const query = graphql` `; ``` +Like all graphql queries, it can be placed in bottom of the the page component file. -## Formatting Images In React Components With Gatsby Image - -[Gatsby Image](/packages/gatsby-image/) is a plugin that automatically creates React components for the image that are fully responsive and have other high performance features. - - -`npm install --save gatsby-image` - -Now I can import it at the top of my page component +Then import the base Img component from `gatsby-image` ``` import Img from 'gatsby-image' ``` -And start using this component with my queried image as a prop +And start using this component with the queried image as prop ``` - + ``` ## Using Fragments To Standardize Formatting -What if you have a bunch of images and you want them all to us the same formatting? Like a gallery of square images. It's annoying to have to write the queries over and over again. +What if you have a bunch of images and you want them all to us the same formatting? For a gallery and many other instances it is useful to have all images formatted the same. -You can make your own fragment, like +A custom fragment is an easy way to standardize formatting and re-use it on multiple images. ``` export const squareImage = graphql` @@ -123,7 +95,7 @@ fragment squareImage on File { `; ``` -Then my query can use the fragment +The fragment can then be referenced in the image query ``` From e39d7c821a85c63e2341ef5df2ee834d3613b692 Mon Sep 17 00:00:00 2001 From: Melissa Mcewen Date: Thu, 22 Feb 2018 12:23:16 -0600 Subject: [PATCH 4/9] renaming file, this commit is for issue #3380 --- docs/docs/{optimizing-images.md => working-with-images.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/docs/{optimizing-images.md => working-with-images.md} (100%) diff --git a/docs/docs/optimizing-images.md b/docs/docs/working-with-images.md similarity index 100% rename from docs/docs/optimizing-images.md rename to docs/docs/working-with-images.md From 80ec33e2274160d0afc0c2e33dff08788a1afa3f Mon Sep 17 00:00:00 2001 From: Melissa Mcewen Date: Thu, 5 Apr 2018 23:12:27 -0500 Subject: [PATCH 5/9] technical edits on working with images in gatsby --- docs/docs/working-with-images.md | 65 +++++++++++--------------------- 1 file changed, 23 insertions(+), 42 deletions(-) diff --git a/docs/docs/working-with-images.md b/docs/docs/working-with-images.md index 2c7f5bd369bce..8c3c679d3feb5 100644 --- a/docs/docs/working-with-images.md +++ b/docs/docs/working-with-images.md @@ -4,49 +4,26 @@ title: Working With Images In Gatsby # Working With Images In Gatsby -Gatsby has several useful [plugins](/docs/plugins/) that work together for adding and optimizing images for [page components](/docs/building-with-components/#page-components) +Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and resolutions of each image. Luckily Gatsby has several useful [plugins](/docs/plugins/) that work together to do just that for images on [page components](/docs/building-with-components/#page-components) -The recommend approach is to -* GraphQL to query image files -* Sharp, an image processing library, to transform images -* The Gat +The recommend approach is to use [GraphQL queries](/docs/querying-with-graphql/) to get images of the optimal size or resolution. Then display them with the [`gatsby-image`](/packages/gatsby-image/) component. -## Access Your Images With GraphQL +## Query Images With GraphQL -[GraphQL can access image files](docs/querying-with-graphql/#images) with the [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) plugin. +Querying images with GraphQL allows you to access the image's data as well as perform transformations with [Sharp](https://github.com/lovell/sharp), a high-performance image processing library. -Once you have this installed you should be able to query the files as shown in the our tutorial on [writing queries](tutorial/part-four/#build-a-page-with-a-graphql-query). +You'll need a few plugins for this: +* [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) plugin allows you to [query files with GraphQL](docs/querying-with-graphql/#images) +* [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp) powers the connections between Sharp and Gatsby Plugins +* [`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/) allows you to create multiples images of the right sizes and resolutions with a query +If the final image is of a fixed size, optimization relies on having multiple resolutions of the image. If it is responsive, that is it stretches to fill a container or page, optimization relies on having different sizes of the same image. See the [Gatsby Image documentation for more information](/packages/gatsby-image/#two-types-of-responsive-images). +You can also use arguments in your query to specific exact, minimum, maximum dimensions. See the [Gatsby Image documentation for complete options](/packages/gatsby-image/#two-types-of-responsive-images). -## Formatting Images With Sharp - -[Sharp](https://github.com/lovell/sharp) is a high-performance image processing library. The [`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/) and [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp) plugins allow GraphQL queries to not only query images, but transform them. - - -Common transformations include `size` and `resolution` which are key for optimizing images. See [tocumentation for `gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/) to view all the transformation methods you can use. - -This also gives you access to special queries called [fragments](/packages/gatsby-image/#fragments) that automatically query a bunch of field's we'll want to use later including width, height, and src. - -## Optimizing Images With Gatsby Image - -[`gatsby-image`](/packages/gatsby-image/) is a plugin that automatically creates React components for optimized images that: - - -> * Loads the optimal size of image for each device size and screen resolution -> * Holds the image position while loading so your page doesn't jump around as images load -> * Uses the "blur-up" effect i.e. it loads a tiny version of the image to show while the full image is loading -> * Alternatively provides a "traced placeholder" SVG of the image. -> * Lazy loads images which reduces bandwidth and speeds the initial load time -> * Uses [WebP](https://developers.google.com/speed/webp/) images if browser supports the format - -### Chosing The Right Approach - -Which methods and fragments you use will depend on what type of responsive image you have. See the [Gatsby Image documentation for more information](/packages/gatsby-image/#two-types-of-responsive-images) . In general for fixed size images use resolution, for images you want to stretch use size. - -This example is for an image gallery where images stretch when the page is resized. It uses the `sizes` method and the size fragment to grab the right props to use in `gatsby-image` components +This example is for an image gallery where images stretch when the page is resized. It uses the `sizes` method and the size fragment to grab the right data to use in `gatsby-image` component and arguments to set the maximum width as 400px and maximum height as 250px. ```jsx export const query = graphql` query indexQuery { @@ -59,18 +36,22 @@ export const query = graphql` } } `; -``` -Like all graphql queries, it can be placed in bottom of the the page component file. -Then import the base Img component from `gatsby-image` +## Optimizing Images With Gatsby Image -``` -import Img from 'gatsby-image' +[`gatsby-image`](/packages/gatsby-image/) is a plugin that automatically creates React components for optimized images that: + + +> * Loads the optimal size of image for each device size and screen resolution +> * Holds the image position while loading so your page doesn't jump around as images load +> * Uses the "blur-up" effect i.e. it loads a tiny version of the image to show while the full image is loading +> * Alternatively provides a "traced placeholder" SVG of the image. +> * Lazy loads images which reduces bandwidth and speeds the initial load time +> * Uses [WebP](https://developers.google.com/speed/webp/) images if browser supports the format -``` -And start using this component with the queried image as prop +Here is an image component that uses the query from the previous example ``` @@ -79,7 +60,7 @@ And start using this component with the queried image as prop ## Using Fragments To Standardize Formatting -What if you have a bunch of images and you want them all to us the same formatting? For a gallery and many other instances it is useful to have all images formatted the same. +What if you have a bunch of images and you want them all to us the same formatting? A custom fragment is an easy way to standardize formatting and re-use it on multiple images. From f3ae0107c1cc1bf7af43a88047e50e5fdf50714d Mon Sep 17 00:00:00 2001 From: Melissa Mcewen Date: Thu, 5 Apr 2018 23:12:27 -0500 Subject: [PATCH 6/9] technical edits on working with images in gatsby --- docs/docs/working-with-images.md | 63 +++++++++++--------------------- 1 file changed, 22 insertions(+), 41 deletions(-) diff --git a/docs/docs/working-with-images.md b/docs/docs/working-with-images.md index 2c7f5bd369bce..6ac6db8044d21 100644 --- a/docs/docs/working-with-images.md +++ b/docs/docs/working-with-images.md @@ -4,49 +4,26 @@ title: Working With Images In Gatsby # Working With Images In Gatsby -Gatsby has several useful [plugins](/docs/plugins/) that work together for adding and optimizing images for [page components](/docs/building-with-components/#page-components) +Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and resolutions of each image. Luckily Gatsby has several useful [plugins](/docs/plugins/) that work together to do just that for images on [page components](/docs/building-with-components/#page-components) -The recommend approach is to -* GraphQL to query image files -* Sharp, an image processing library, to transform images -* The Gat +The recommend approach is to use [GraphQL queries](/docs/querying-with-graphql/) to get images of the optimal size or resolution. Then display them with the [`gatsby-image`](/packages/gatsby-image/) component. -## Access Your Images With GraphQL +## Query Images With GraphQL -[GraphQL can access image files](docs/querying-with-graphql/#images) with the [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) plugin. +Querying images with GraphQL allows you to access the image's data as well as perform transformations with [Sharp](https://github.com/lovell/sharp), a high-performance image processing library. -Once you have this installed you should be able to query the files as shown in the our tutorial on [writing queries](tutorial/part-four/#build-a-page-with-a-graphql-query). +You'll need a few plugins for this: +* [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) plugin allows you to [query files with GraphQL](docs/querying-with-graphql/#images) +* [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp) powers the connections between Sharp and Gatsby Plugins +* [`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/) allows you to create multiples images of the right sizes and resolutions with a query +If the final image is of a fixed size, optimization relies on having multiple resolutions of the image. If it is responsive, that is it stretches to fill a container or page, optimization relies on having different sizes of the same image. See the [Gatsby Image documentation for more information](/packages/gatsby-image/#two-types-of-responsive-images). +You can also use arguments in your query to specific exact, minimum, maximum dimensions. See the [Gatsby Image documentation for complete options](/packages/gatsby-image/#two-types-of-responsive-images). -## Formatting Images With Sharp - -[Sharp](https://github.com/lovell/sharp) is a high-performance image processing library. The [`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/) and [`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp) plugins allow GraphQL queries to not only query images, but transform them. - - -Common transformations include `size` and `resolution` which are key for optimizing images. See [tocumentation for `gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/) to view all the transformation methods you can use. - -This also gives you access to special queries called [fragments](/packages/gatsby-image/#fragments) that automatically query a bunch of field's we'll want to use later including width, height, and src. - -## Optimizing Images With Gatsby Image - -[`gatsby-image`](/packages/gatsby-image/) is a plugin that automatically creates React components for optimized images that: - - -> * Loads the optimal size of image for each device size and screen resolution -> * Holds the image position while loading so your page doesn't jump around as images load -> * Uses the "blur-up" effect i.e. it loads a tiny version of the image to show while the full image is loading -> * Alternatively provides a "traced placeholder" SVG of the image. -> * Lazy loads images which reduces bandwidth and speeds the initial load time -> * Uses [WebP](https://developers.google.com/speed/webp/) images if browser supports the format - -### Chosing The Right Approach - -Which methods and fragments you use will depend on what type of responsive image you have. See the [Gatsby Image documentation for more information](/packages/gatsby-image/#two-types-of-responsive-images) . In general for fixed size images use resolution, for images you want to stretch use size. - -This example is for an image gallery where images stretch when the page is resized. It uses the `sizes` method and the size fragment to grab the right props to use in `gatsby-image` components +This example is for an image gallery where images stretch when the page is resized. It uses the `sizes` method and the size fragment to grab the right data to use in `gatsby-image` component and arguments to set the maximum width as 400px and maximum height as 250px. ```jsx export const query = graphql` query indexQuery { @@ -61,16 +38,20 @@ export const query = graphql` `; ``` -Like all graphql queries, it can be placed in bottom of the the page component file. +## Optimizing Images With Gatsby Image -Then import the base Img component from `gatsby-image` +[`gatsby-image`](/packages/gatsby-image/) is a plugin that automatically creates React components for optimized images that: -``` -import Img from 'gatsby-image' -``` +> * Loads the optimal size of image for each device size and screen resolution +> * Holds the image position while loading so your page doesn't jump around as images load +> * Uses the "blur-up" effect i.e. it loads a tiny version of the image to show while the full image is loading +> * Alternatively provides a "traced placeholder" SVG of the image. +> * Lazy loads images which reduces bandwidth and speeds the initial load time +> * Uses [WebP](https://developers.google.com/speed/webp/) images if browser supports the format + -And start using this component with the queried image as prop +Here is an image component that uses the query from the previous example ``` @@ -79,7 +60,7 @@ And start using this component with the queried image as prop ## Using Fragments To Standardize Formatting -What if you have a bunch of images and you want them all to us the same formatting? For a gallery and many other instances it is useful to have all images formatted the same. +What if you have a bunch of images and you want them all to us the same formatting? A custom fragment is an easy way to standardize formatting and re-use it on multiple images. From c37f351f44ed5644c60637a8eb0b3532c47e083e Mon Sep 17 00:00:00 2001 From: shannonbux <32467162+shannonbux@users.noreply.github.com> Date: Tue, 8 May 2018 11:45:15 -0700 Subject: [PATCH 7/9] punctuation and verb tense edits --- docs/docs/working-with-images.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/docs/working-with-images.md b/docs/docs/working-with-images.md index 6ac6db8044d21..64c27d13069a6 100644 --- a/docs/docs/working-with-images.md +++ b/docs/docs/working-with-images.md @@ -4,10 +4,10 @@ title: Working With Images In Gatsby # Working With Images In Gatsby -Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and resolutions of each image. Luckily Gatsby has several useful [plugins](/docs/plugins/) that work together to do just that for images on [page components](/docs/building-with-components/#page-components) +Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and resolutions of each image. Luckily, Gatsby has several useful [plugins](/docs/plugins/) that work together to do that for images on [page components](/docs/building-with-components/#page-components). -The recommend approach is to use [GraphQL queries](/docs/querying-with-graphql/) to get images of the optimal size or resolution. Then display them with the [`gatsby-image`](/packages/gatsby-image/) component. +The recommended approach is to use [GraphQL queries](/docs/querying-with-graphql/) to get images of the optimal size or resolution. Then, display them with the [`gatsby-image`](/packages/gatsby-image/) component. ## Query Images With GraphQL @@ -46,12 +46,12 @@ export const query = graphql` > * Loads the optimal size of image for each device size and screen resolution > * Holds the image position while loading so your page doesn't jump around as images load > * Uses the "blur-up" effect i.e. it loads a tiny version of the image to show while the full image is loading -> * Alternatively provides a "traced placeholder" SVG of the image. +> * Alternatively provides a "traced placeholder" SVG of the image > * Lazy loads images which reduces bandwidth and speeds the initial load time > * Uses [WebP](https://developers.google.com/speed/webp/) images if browser supports the format -Here is an image component that uses the query from the previous example +Here is an image component that uses the query from the previous example: ``` @@ -60,9 +60,9 @@ Here is an image component that uses the query from the previous example ## Using Fragments To Standardize Formatting -What if you have a bunch of images and you want them all to us the same formatting? +What if you have a bunch of images and you want them all to use the same formatting? -A custom fragment is an easy way to standardize formatting and re-use it on multiple images. +A custom fragment is an easy way to standardize formatting and re-use it on multiple images: ``` export const squareImage = graphql` @@ -76,7 +76,7 @@ fragment squareImage on File { `; ``` -The fragment can then be referenced in the image query +The fragment can then be referenced in the image query: ``` From df0161ac1539e6f51732dc336c7f952d00214622 Mon Sep 17 00:00:00 2001 From: shannonbux <32467162+shannonbux@users.noreply.github.com> Date: Tue, 8 May 2018 11:46:46 -0700 Subject: [PATCH 8/9] more punctuation and grammar --- docs/docs/working-with-images.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/working-with-images.md b/docs/docs/working-with-images.md index 64c27d13069a6..96f5c9b33657c 100644 --- a/docs/docs/working-with-images.md +++ b/docs/docs/working-with-images.md @@ -7,7 +7,7 @@ title: Working With Images In Gatsby Optimizing images is a challenge on any website. To utilize best practices for performance across devices, you need multiple sizes and resolutions of each image. Luckily, Gatsby has several useful [plugins](/docs/plugins/) that work together to do that for images on [page components](/docs/building-with-components/#page-components). -The recommended approach is to use [GraphQL queries](/docs/querying-with-graphql/) to get images of the optimal size or resolution. Then, display them with the [`gatsby-image`](/packages/gatsby-image/) component. +The recommended approach is to use [GraphQL queries](/docs/querying-with-graphql/) to get images of the optimal size or resolution, then, display them with the [`gatsby-image`](/packages/gatsby-image/) component. ## Query Images With GraphQL @@ -21,7 +21,7 @@ You'll need a few plugins for this: If the final image is of a fixed size, optimization relies on having multiple resolutions of the image. If it is responsive, that is it stretches to fill a container or page, optimization relies on having different sizes of the same image. See the [Gatsby Image documentation for more information](/packages/gatsby-image/#two-types-of-responsive-images). -You can also use arguments in your query to specific exact, minimum, maximum dimensions. See the [Gatsby Image documentation for complete options](/packages/gatsby-image/#two-types-of-responsive-images). +You can also use arguments in your query to specify exact, minimum, and maximum dimensions. See the [Gatsby Image documentation for complete options](/packages/gatsby-image/#two-types-of-responsive-images). This example is for an image gallery where images stretch when the page is resized. It uses the `sizes` method and the size fragment to grab the right data to use in `gatsby-image` component and arguments to set the maximum width as 400px and maximum height as 250px. ```jsx From b74a4d1d3e0161895ec764f5dd568df89e5c747d Mon Sep 17 00:00:00 2001 From: shannonbux <32467162+shannonbux@users.noreply.github.com> Date: Tue, 8 May 2018 11:47:46 -0700 Subject: [PATCH 9/9] commas --- docs/docs/working-with-images.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/working-with-images.md b/docs/docs/working-with-images.md index 96f5c9b33657c..0c76a61c9301d 100644 --- a/docs/docs/working-with-images.md +++ b/docs/docs/working-with-images.md @@ -47,8 +47,8 @@ export const query = graphql` > * Holds the image position while loading so your page doesn't jump around as images load > * Uses the "blur-up" effect i.e. it loads a tiny version of the image to show while the full image is loading > * Alternatively provides a "traced placeholder" SVG of the image -> * Lazy loads images which reduces bandwidth and speeds the initial load time -> * Uses [WebP](https://developers.google.com/speed/webp/) images if browser supports the format +> * Lazy loads images, which reduces bandwidth and speeds the initial load time +> * Uses [WebP](https://developers.google.com/speed/webp/) images, if browser supports the format Here is an image component that uses the query from the previous example: