Assets
Optimize Images with Nuxt Cloudinary (video tutorial)
Last updated: Dec-11-2024
On this page:
Overview
Learn how to optimize images in NuxtJS using Nuxt Cloudinary.
Video tutorial
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
 0:00 |
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
| 0:29 |
After Nuxt Cloudinary is installed, use the CldImage component to deliver images and pass the publicId of the image. |
Nuxt Cloudinary optimizations
| 1:00 |
Nuxt Cloudinary automatically adds Automatic format selection and Automatic quality selection to your delivery URLs. |
Add image transformations
| 1:18 |
Add image transformations to the CldImage component. |
Support for responsive images
| 1:43 |
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...
Using the Nuxt Image Component
Deliver images using the Nuxt Image componentOptimization Tips
Tips for delivering optimized imagesContent-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.
✖️
Error
Rate this page:
