Image from the 1982 version of the CandyLand board game.
Web performance is one of those topics that simmers on the back burner for some developers; something that, unless well-regulated and occasionally stirred (read: fine-tuned) can easily boil over. It’s a well-worn mantra that for each second of wait time experienced by a user, revenue is lost. Bounce rates, e.g. how quickly a user will leave your site, increases 32% as a page’s load time increases from one second to three seconds [source]. Given today’s attention spans, it’s likely that users’ patience is becoming ever shorter.
Fixing your website’s performance is not a one-time activity. As it grows and changes, performance should always be top of mind for the careful developer. Nor is a slow website repaired by focusing on just one aspect. Slow web speed can be caused by, in general, three elements: heavy design, clunky server infrastructure, or a user's slow internet connection. These factors can be broadly categorized into issues with the website itself (unoptimized code, huge images, video), server performance, and network conditions. Let’s focus on the first of those problems.
Attack of the Mega-Image
The use of giant images is often a culprit in site slow-downs. Even if you’re not a specialist in making your sites blazingly fast, there are a few helpers that can at the very least reduce your image load time to a reasonable level. In this article, I’d like to show how I used a tool developed by Cloudinary to measurably speed up an image-heavy site I built - not that my site will ever generate revenue, but the process became a test of how to balance image quality with site speed.
Consider this site which I built using Astro, with a way to pick flowers and build custom bouquets reflecting the Victorian language of flowers. It looks like this:
Once you choose the flowers you like, Gemini AI is used to create virtual ‘tussie mussies’, a favorite parlor game in the Victorian era, sending coded messages to enemies and admirers alike. In our case, you can send your AI-generated ‘bouquAI’ via an e-card powered by Mailgun. Here’s an example of a generated bouquet:
Pretty? Yes! Useful? Well, not so much. Monetizable? Hardly! And fast? Given that there are 118 high-resolution images in the flower database, which I originally downloaded as Creative-Commons licensed flower images and stored locally, not at all!
The Need for Speed
Can we speed up this site a little simply by using Cloudinary’s image CDN and some optimizations suggested as best practices? As it turns out, there’s a useful tool that we can use to get a baseline, and then progressively optimize. It’s called https://webspeedtest.cloudinary.com/ and is a great way to work through your image optimization challenges.
I first started by analyzing the page speed without any optimizations, and was unpleasantly surprised to discover that the images I used were heavy as heck - while pagination stops the bulk of them from loading all at once, the six plus the logo that show on the home page totaled almost 3 megabytes. Helpfully, the webspeedtest tool offers hints on how to better follow best practices on image load: smart compression, alongside the use of Cloudinary’s CDN, should make a difference!
I uploaded all 100+ flower images used by this site up to Cloudinary’s Assets area, keeping their original names so as to continue to be callable using the .json file in my codebase that retains the image names and the flower’s meaning. Then, focusing on the images loaded into the image cards on the homepage, I changed the image’s url to reflect their new residence in the CDN:
<img :src="`https://res.cloudinary.com/${cloudName}/image/upload/flowers/${flower.image}`"
:alt="flower.name"
class="w-full h-full object-cover"
/>
For those new to this domain, a CDN (Content Delivery Network) is “a geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos.” according to Cloudflare. Assets geographically closer to users are delivered more quickly to their browser.
Then, it was time to try some of Cloudinary’s image transformations to optimize the delivery. Adding an f_auto parameter allows my images to be delivered in the fastest way to a given client. A scorecard offered by the webspeedtest tool shows the potential for speeding up delivery given different image formats:
Following best practices to enable image compression, I then started tweaking the q_auto parameter via the URL to see how I could improve my page score. I found that by using a width setting for my responsive cards and adding q_auto:eco, I was able to compress the images to a reasonable size. By changing the :eco parameter to other options such as :good or :best you can fiddle with the amount of image loss that you can tolerate (the site has to be fast and look good, after all).
<img :src="`https://res.cloudinary.com/${cloudName}/image/upload/w_250/f_auto,q_auto:eco/flowers/${flower.image}`"
:alt="flower.name"
class="w-full h-full object-cover"
/>
I experimented a bit with how the images looked using q_auto (which is the same as q_auto:good) by trying ‘best’ and ‘eco’ settings. There’s a clear tradeoff on image quality and page load times, so use your best judgement on what is an acceptable quality level for your images for your use case. The Cloudinary docs offer a good example of how images look when this parameter changes: https://cloudinary.com/documentation/image_optimization.
By doing this tweak, I managed to get a better score - from C to B:
Mediocre to Good isn’t bad! And I get a 100% score on Lighthouse:
What other things could I do to speed the image load even more? One thing would be to create a more complex responsive design that would deliver only the smallest images to the smallest screens. Another would be to make sure that all images are meticulously cropped and resized. For the time being, however, I’m satisfied with having speeded up my site a bit.
Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!
What are you doing to make your site wicked fast? Let me know in the comments!
About me: I'm the Director of Developer Relations at Cloudinary. Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!