This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

Improving image generation time

Bjorn Harvold

October 15, 2017 11:44

Hi Team Cloudinary!

Hope you are all doing well today.

I have a map implementation where I dynamically generate map markers using Cloudinary. I'm happy with the implementation as we can do some amazing things with your API.

Now we are starting to move to performance optimization and we are going through the entire app to see where we can shave off a few seconds here and there. The markers themselves are pretty heavy themselves in terms of CPU. We are implementing as much caching as we can on that end. To actually generate and display each marker using Cloudinary takes about 700 milliseconds in our dev environment. I have a screenshot of load times but can't add it to the ticket here. You can see what I am talking about in our live environment if you go to www.traveliko.com and search for 'Bangkok'.

So I am wondering what we can do to speed this up a bit? When the marker first is generated with the custom text overlay, I understand that it can take some time. But the second time around, it should be a lot faster. Our frontend assets are all loading through Cloudflare and we use their rate optimizer service as well to reduce the number of hops to our customers.

Let me know your thoughts. We are just getting started on boarding hotels and when this map starts to be filled with hotels, we need to be ready.

Cheers,

Bjorn

Comments

1 comment

Roee Ben Ari

October 17, 2017 09:13

Edited
Hi Bjorn,

It is great hearing from you again :)

You can definitely optimise these markers. I'm looking at the page and the markers, and it looks like these can be optimised. Let's take the following marker, for example:

https://res.cloudinary.com/traveliko/image/upload/l_text:Open%20Sans_30:5,co_rgb:FFFFFF,x_30,y_-12,g_west/c_scale,w_70/v1490347304/markers/marker_orange_star_2x.png

Image size: 4.5 KB

Now, let's add f_auto,q_auto,fl_lossy to the transformation (more information in the links below):

https://res.cloudinary.com/traveliko/image/upload/f_auto,q_auto,fl_lossy/l_text:Open%20Sans_30:5,co_rgb:FFFFFF,x_30,y_-12,g_west/c_scale,w_70/v1490347304/markers/marker_orange_star_2x.png

Image size: 2.3 KB

As you can see, we just saved about half of the bandwidth. You can also squeeze it even more by using a more aggressive quality algorithm, like q_auto:eco.

For more information:

http://support.cloudinary.com/hc/en-us/articles/202521522-How-can-I-make-my-images-load-faster-

http://cloudinary.com/documentation/image_optimization
0

Comment actions Permalink

Post is closed for comments.