The hottest launch at GatsbyConf last week was the Image CDN, which is great news for large Gatsby sites or those with lots of images. The feature – available now in beta – can dramatically cut build times and is available to use on Netlify today.
One of our favorite things about Gatsby is its best-in-class image support. As developers, we love how easy it is to add responsive, optimized images to sites in all modern formats, and our users love how fast these images load, even on slow networks. The downside to this has been build times, with image processing usually being the slowest part of any Gatsby site build. The new image CDN feature solves this by skipping image processing during the build, and instead deferring and offloading it to a dedicated image CDN. Visitors still get images in the most optimized formats such as AVIF and WebP, but site builds complete in a fraction of the time. We love this model, which is becoming the most popular approach in web frameworks in 2022. Gatsby’s implementation is great, and we’re happy to have first-class support on Netlify.
Using Gatsby Image CDN on Netlify
Gatsby Image CDN is available for users on all Netlify plans today. Just like Gatsby DSG pages, the Gatsby Image CDN is implemented using Netlify On-Demand Builders, meaning that the image is processed when it is first loaded and then persisted for future requests. The image is processed for the first visitor (which is probably you!) and then everybody else will have the optimized image served from the edge cache with no need for further resizing.
The Gatsby Image CDN is currently in beta, so we haven’t enabled it by default. See the image CDN docs for how to enable it in Netlify. At time of writing it supports WordPress and Contentful, but the Gatsby team has promised to quickly bring support to other sources over the next few weeks, and these will be available on Netlify as soon as they launch.
We’re excited Netlify has been the top choice for hosting Gatsby since the start, and we’re committed to supporting all new features on day one. This is one reason that more Gatsby sites are hosted on Netlify than anywhere else. See how to enable the Gatsby Image CDN on Netlify today.
If you want to see it in action with some cute dogs, see this demo. To try it out on WordPress, you can deploy this template to Netlify.
(Clicking this button will clone a WordPress Gatsby blog boilerplate to your Git provider of choice, and deploy it instantly to Netlify)
Matt Kane is principal engineer on the frameworks integration team at Netlify, building first-class support for every web framework. He previously worked at Gatsby, where he helped build the Gatsby Image plugin.
