Dealing with Images from Drupal

One of the benefits of using Gatsby is its built-in support for image optimization. Gatsby makes it easier to use best-practices techniques like blur-up or svg tracing to ensure images don't slow down page loads. Gatsby also provides utilities that allow developers to request an image at a specific size, or set of sizes.

In this tutorial we'll:

  • Install some common Gatsby image-handling plugins and learn about what each one does
  • Write GraphQL queries that use transformer functions to return one or more variations of an image
  • Update our Recipe component to display images using the blur-up pattern

By the end of this tutorial you should know how to display images sourced from Drupal using the blur-up technique with Gatsby.

Sign in with your Osio Labs account
to gain instant access to our entire library.