> ## 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.

# Netlify plugin (video tutorial)

## Overview

Learn how to optimize all the images on your site automatically, using the [Cloudinary Netlify build plugin](https://netlify.cloudinary.dev/).   

## 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.
### The Cloudinary Netlify plugin
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | Netlify is a web platform that allows you to build and deploy web apps globally, and includes delivering assets from a CDN. However, Cloudinary can be used to optimize the delivery of these assets even further. The [Cloudinary Netlify plugin](https://netlify.cloudinary.dev/) applies blanket optimization to all images on a Netlify site.
|

### Install the plugin
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=16 :player=cld} | To install the Cloudinary Netlify plugin, log into your Netlify team page, or the site where you'd like to install Cloudinary, and select the **Integrations** tab. Search for **Cloudinary**, then click **Enable**. Then,  click **Install** to install the plugin on a particular site.
|

### Configure your Cloudinary account for your Netlify site
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=40 :player=cld} | Find your **Cloud name** on the [Dashboard](https://console.cloudinary.com/app/home/dashboard), and set your cloud name in the **CLOUDINARY_CLOUD_NAME** field. Then click **Install plugin**.
|

### Trigger a new build and deploy for your Netlify site
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=49 :player=cld} | Navigate to the **Deploys** tab, then click **Trigger deploy > Deploy site** and wait for the site to be published.
|

### Notice how your images are optimized
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=59 :player=cld} | If you look at your site using developer tools, you can see that your images are now being fetched by Cloudinary and delivered with [automatic format](image_optimization#automatic_format_selection_f_auto) and [automatic quality](image_optimization#automatic_quality_selection_q_auto) transformations. 
|

### Configuration options
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=22 :player=cld} | Head over to the [documentation](https://netlify-plugin-cloudinary.netlify.app/configuration) to learn about the different configuration options for the plugin.
|

## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Learn more about [image](image_optimization) and [video](video_optimization) optimization.

> * See the code for the [Cloudinary Netlify plugin](https://github.com/cloudinary-community/netlify-plugin-cloudinary).

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

  
  
  
    Using the Next.js Image Component
    Deliver images using the Next.js Image component 
  

  
  
  
    Upload Assets in React
    Upload assets using the Upload widget in a React app 
  

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

 

 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.