As a frequent co-host of Cloudinary’s DevJams podcast with Jen Brissman, I get the chance to see ways developers are innovating their image and video management processes. Our recent episode with John Reilly, an open source software engineer and blogger, is no exception. He shared how he built his blog on Docusaurus, an open-source framework for building websites, and how he integrated it with Cloudinary to optimize its images.
You can watch the full episode on YouTube, Spotify, our own Cloudinary Academy, or wherever you like to watch podcasts.
There are many takeaways and discussions we had with John in this episode, but I wanted to highlight a few. Some of these themes are applicable to developers who are focused on web performance and are constantly enhancing their projects’ user experience. Here are the three biggest takeaways from the episode.
John’s journey of choosing Docusaurus for his blog came from fulfilling a set of criteria he had for his next platform. But one of the biggest reasons he chose it was its ease of use with Markdown.
“I was intentionally not looking. I never planned to do any playing with it at all; my plan was I want to use a thing that would just allow me to write Markdown,” Riley said.
And of course, there are a lot of reasons why John and other developers gravitate toward authoring content in Markdown. It’s a lightweight markup language that uses simple and intuitive syntax. Its design aims to be easily readable even in its raw form. Developers can focus on content creation without being distracted by complex formatting tags.
I personally like Markdown because it is platform-independent. This ensures that if John decides to use a different platform for his blog, his content can be used in various text editors and platforms without compatibility issues. It can be easily converted to HTML, making it versatile for use in different contexts. It’s actually one of the main reasons that our own Cloudinary documentation is all written in Markdown.
In fact, John’s episode wasn’t the first one to mention Markdown and Cloudinary together in the same breath. Brad Garropy, who is a software developer at Atlassian, shared a project he built in a previous DevJams episode. It uses Remark and Rehype to add width and height to Cloudinary-delivered images in Markdown files for resizing and scaling purposes. So, it definitely seems that developers are actively using Markdown and finding ways to incorporate Cloudinary’s features into it. You can check out that episode here.
John pointed out how Open Graph makes it easier for him to share his blog posts or any content on platforms like Facebook and Discord. This protocol allows any web page to become a rich object in a social graph. He noted that the Open Graph tags from his blog posts were associated with the header or hero image he defined, providing an optimized preview on social media platforms.
When asked about the Open Graph protocol, John said, “Open Graph was this mystery to me for the longest time… and obviously, it wasn’t magic; it was something behind it. It turned out to be this thing called the Open Graph protocol.” He further noted, “You’ve got a micro-browser like Slack and things, they can use this to interrogate the site, and they can use it to generate a preview of what’s there so that you don’t actually have to do the immediate work of clicking on something to go there.”
This is becoming a consistent theme in DevJams podcasts, as guests are frequently focused on using Cloudinary for optimizing their Open Graph tags and associated images. As an example, Ryan Filler’s project walkthrough with automating Open Graph and social sharing image creation in Episode #3 has been one of our most popular episodes to date.
To improve his Lighthouse scores and the overall user experience of his blog, John decided to use Cloudinary’s APIs and its Fetch feature. This fetches images and videos from their original source, applies transformations, and then delivers them via content delivery networks used by Cloudinary, such as Fastly. This simplified the optimization process for John, reducing the need for manual adjustments and allowing him to focus more on content creation.
“You can just basically prefix your image URL with Cloudinary… that’s it, you’re done, it works,” said John. “It takes the request off to Cloudinary, and behind the scenes, Cloudinary is going to pick up the image from your site, it’s going to optimize it and serve it.”
John also highlighted the benefit of Cloudinary’s automatic format (f_auto) transformation, which delivers the most optimal image format based on the user’s browser. This feature, along with the automatic quality (q_auto) transformation, further optimized the images on his blog, improving load times and enhancing user experience.
These simple, but powerful, transformations are something that many DevJams guests have highlighted in their projects. Most recently, Grant Sander from Formidable showed how he reduced his company’s website bandwidth by 86% with them alone. You can learn more about that episode and Grant’s project here.
Whether you’re an active Docusaurus user or simply looking for a way to optimize your content, you should check out this DevJams episode. If you enjoyed it, please “Like” it and subscribe to our channel for notifications when we publish future episodes.
And keep the conversations going! You can always reach other active Cloudinary users to ask questions and share your insights in our Community forums, as well as its associated Discord server.
