diff --git a/docs/docs/working-with-images.md b/docs/docs/working-with-images.md index 0c76a61c9301d..28d94522e08e5 100644 --- a/docs/docs/working-with-images.md +++ b/docs/docs/working-with-images.md @@ -2,12 +2,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 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 @@ -23,7 +21,7 @@ If the final image is of a fixed size, optimization relies on having multiple re 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. +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 { diff --git a/www/src/pages/docs/doc-links.yaml b/www/src/pages/docs/doc-links.yaml index 219bfde934c33..d94c8c26b8473 100644 --- a/www/src/pages/docs/doc-links.yaml +++ b/www/src/pages/docs/doc-links.yaml @@ -76,6 +76,8 @@ link: /docs/adding-a-list-of-markdown-blog-posts/ - title: Adding Tags and Categories to Blog Posts link: /docs/adding-tags-and-categories-to-blog-posts/ + - title: Working With Images in Gatsby + link: /docs/working-with-images/ - title: Creating Dynamically-Rendered Navigation* link: /docs/creating-dynamically-rendered-navigation/ - title: Dropping Images into Static Folders*