Upcoming Course: Code Your Own Business w/ React + GraphQL!
We're live-coding on Twitch! Join us!
Optimize & Serve Next-Gen Images Just by Changing the Image's URL with Cloudinary's URL API

Optimize & Serve Next-Gen Images Just by Changing the Image's URL with Cloudinary's URL API

Code Demo

Learn to use Cloudinary's fetch URL API to optimize images and serve them in next-gen formats. Cloudinary can help prioritize images and performance. Scotch.io uses Cloudinary to serve all images and it helped Scotch reach 1 second page load times.

GLITCH CODELAB: https://glitch.com/edit/#!/codelab-cloudinary

Check out the above Glitch to see this demo in action!

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.

Essential Reading: Learn React from Scratch! (2019 Edition)

To preview a Glitch project in its own tab, press Share in the bottom-right corner and copy the Live App link into a new Chrome tab.

  1. In Chrome DevTools, on the Audits tab, select Performance.
  2. Click Run Audits.
  3. When the audit completes, see the Opportunities section.Before optimization: Example results of a Lighthouse performance audit.

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/<cloud_name>/image/fetch/<transformations>/<remote_image_url>
  • <cloud_name> is your Cloudinary cloud name. Example: demo
demo
q_auto,f_auto

q specifies image quality that Cloudinary will deliver. q_1 is the lowest quality; q_100 is the highest. q_auto tells Cloudinary to calculate the optimal image quality automatically.

f specifies image format. Cloudinary can deliver images in WebP and JPEG-XR formats on supported browsers. f_auto tells Cloudinary to choose an image format automatically.

  • <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

In this step, you'll edit the image URL on line 25 of index.html.

Click Remix to Edit in the top-right corner to make the project editable.

  1. Create a Cloudinary fetch URL:Replace <cloud_name> with your Cloudinary cloud name.Replace with q_auto,f_auto.Replace <remote_image_url> with the original image URL. Example:
https://res.cloudinary.com/<cloud_name>/image/fetch/<transformations>/<remote_image_url>
https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/https://codelab-cloudinary.glitch.me/images/flower1.png
  1. Replace the image URL on line 25 of index.html with the Cloudinary fetch URL.
<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.

Now prepend all image links in the index.html with https://res.cloudinary.com/demo/image/fetch/q_auto,f_auto/. Make sure to change demo to your cloud_name.

✔︎ 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!

Lighthouse performance audit: Before

Lighthouse performance audit: After

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

You have used Cloud (cloudinary) to compress the images optimally, and your page is serving next-gen image formats. Without having to mess with any configurations or using any build tools.

Further Reading

Like this article? Follow @MrAhmadAwais on Twitter