Co-hosting Cloudinary’s DevJams podcast with Jen Brissman allows me to engage in insightful conversations with developers who are pushing the boundaries of how images and videos can be delivered.
In Episode #20 of the podcast, we spoke with Grant Sander. He’s the Vice President of Engineering for Formidable, a global digital design and development firm with some major companies as clients: PUMA, Starbucks, Walmart, and more. Formidable is also one of Cloudinary’s Solution Partners, which is a group of trusted consultancies and agencies that can help customers to implement Cloudinary’s dynamic image and video management solutions.
Grant and his team accomplished something remarkable for the company’s main website, Formidable.com. They were able to reduce their total bandwidth by about 86%. The truly amazing part was they did it by only applying two Cloudinary transformations: f_auto and q_auto.
This transformation combination allows for all of their images to be served to their visitors’ browsers in the most optimal formats, such as WebP, AVIF, and JPEG XL. In addition, every image is served at its best quality compression level, based on its content and the viewing browser.
In this conversation and code walkthrough with Grant around this project, Jen and I had some major “a-ha” moments about web performance. I thought it would be helpful to summarize these, so you’d be able to benefit from another educational resource about this fabulous project from the Formidable team.
In the episode, Grant highlights the use of various tools and libraries to ease the migration process. One of those was Puppeteer, a Node.js library that provides a high-level API to control Chrome/Chromium over the DevTools Protocol. Puppeteer was particularly effective in automating Chrome instances for testing purposes during the migration, especially when paired with Cloudinary’s Node.js SDK.
Interestingly enough, there have been many use cases for Puppeteer in a Cloudinary-driven project, not exclusively involving migration. Other examples that have come up in DevJams episodes alone include:
- Chris Coyier’s Coding Fonts project, automating screenshot creation of code samples that use different fonts (Episode #2).
- Automating Open Graph and social sharing image creation, thanks to Ryan Filler (Episode #3).
In addition, Grant shows ways to use regular expressions to find and replace image paths in the codebase during the migration process. While regex isn’t necessarily a tool in the same ways that Puppeteer and Cloudinary are, knowing when to use certain languages can also be a major benefit in the project.
I think it’s great how Grant used these techniques for the migration project, which emphasizes the importance of choosing the right tools for specific tasks to save time and effort.
Throughout the episode, Grant highlights the importance of having a media strategy at the beginning of a project. It’s just a fact. Serving original images without optimization can significantly decrease website performance. Because of this, using services like Cloudinary upfront in the development process can help to avoid complex migrations or further development overhauls later on.
“We have case studies that have these beautiful graphics. The average across 30 pages was a little over 86% bandwidth saving, which was quite a bit more than I was expecting. It was a surprising amount,” says Grant.
He further adds, “One of the big things is we’re very eager to recommend services like Cloudinary early, like upfront in the development process so that you can just avoid having to migrate at all because migration comes at a cost.”
As you’re planning to launch a new website, mobile app, or software project, having a media strategy is definitely something to include in the steps.
Of course, don’t miss this DevJams episode, and we always appreciate it when you “Like” and subscribe to our channel.
Also, please read Grant’s blog post on Formidable.com about the project. They also recently published a case study on their work for PUMA, which uses some of the techniques outlined in this episode.
If you have any questions about projects like the one Grant and his team did, you can always reach him and other amazing software engineers in our Community forums, as well as its associated Discord server.
