Skip to content

Commit

Permalink
docs: plugin image / image cdn (#36423)
Browse files Browse the repository at this point in the history
* start adding new Image CDN section to using-gatsby-plugin-image

* Update using-gatsby-plugin-image.md

* Add kb link

* sp
  • Loading branch information
TylerBarnes committed Aug 22, 2022
1 parent 8043d7e commit a21510e
Showing 1 changed file with 13 additions and 9 deletions.
22 changes: 13 additions & 9 deletions docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md
Expand Up @@ -233,11 +233,21 @@ module.exports = {

## Using images from a CMS or CDN

Many source plugins have native support for `gatsby-plugin-image`, with images served directly from a content delivery network (CDN). This means that builds are faster, because there is no need to download images and process them locally. The query syntax varies according to the plugin, as do the supported transformation features and image formats. Make sure you update to the latest version of the source plugin to ensure there is support. For plugins that are not in this list you can use [dynamic images from `gatsby-transformer-sharp`](#dynamic-images).
### Gatsby Cloud Image CDN

### Source plugins
Image CDN is Gatsby Clouds image hosting and transformation service. It speeds up your build times by deferring image downloading and processing until the first user requests an image. Image CDN also speeds up your frontend performance by serving CDN hosted images on the same domain as your Gatsby Cloud site. In our testing this can shave up to 300ms off of frontend page load times and as a result improve your lighthouse scores.

These source plugins support using `gatsby-plugin-image` with images served from their CDN.
For more information on what Image CDN is, how to use it, and what the platform limits are, visit the [Gatsby Cloud knowledge base article on "What Is Image CDN?"](https://support.gatsbyjs.com/hc/en-us/articles/4426379634835-What-is-Image-CDN-). To learn which source plugins currently support it and how to enable and use Image CDN on Gatsby Cloud take a look at the ["How-to Enable Image CDN" article](https://support.gatsbyjs.com/hc/en-us/articles/4426393233171).

For all supported source plugins, the query syntax and feature-set is identical. Check your source plugin's documentation or the [Gatsby Cloud knowledge base article on "Configuring source plugins for Image CDN"](https://support.gatsbyjs.com/hc/en-us/articles/4522338898579-Configuring-Source-Plugins-for-Image-CDN) for more info.

### Source plugins with their own CDN

Many source plugins have native support for `gatsby-plugin-image`, with images served directly from that CMS's content delivery network (CDN). This means that builds are faster than local images because there is no need to download images and process them. While this is faster for builds, it isn't as performant on the frontend as [Gatsby Cloud's Image CDN](#gatsby-cloud-image-cdn) due to images being served from a different domain than the domain your site is hosted on.

The query syntax varies according to the plugin, as do the supported transformation features and image formats. Make sure you update to the latest version of the source plugin to ensure there is support. For plugins that are not in this list you can use [dynamic images from `gatsby-transformer-sharp`](#dynamic-images).

These source plugins support using `gatsby-plugin-image` with images served from their own CDN.

- [AgilityCMS](https://github.com/agility/gatsby-image-agilitycms)
- [Contentful](/plugins/gatsby-source-contentful/#using-the-new-gatsby-image-plugin)
Expand All @@ -247,12 +257,6 @@ These source plugins support using `gatsby-plugin-image` with images served from
- [Sanity](/plugins/gatsby-source-sanity/#using-images)
- [Shopify](https://github.com/gatsbyjs/gatsby-source-shopify-experimental#images)

### Image CDNs

A dedicated image CDN can be used with sources that don't have their own CDN, or where you need more transforms or formats than the CDN offers.

- [imgix](/plugins/@imgix/gatsby/)

### Plugin authors

If you maintain a source plugin or image CDN, there is a toolkit to help you add support for `gatsby-plugin-image`. See [Adding Gatsby Image support to your plugin](/docs/how-to/plugins-and-themes/adding-gatsby-image-support/) for more details. You can then open a PR to add your plugin to this list.
Expand Down

0 comments on commit a21510e

Please sign in to comment.