Digital Asset Management
Optimize Images with Nuxt Cloudinary (video tutorial)
Last updated: Sep-12-2024
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...
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.
✖️