Yesterday the (virtual) conference for Gatsby started. It's still going on today, with a lot of workshops. If you're interested, go check it out at https://gatsbyconf.com/.
In the talks yesterday a lot of cool new features were announced. I've selected 3 which I found the most interesting.
Gatsby Cloud Hosting
Gatsby cloud already existed for a while now, but yesterday the Gatsby team announced they are adding hosting to their offering. So as easy and fast as it was before to build your website, you can now immediately deploy your Gatsby site through this service too.
They partnered with Fastly for a super fast CDN.
More info: https://www.gatsbyjs.com/products/cloud/hosting/
Gatsby Image Plugin
The Gatsby team has worked on a new image plugin for the past few months, and it shows!
This might be my favourite announcement of the conference.
The new plugin makes your images responsive and fast by default.
Images above the fold are immediately loaded, images below the fold are lazy loaded.
Here are some of the options I like in the plugin:
- Formats: adding more image formats to be served (think AVIF, WEBP..)
- Placeholder: Gatsby can generate a placeholder to show while your images is being lazily loaded. 4 options available: Blurred, Dominant color, Traced SVG or None.
- Aspect ratio: forces an image to the specified aspect ratio, cropped if needed. Example:
aspectRatio={16/9}
- Transform options: grayscale, duotone, rotate, trim, cropFocus, fit.
Example of the code:
import { StaticImage } from "gatsby-plugin-image"
export function Dino() {
return (
<StaticImage
src="../images/dino.png"
alt="A dinosaur"
placeholder="blurred"
layout="fixed"
width={200}
height={200}
/>
)
}
More info can be found here: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image
Gatsby v3.0
Last but not least: a new major version of Gatsby's core!
Some of the biggest takeaways:
- 80% faster develop experience: pages are only being built when request, images only processed when needed.
- Incremental Builds for OSS: this used to be a feature only available for websites being built through Gatsby Cloud. This is no longer the case, you can enjoy incremental builds on any CI/CD service. This means (much) faster building!
- The core dependencies have been updated, fixing a lot of bugs:
- Node 12
- webpack 5
- React 17
- GraphQL 15
- ESLint 7
More info can be found here: https://www.gatsbyjs.com/blog/gatsby-v3/
Thanks for reading!
Top comments (6)
Hey Thomas, nice write-up. Any idea if Gatsby Cloud is going to support Gatsby-plugin-image? Maybe I'm getting my wires crossed thinking about Next.js's "image" component (which requires a serverless function and works without configuration only at Vercel). Does Gatsby-plugin-image just work on any Gatsby installation anywhere, because the images get resized at build time instead of dynamically?
Hey,
AFAIK, the images get resized/optimized at build time so Gatsby Cloud does not have to add extra support for this.
Indeed next/image works differently, since images get optimized at request time there!
Neat, thanks Thomas. I switched from Gatsby to Next specifically for the image optimizations (and they're fantastic), but it locks you in to hosting at Vercel or needing to customize a connection to Cloudinary.
Vercel is great but costs $20/month for any commercial use (vs. free at Netlify), though it seems relatively easy to run out of free image transformations at Cloudinary (25k/monthly).
If you have to pay for Cloudinary ($99/mo for 225k transformations/monthly) then Vercel (unlimited free bandwidth & transformations AFAIK for $20/mo) looks like a much better deal. Of course, there are many other image providers, several of which are pre-loaded by Next.js.
So it's an interesting point that Gatsby avoids this particular issue entirely with their approach. I'm really enjoying the Next.js development experience (as it's so much better than Gatsby 2), but I'll definitely spin up a Gatsby 3 / Gatsby Plugin Image site probably using Gatsby Cloud to try things out.
That's a good point! The cost of hosting/bandwidth is certainly something you need to keep in mind when using the Next.js
But on the other hand, with Gatsby the images get optimised at build time, and your build will possibly take a little extra time when you're transforming a lot of images. Depends on what you find most important I guess :-)
Yeah absolutely, Gatsby vs Next will have a build time tradeoff as well.
I was really impressed by being able to make 20 image sizes dynamically with Next (probably overkill) with basically no performance penalty, whereas I imagine that "laziness" would mean a big build time with Gatsby.
Next has a static / export mode, but currently it excludes their image optimization tool.
Nice chatting with you Thomas!
Thanks for the write up. Missed the talks but looking forward to watching them when they come out.
That gatsby-plugin-image structure looks amazing 😍.