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

# Optimize images with Nuxt Cloudinary (video tutorial)

## Overview

Learn how to optimize images in NuxtJS using [Nuxt Cloudinary](https://cloudinary.nuxtjs.org/).

## 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.
### Use Nuxt Cloudinary to deliver images
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | The Nuxt way to load images uses the `img` tag. A better way uses Nuxt Cloudinary to deliver images with all the Cloudinary functionality.

### Use the CldImage component to deliver images
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=29 :player=cld} | After Nuxt Cloudinary is [installed](https://cloudinary.nuxtjs.org/getting-started), use the `CldImage` component to deliver images and pass the `publicId` of the image.

### Nuxt Cloudinary optimizations
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=00 :player=cld} | Nuxt Cloudinary automatically adds [Automatic format selection](image_optimization#automatic_format_selection_f_auto) and [Automatic quality selection](image_optimization#automatic_quality_selection_q_auto) to your delivery URLs.

### Add image transformations
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=18 :player=cld} | Add image transformations to the `CldImage` component.

### Support for responsive images
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=43 :player=cld} | To support responsive images, `sizes` and `srcset` attributes are automatically configured for you.

## Keep learning

> **READING**:
>
> * Learn more about [image optimization](image_optimization).

> * Learn more about [image transformations](image_transformations).

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

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

  
  
  
    Using the Nuxt Image Component
    Deliver images using the Nuxt Image component 
  

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

  
  
  
    Content-aware Video Cropping
    Smartly crop a video using content-aware AI 
  

 

 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.