> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](image_optimization) guide.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=02 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=16 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=30 :player=cld} | 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](image_optimization) parameters. |

### See the results
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=37 :player=cld} | 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

> **READING**:
>
> * Learn more about [image optimization](image_optimization) and all the available quality and format parameters.

> * Explore [media optimization](media_optimization) for a broader look at delivery performance options.

> * Discover more transformations in the [Transformation URL API reference](transformation_reference).

> * See how optimization improves [e-commerce workflows](ecommerce_workflows_product) for product imagery.

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

  
  
  
    Optimize Images in React
    Reduce image file sizes with automatic optimization 
  

  
  
  
    Next.js Image Optimization
    Optimize and crop images with CldImage 
  

  
  
  
    Remove Backgrounds
    Erase any image background with one URL parameter 
  

 

 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.