Using UC Optimize

This article describes the steps we recommend taking to start off with UC Optimize. Make sure you have already set everything up.

Step 1. Check how everything works

Add your UC Optimize prefix to a media URL you want to fetch, an image for example,

https://yoursite.ucr.io/ + https://yoursite.com/assets/image.jpg =
https://yoursite.ucr.io/https://yoursite.com/assets/image.jpg

That is it, image.jpg is now delivered via Uploadcare CDN.

Step 2. Play with image transformations

Apply some transformations to your image by adding one of the image operations between the prefix and media URL. We’d go with resizing an image to 500 pixels in width with the resize operation by adding -/preview/-/resize/500x/.

https://yoursite.ucr.io/-/preview/-/resize/500x/https://yoursite.com/assets/image.jpg

The resized version of image.jpg is now delivered by Uploadcare CDN.

Step 3. Add your UC Optimize prefix to media assets you want optimized

Iterate through your media assets and add your UC Optimize prefix to every URL, apply operations when needed. You can also optimize your workflow and free up some storage space, i.e., if you got multiple versions of images for adaptive layouts. Those can now be made on-the-fly by building proper URLs using our Image Processing syntax.

1260 pixels in width:
https://yoursite.ucr.io/-/preview/-/resize/1260x/https://yoursite.com/assets/image.jpg

760 pixels in width:
https://yoursite.ucr.io/-/preview/-/resize/760x/https://yoursite.com/assets/image.jpg

512 pixels in width:
https://yoursite.ucr.io/-/preview/-/resize/512x/https://yoursite.com/assets/image.jpg

You can find more on being responsive with Uploadcare on our blog.

Step 4. Run local performance tests

Measure your load time and traffic improvement by comparing those for your original files and their optimized versions. For local tests, you can use common stuff like chrome-devtools. With image content, consider playing with the quality processing operation for better results.

Note, there’s no performance improvement when using any UC Optimize URL for the first time. Fetching happens first, and starting with the second use of the URL, your files are delivered from our CDN.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.