Skip to main content

Should I use on-the-fly or eager transformations?

Orly Bogler
Updated

Cloudinary has 2 possible ways to transform your assets:

Using on-the-fly transformations

In this case, all transformed assets are generated on-demand, stored persistently, cached, and delivered through a fast CDN.

The time required for generating a transformation depends on various factors: original asset dimensions, requested dimensions, applied effects, and specific transformations. The first request to the transformed URL will trigger the asset generation process but subsequent requests will be faster.

Note: Those types of transformations are limited by the maximum online asset manipulation size limits which are based on your Cloudinary plan. We have a help center article below that explains what are those limits and how to find them: https://support.cloudinary.com/hc/en-us/articles/202520592-Do-you-have-a-file-size-limit.
If your assets are above those limits, you will need to use eager transformations to transform your assets.

Using eager transformations

On the other hand, eager transformations are highly recommended if you have pages with many transformed assets. While it requires some planning, eager transformations allow you to perform transformations ahead of time to make sure that all transformed assets are ready for fast delivery even for the first visitors of your site.

You can refer to our documentation on eager transformations for additional information.

Related articles

Comments

3 comments

Date Votes
  • Harsh Nagda

    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);
    0
  • Zachary Gould

    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. 

    1
  • Harsh Nagda

    Hi Zachary

    Yeah, this does solve my query. Thanks a lot.

    0

Please sign in to leave a comment.