Cloudinary can transform your images during the image upload process (eager transformations), or on demand, when accessed by your visitors (lazy transformations).
For lazy transformations, all transformed images are generated on-the-fly, stored persistently, cached and delivered through a fast CDN. This means that the first view request of a derived image will be somewhat slower, while subsequent requests will be fast. The time required for generating a transformation depends on various factors: original image dimensions, requested dimensions, applied effects and specific transformations.
The eager approach requires a little planning, but is highly recommended if you have pages with many transformed images. In addition, using eager transformations allows you to make sure that all transformed images are ready for fast delivery even for the first visitors of your site. See additional information here.
Should I use lazy or eager transformations?
Comments
3 comments
How long does it take for the eager transformed images to reach the CDN?
I was trying to eagerly transform images on upload. And as soon as I got the transformed image URL, I tried opening it in the browser and noticed the first load time to be very similar to a lazily transformed image. And the subsequent loads were then 10x-20x faster. So I'm not sure if I'm doing something wrong or if the transformed images take some time to reach the CDN.
I'm using the Node.js SDK. Here's my code snippet:
const cloudinary = require("cloudinary").v2;const cloudinaryUploadStream = cloudinary.uploader.upload_stream({
folder: folderPath,
public_id: fileNameWithoutExtension,
width: 1280,
quality: 90,
format: "webp",
eager: [
{
width: 800,
quality: 90,
format: "webp",
},
{
width: 400,
quality: 90,
format: "webp",
},
{
width: 200,
quality: 90,
format: "webp",
},
{
width: 800,
quality: 90,
format: "jpg",
},
{
width: 400,
quality: 90,
format: "jpg",
},
{
width: 200,
quality: 90,
format: "jpg",
},
],
},
(err, data) => {
// handling the errors and response here.
});
fileStream.pipe(cloudinaryUploadStream);
Hey Harsh,
Typically eager transformations won't save you a considerable amount of time when it comes to simple format and quality adjustments when transforming one asset. But when you have a website with say thirty images or even just a few with more complex transformations your wait times will increase exponentially in line with complexity and file size.
All assets from Cloudinary are delivered via CDN, so if you've accessed an asset it has been cached, making access to the asset in your regional CDN much faster.
I hope this answers some of your questions. Feel free to reach out with any other queries.
Hi Zachary
Yeah, this does solve my query. Thanks a lot.
Please sign in to leave a comment.