Use Cloudinary to optimize images

Ahmad Awais

• Twitter
• GitHub
• Glitch

Learn to use Cloudinary's fetch URL API to optimize images and serve them in next-gen formats.

In this codelab:

1. Get a free Cloudinary account.
2. Measure page load time before optimization.
3. Optimize images with Cloudinary.
4. Measure page load time after optimization.

Get a free Cloudinary account #

First, sign up for a free Cloudinary account.

Remember to set a custom cloud name at the end of the registration form. Cloudinary uses your cloud name to build the URLs it will serve your images from.

Measure page load time before optimization #

Use Lighthouse to measure page load time before optimization:

1. Click Remix to Edit to make the project editable.
2. To preview the site, press View App. Then press Fullscreen .
3. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
4. Click the Audits tab.
5. Select the Performance checkbox.
6. Click Run audits.

When the audit completes, look at the Opportunities section:

You'll resolve these opportunities in the rest of this codelab by optimizing the images with Cloudinary.

Optimize images with Cloudinary #

To optimize the three images in the starting code, you'll create Cloudinary fetch URLs for each one.

A Cloudinary fetch URL looks like this:

https://res.cloudinary.com//image/fetch//

• <cloud_name> is your Cloudinary cloud name.

  Example:

  demo

• <transformations> is a list of Cloudinary image transformations separated by commas.

  Example:

  q_auto,f_auto

• <remote_image_url> is the original image URL.

  Example:

  https://codelab-cloudinary.glitch.me/images/flower1.png

Here's an example of a complete Cloudinary fetch URL:

https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png

Replace image URLs with Cloudinary fetch URLs #

Edit the image URL on line 25 of index.html:

1. Create a Cloudinary fetch URL:

   https://res.cloudinary.com/<cloud_name>/image/fetch/<transformations>/<remote_image_url>

   • Replace <cloud_name> with your Cloudinary cloud name.

   • Replace <transformations> with q_auto,f_auto.

   • Replace <remote_image_url> with the original image URL.

   Example:

   https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png

2. Replace the image URL on line 25 of index.html with the Cloudinary fetch URL.

   Example:

   <div class="wrapper">
     <img src="https://codelab-cloudinary.glitch.me/images/flower1.png"/>
     <img src="https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png"/>
     <div class="price">Violet bouquet- $9</div>
   </div>

This decreases image size by more than 90%.

The photo on the right is 92.39% smaller than the one on the left, yet would probably look identical to the average user.

✔︎ Check-in #

The edited part of your index.html file should now look like this:

<div class="wrapper">
  <img src="https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png" alt="Yellow bouquet" />
  <div class="price">Yellow bouquet - $9</div>
</div>
<div class="wrapper">
  <img src="https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower2.jpg" alt="Cream bouquet" />
  <div class="price">Cream bouquet - $5</div>
</div>
<div class="wrapper">
  <img src="https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower3.png" alt="Light pink" />
  <div class="price">Light pink bouquet - $6</div>
</div>

Measure page load time after optimization #

These are the results of using Cloudinary to optimize images:

Run the Lighthouse performance audit again to see for yourself!

The Lighthouse performance audit should have a perfect score. In the example above, First Meaningful Paint is down by an impressive 2.5 seconds.

Further Reading #

• Digital media management guides
• Quality optimization interactive demo
• Compress images without losing quality