Optimize Images with Nuxt Cloudinary (video tutorial)
Last updated: Aug-20-2025
Overview
Learn how to optimize images in NuxtJS using Nuxt Cloudinary.
On this page:
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
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
After Nuxt Cloudinary is installed, use the CldImage component to deliver images and pass the publicId of the image. |
Nuxt Cloudinary optimizations
| Nuxt Cloudinary automatically adds Automatic format selection and Automatic quality selection to your delivery URLs. |
Add image transformations
Add image transformations to the CldImage component. |
Support for responsive images
To support responsive images, sizes and srcset attributes are automatically configured for you. |
Keep learning
Related topics
- Learn more about image optimization.
- Learn more about image transformations.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
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.
✖️
Error
Rate this page: