How to Use Cloudinary to Optimize Images

April 5, 2019
website optimization images tutorials SEO

optimize images

When it comes to slow website loading speeds, images are usually the biggest culprit. Optimizing your images is an important first step to improving your site's speed and performance.

Cloudinary automatically optimizes your images for you, serving the best image format and right quality to each individual user based on their browser, device type, and screen size.

In this article, you'll learn how to set up Cloudinary and use it for your own website.

Skills required: Basic computer literacy. Basic knowledge of HTML. Basic knowledge of working with files and folders.

Why Is Website Loading Speed Important?

Research by Google and other firms has shown that website page load times directly impact revenue, engagement, and conversions. Sluggish pages or delayed interaction may be interpreted by the user as a poor experience.

Here's a snapshot of relevant data:

  • A 1-second delay in page load time can decrease conversions by 7% or more. (Source: Akamai)
  • As a page's site loading speed goes from 1 second to 6 seconds the likelihood that the visitor trying to access the page will abandon it, goes up by 106%. (Source: Google / SOASTA research)

Speed, performance, and SEO are where key competitive gains can be had.

Optimizing Images: Choosing an Approach

There are many ways to optimize online images. Some approaches require advanced coding or image knowledge. All strive to achieve a balance between maximum image quality and miminal file size.

In this article, I'll be sharing a technique for optimizing your images that requires low effort, little technical knowledge, and typically results in high impact on load times.

Get Started Now

Click here to skip the background information and jump right into optimizing your images.

Optimizing for Format and Quality

The two tactics we'll be using relate to image format and image quality.

Next-Gen Formats

Image formats like JPEG and PNG are common but their file sizes are often not economical.

When testing a website using Google Page Speed Insights, the results will often warn "Serve images in next-gen formats." (For example, see this Google Page Speed test for Wired.com. The test flags images that don't use next-gen formats.)

Next-gen formats compress images down to a smaller file size while preserving visual quality. The display size of the image doesn't change.

WebP, JPEG 2000, and JPEG XR are examples of next-gen formats.

The Browser Compatability Problem — Solved

WebP was developed by Google. It loads extremely fast, but is not supported by all browsers.

For example, it's not compatible with Safari, iOS Safari, BlackBerry Browser, or IE Mobile. (Update: WebP is now compatible with Safari - but only on version 14, which launched in Sept. 2020.)

If all of your website images were WebP images, visitors coming to your website using one of these incompatible browsers would see blank spaces where the images were supposed to be.

In addition, formats like JPEG XR are only supported by Microsoft's Internet Explorer and Edge browsers.

You can see how browser compatibility issues complicate our goal to serve images that load fast.

The Solution: Cloudinary can automatically detect what browser a site visitor is using, and then serve the images on that web page in a format that's optimal for that browser — all in real-time.

Image Quality

Cloudinary can also use its algorithms to calculate and deliver image quality based on the image content and the end-user's browser and device. The algorithm achieves the best balance between low file size and visual quality.

cloudinary homepage

Getting Started With Cloudinary

  1. Sign up for a Cloudinary account. (There's a free developer tier that allows for 25 GB of storage.
  2. Log in to your new account and click on "Media Library."
  3. Upload an image. (Tip: If you're going to use Cloudinary for multiple websites, create a folder in Media Library for each website.)
  4. Hover your cursor over the image and a paper clip icon will appear in the upper left corner. Click on the paperclip icon. This causes the image URL to be copied.
  5. Paste the URL into an new browser window.

As an example, I'm going to use the URL for the Cloudinary website image that appears above this section.

After uploading the image to Cloudinary, I click on the paperclip icon to copy this URL:

https://res.cloudinary.com/icecloud7/image/upload/v1565472385/SignalFox/cloudinary-image-optimization_imj3ym.png

Then I place the URL in a browser window. You'll see the image appear.

Adding f_auto and q_auto

Now we're going to add the f_auto and q_auto parameters to this URL.

  • f_auto tells Cloudinary to automatically transform this image into a file format that's optimal for the user's browser.
  • q_auto tells Cloudinary to automatically deliver the image at a quality level suitable for the device accessing the web page.

Insert f_auto and q_auto after the /upload/ trailing slash, like so:

https://res.cloudinary.com/icecloud7/image/upload/q_auto,f_auto/v1565472385/SignalFox/cloudinary-image-optimization_imj3ym.png
  • The order of the parameters doesn't matter
  • Place a comma between the parameters
  • Don't add any spaces

Insert the New Image URL Into Your Web Page

Next, in the HTML of your web page, you're going to swap out your old image URL and replace it with your new image URL from Cloudinary.

For this example, let's assume that I originally uploaded a PNG version of this image on my web page. The HTML for my page might look like this: 

<p>Cloudinary can also use its algorithms to calculate and deliver image 
quality based on the image content and the end-user's browser and device. 
The algorithm achieves the best balance between low file size and visual 
quality.</p>

<img src="/assets/cloudinary-image-optimization.png" />

<h2> Getting Started With Cloudinary </h2>

Next, replace the old image URL with your new image URL from Cloudinary. 

<p>Cloudinary can also use its algorithms to calculate and deliver image 
quality based on the image content and the end-user's browser and device. 
The algorithm achieves the best balance between low file size and visual 
quality.</p>

<img src="https://res.cloudinary.com/icecloud7/image/upload/q_auto,f_auto/v1565472385/SignalFox/cloudinary-image-optimization_imj3ym.png" />

<h2> Getting Started With Cloudinary </h2>

Additional Tips

You can't go wrong with f_auto. It's really all you need to do to dramatically improve your image delivery. That results in a better user experience.

Cloudinary offers dozens of image transfomations, but for optimization and speed f_auto is key.

If you're curious about other parameters, here are two more to explore:

  • w_auto - This parameter instructs Cloudinary to make copies of your image to match the breakpoints of your website. It stores those other images and serves them up as necessary.
  • e_sharpen - If your image lacks crispness, you can add this parameter to sharpen it. (Note: Check to see the visual result before adding this permanently to your image URL. On occassion, the sharpening looks exaggerated.)
What's a breakpoint?

A breakpoint is a browser width setting, coded into a website, that triggers a re-arrangement of responsive design elements. In everyday language, breakpoints are used to allow your site to "re-arrange" itself so that it looks good on different screen sizes. Breakpoints are commonly set (at minimum) for both tablets and mobile phones screen sizes. The purpose of breakpoints is to offer optimal display of page elements for tablets and mobile phones.

What Next?

You should optimize (at minimum) the images on your main landing pages any pages designed for conversion.

If you have multiple people posting to your blog, then you'll need to train them on using Cloudinary, or assign one individual to handle images.

A decent workaround for a multi-author blog is to have authors create screen grabs of images they want to use. As they take the screen grab, have them size it by eye (roughly) to fit the width of your blog's text column. By using screen grabs and avoiding huge image sizes, you'll saving on image loading time.

You won't get the same results as using Cloudinary, but the results should be much better than letting users upload any image file size they want.

If you're using a WordPress site you can also research image optimization plugins. There are many available, including the ImageKit plugin, which offers a service similar to Cloudinary.

Summary

You've learned that images are often the biggest problem creating a poor user experience for your website's visitors. That experience directly impacts your engagement, conversions, and ROI.

Optimizing your images with Cloudinary can significantly improve end user experience.

As you're working on your image optimization, feel free to contact me with any questions you might have.

Back to Blog