How to Optimize Your Cloudinary Images Automatically

January 20, 2023

I’ve recently started using Cloudinary for generating Open Graph Images.

When I was trying to optimize the process, I learned about automatically setting file format and quality from Colby Fayock

Just by configuring it properly, I was able to reduce my image file size ~80% which results in less bandwidth consumption and faster image loading.

Here is how to do it.

Just append q_auto and f_auto in your Cloudinary public URL right after .../image/upload/

  • q_auto: Automatic quality selection without compromising the visuals of the image
  • f_auto: It deliver the most optimized format that’s supported by the user’s browser.

For example like this:

https://res.cloudinary.com/ashiknesin/image/upload/q_auto,f_auto/sample.jpg

I’ve even tried it for one of my favourite site that uses Cloudinary and able to see significant difference in file size.

cloudinary optimization lup before after

Happy Optimized Images!


👋 I'm Ashik Nesin • Principal Software Engineer 👨‍💻• I write about web development and share insights into the behind-the-scenes of the projects that I'm building.

© 2023 Nesin Technologies LLP