Cloudinary Blog

Introducing Cloudinary’s Gatsby Plugins

Announcing two new Gatsby plugins from Cloudinary

Wouldn’t it be cool to have the powers of Gatsby rendering performant pages and serving optimized and transformed media files from Cloudinary on the same site? That’s now a reality: I’m excited to introduce two Gatsby plugins on Cloudinary: Gatsby-Source-Cloudinary and Gatsby-Transformer-Cloudinary.

Here’s the background. Given that the rise of JAMstack has empowered engineers to efficiently build fast, scalable, secure, and easily-deployed apps, Gatsby further enables the development of websites with the React and JAMstack architecture. To do that, Gatsby simply takes data from multiple data sources and builds interactive webpages, which you can, in turn, deploy to content delivery networks (CDNs) as static HTML, CSS, and JavaScript files.

Because concurrent media delivery is parament for delivering performant web pages, you can accomplish that with the Gatsby plugins by storing media assets in a CDN and optimally serving them with on-the-fly transformations. The plugins bring you the best of both worlds: optimized media delivery along with high-performing web and mobile apps.

Webinar
How to Optimize for Page Load Speed

Gatsby-Source-Cloudinary

Gatsby-Source-Cloudinary is a source plugin that fetches stored images at build time from Cloudinary to a Gatsby-powered site. The plugin creates in GraphQL file nodes that you can query on your app. That means your images need not live locally on your project anymore and are served optimally from Cloudinary.

Gatsby-Transformer-Cloudinary

The Gatsby-Transformer-Cloudinary plugin uploads your locally-stored images to Cloudinary, returns their data, and transforms those images into file nodes in Gatsby, rendering their formats compatible and usable with gatsby-image. You can then apply Cloudinary transformations within GraphQL queries, which return the transformed images on build.

Steps for Getting Started

To start using Cloudinary’s two Gatsby plugins, follow these steps:

  1. Create a free account on Cloudinary.
  2. Create a Gatsby project with one of the Gatsby starters.
  3. Configure either of the Gatsby plugins in gatsby-config.js.
  4. Refer to the documentation for the source plugin and the transformer plugin for the procedures on how to query Cloudinary images and to upload and transform uploaded images, respectively.

The Next Horizon

Cloudinary’s Gatsby plugins were built and maintained by the community. Watch this Learn With Jason video for details on how to build the transformer plugin.

We’ll continue to work on improving the development experience for building apps with the Gatsby plugins through bug fixes and the creation of new features that ship on Gatsby or Cloudinary. If you spot a bug, do send us a pull request or open an issue. In particular, watch this space for a series of blog posts on use cases that will demonstrate how to leverage the two Gatsby plugins for your app.

Recent Blog Posts

The Pros and Cons of AVIF for Websites

AVIF is a 2019 spinoff from the AV1 video format developed by the Alliance for Open Media (AOM), whose members include Amazon, Apple, ARM, Facebook, Google, Huawei, Mozilla, Microsoft, Netflix, and Intel. As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP, and is on par with the brand-new JPEG-XL format, which does not work on any browser yet.

Read more
Get Your Media Moving Faster with Cloudinary’s Media Optimizer

So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...

Read more
How to Tap Into the Value of User-Generated Content (UGC)

User-generated content (UGC) took off with, first of all, the advent of the internet and, subsequently, social networks. Everyday consumers were given keys to the kingdom, so to speak, so that they, too, could compose and post content, simultaneously engaging with others online. Twitter, Facebook, Instagram, Snapchat, TikTok—the networks through which we can create and publish content have grown exponentially, and brands are becoming aware of the benefits of tapping into the gold mines offered by those networks.

Read more
Identifying Countries by IP Address in Columnar Databases Through SQL

Cloudinary reaps a myriad of open web traffic, from ad networks to e-commerce sites. Our Data Science team is dedicated to analyzing the data for use internally and externally.

A glance at any General Data Protection Regulation (GDPR) article would reveal that—unlike Android device IDs (AID), through which users can reset their web address—keeping user identifiers, such as Internal Protocol (IP) and Media Access Control (MAC) addresses, as well as International Mobile Equipment Identity (IMEI), violates privacy. As a solution, you can discard all privacy identifications or make them visible to users for reset.

Read more
Digital-First Asset Management Explained

As the world changes, so does technology. I don’t need to name more than a handful of antiquated technologies before you nod in agreement: floppy disks, Walkmans, phone booths, VHS tapes, each of which have been phased out or rendered useless by new solutions that meet the same need but much more effectively.

Read more