DEV Community

loading...

The 3 best features announced at GatsbyConf 2021

thomasledoux1 profile image Thomas Ledoux ・2 min read

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}
    />
  )
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (6)

pic
Editor guide
Collapse
doctorderek profile image
Dr. Derek Austin 🥳

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?

Collapse
thomasledoux1 profile image
Thomas Ledoux Author

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!

Collapse
doctorderek profile image
Dr. Derek Austin 🥳

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.

Thread Thread
thomasledoux1 profile image
Thomas Ledoux Author

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 :-)

Thread Thread
doctorderek profile image
Dr. Derek Austin 🥳

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!

Collapse
johnrock profile image
John Rock

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