Image optimization basics (video tutorial)

Overview

Large images slow down websites and hurt performance scores. This tutorial shows how to optimize any image in Cloudinary with a simple two-parameter URL change: q_auto for automatic quality compression and f_auto to automatically serve the best file format for each browser.

No code required. Just edit the delivery URL and your images are instantly optimized for every device. Learn more in the image optimization guide.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

0:02	Images stored in the cloud are often much larger than they need to be when delivered to a website. Cloudinary makes it easy to automatically compress and convert your images with a single URL change.

Choose an asset and copy its URL

0:16	Start by choosing any asset from your media library — a photo, icon, or hero banner — and copy its delivery URL. This is the link used in your website to display the image.

Add q_auto and f_auto

0:30	Edit the delivery URL and add q_auto for automatic quality compression, and f_auto to automatically serve the best file format for each browser. Then hit reload. Learn more about image optimization parameters.

See the results

0:37	Your image is now perfectly optimized for every device automatically. Use q_auto/f_auto on any image delivery URL to reduce file sizes and improve your site's performance scores.

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.