Step 2: Load pages faster with optimization

Every byte in your web page or app matters. And that's especially true for heavy images and videos. In this step, you'll see how just adding a couple of parameters to a URL will automatically select the best file format for your browser/device and minimize file size of each delivered image and video while maintaining visual quality.

This ensures a top-notch visual experience for your customers and top-notch Core Web Vitals scores for you!

• Task 1: Open the image delivery URL
• Task 2: Optimize the image
• Task 3: Resize your image
• Task 4: Optimize a video

~5 minutes

Task 1: Open the image delivery URL

1. Load the following Delivery URL to a new browser tab, replacing <your_cloud_name> below with your actual cloud name:

2. You'll see an 800kb, high-quality, and large resolution (1870x1250px) JPG image that was included as a sample asset when you created your account.

   

Task 2: Optimize the image

Continue with the same delivery URL and browser tab from the above task.

1. In the address bar, just after /upload (and before the next slash), paste: /q_auto/f_auto, and reload the image.

2. Even though you're still delivering an 1870x1250px image, if you download or inspect the image, you'll see that the image size is now only about ⅓ or less of its original file size.

3. Click Forward and Back on your browser to compare between the original and this optimized version. Unless you've got superman-quality vision, you probably won't be able to discern any visual quality difference.

Task 3: Resize your image

There's no need to deliver high-res images to users and then have them resized client-side in your app. That hurts your page load performance and your end user's experience.

Let's add a couple more parameters to generate a resized image on the Cloudinary servers and then the auto-quality and auto-format parameters you used before will be applied to deliver the best quality and format of the resized variant:

1. In the address bar, just before /q_auto/f_auto, enter: /c_scale,w_500 and reload the image.
   
   Tip

   When adding new components to an existing URL, make sure that the resulting URL has a slash between each component. If you accidentally paste something in the wrong place such that there's a missing slash somewhere, you'll get an error when you reload the URL. If that happens, just skim the URL and check for a missing slash.
2. Now check the file size and format of the delivered image again.

Task 4: Optimize a video

1. Open the sample video below in a new browser tab using your cloud name:

2. Download or inspect to check the resolution, format, and file size of this original video.

3. Now add the identical scale, auto-quality, and auto-gravity parameters as you previously added to the image and reload the video.

4. Wait until the video has loaded and played to end to enable the progressive optimization to complete and then check the video format and file size again.

Check out how you'd generate these using an SDK

Cloudinary has tons of backend, frontend, and mobile SDK libraries, all of which enable you to generate optimization (and other) delivery URLs using your favorite programming language.

You'll learn how to set up and use your chosen SDK in step 5, but for now, here's a sneak preview of what the code for generating the above URLs would look like using an SDK.

Take a quick look at the code for your favorite language(s):