Search code examples
imagecloudinary

Why can't I apply effects to images in Cloudinary folder?


I'm trying out Cloudinary to get optimized images, and as a placeholder I want a blurred image. If the image is in my root media folder, this is no problem, see for instance this url: https://res.cloudinary.com/dvghwblv8/image/upload/e_blur:2000,f_webp/sample.jpg

However, if I want to apply an effect to an image in one of my folders, I get a 404: https://res.cloudinary.com/dvghwblv8/image/upload/q_auto,f_webp,e_blur:1000/samples/landscapes/landscape-panorama

Notice that as soon as I remove my effect, I do get my image: https://res.cloudinary.com/dvghwblv8/image/upload/q_auto,f_webp/samples/landscapes/landscape-panorama

Why can I not apply effects to images that are in a folder?


Solution

  • Generally, when Cloudinary returns an error for an image/video URL that failed to load due to a problem with the image/video or URL, they will return an HTTP header containing more information about why the request failed.

    They also return this header for requests where an image was returned but there was a warning, such as when the default image placeholder was sent instead of the requested image.

    This information is sent in the x-cld-error header, and you can see the value by using your browser's web developer tools to examine the request and response for the image which didn't load correctly.

    In your current case, the specific error is:

    Maximum image size is 25 Megapixels. Requested 25.62 Megapixels
    

    The error is returned as the dimensions of the output image (10,906px by 2,349px - (which are the original image dimensions as no resizing has been requested in your URL) - contains more Megapixels than your account's limit.

    You can bypass this error by applying some resizing transformations to your image which will reduce the total number of megapixels of the output. You will not only want to do that to avoid this issue but also because delivering such a large image will result in a large output image in terms of bytes which will then count against your Bandwidth quota in Cloudinary for every request - for instance, the q_auto,f_webp is almost 3MB in size at the original image dimensions.

    For example, you can ask Cloudinary to scale the image to 2,000px width (by adding c_scale and w_2000) as follows and then your blurred image will generate and be returned: https://res.cloudinary.com/dvghwblv8/image/upload/c_scale,q_auto,f_webp,e_blur:1000,w_2000/samples/landscapes/landscape-panorama

    The above resized version is also only 14.4KB in size and the same w_2000 version and without e_blur it's 115KB - a lot less than the 3MB image when just using q_auto,f_webp and the original (10,906x2,349) dimensions.