Skip to content

Commit c9da390

Browse files
authored
Merge branch 'master' into fix-spelling
2 parents f74b1fa + a21510e commit c9da390

File tree

1 file changed

+13
-9
lines changed

1 file changed

+13
-9
lines changed

docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md

+13-9
Original file line numberDiff line numberDiff line change
@@ -233,11 +233,21 @@ module.exports = {
233233

234234
## Using images from a CMS or CDN
235235

236-
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).
236+
### Gatsby Cloud Image CDN
237237

238-
### Source plugins
238+
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.
239239

240-
These source plugins support using `gatsby-plugin-image` with images served from their CDN.
240+
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).
241+
242+
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.
243+
244+
### Source plugins with their own CDN
245+
246+
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.
247+
248+
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).
249+
250+
These source plugins support using `gatsby-plugin-image` with images served from their own CDN.
241251

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

250-
### Image CDNs
251-
252-
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.
253-
254-
- [imgix](/plugins/@imgix/gatsby/)
255-
256260
### Plugin authors
257261

258262
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.

0 commit comments

Comments
 (0)