How can I upscale images programmatically without restriction to image size for my nextjs project?

Sky

I am building an AI image and video editing web app using nextjs. Based on the AI image feature I would like the cloudinary api upscale feature to upscale any images irrespective of the image size. How do I achieve that? Here is the cloudinary api uspscale feature code am using in my project "import { upscale } from "@cloudinary/url-gen/actions/effect";
// Initialize Cloudinary instance  const cld = new Cloudinary({    cloud: {      cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME    }  });
  // Apply the upscale effect 
const transformedImage = cld.image(image?.publicId).effect(upscale()); 
const transformedImageUrl = transformedImage.toURL();
// Use useEffect to set the transformed image URL 
useEffect(() => {    if (setTransformedImageUrl) {      setTransformedImageUrl(transformedImageUrl);    }  }, [transformedImageUrl, setTransformedImageUrl]);" With the above code I could upscale small size images but I want to improve and make sure it upscales any images irrespective of the image size. I will be expecting your feedback on this. Thanks in advance.

Cloudinary Team

Hi there,

Thanks for reaching out.

It is also recommended to use automatic quality and automatic format transformations, which can help manage both the quality and bandwidth usage. For example - using it in a delivery URL:

https://res.cloudinary.com/demo/image/upload/e_upscale,f_auto,q_auto/docs/tall-hall.jpg

Additionally, you may also check the following links for more information:

https://github.com/cloudinary-community/next-cloudinary
https://cloudinary.com/documentation/transformation_reference#examples_f_auto
https://cloudinary.com/documentation/transformation_reference#examples_q_quality_type

Hope this helps. Please let me know if you have any further questions.

Best regards,

Eric

Helpful Links For You
💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
📰 Check out the Cloudinary blog for the latest company news and insights

Sky

Thanks for your feedback Eric and I so much appreciate your answer, but the links you provided doesn't work for my use case. I am building a nextjs web app that involves upscale feature on image upload I got this cloudinary api upscale code " import { upscale } from "@cloudinary/url-gen/actions/effect" new CloudinaryImage("me/upscale-sign-1").effect(upscale());";" and the code works but there is an issue because it can't upscale images with big sizes I mean in height and width and it can upscale smaller image sizes perfetly. I want the upscale feature to upscale any images irrespective of the image size. Here is my code for upscaling " "use client";
import { dataUrl, debounce, download, getImageSize } from '@/lib/utils';import { upscale } from "@cloudinary/url-gen/actions/effect";import { Cloudinary } from "@cloudinary/url-gen";import { PlaceholderValue } from 'next/dist/shared/lib/get-img-props';import Image from 'next/image';import React, { useEffect } from 'react';
interface TransformedImageProps {  image: any; // You should replace `any` with the actual type of `image`  type: string;  title: string;  transformationConfig: any; // You should replace `any` with the actual type of `transformationConfig`  isTransforming: boolean;  setIsTransforming: (value: boolean) => void;  hasDownload?: boolean;  setTransformedImageUrl: (url: string) => void; // Add this line}
const TransformedImageUpscale: React.FC<TransformedImageProps> = ({  image,  type,  title,  transformationConfig,  isTransforming,  setIsTransforming,  hasDownload = false,  setTransformedImageUrl // Add this line}) => {
  // Initialize Cloudinary instance  const cld = new Cloudinary({    cloud: {      cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME    }  });
  // Apply the upscale effect  const transformedImage = image    ? cld.image(image?.publicId).effect(upscale())    : null;  const transformedImageUrl = transformedImage?.toURL() ?? '';
  // Use useEffect to set the transformed image URL  useEffect(() => {    if (setTransformedImageUrl && transformedImageUrl) {      setTransformedImageUrl(transformedImageUrl);    }  }, [transformedImageUrl, setTransformedImageUrl]);
  const downloadHandler = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {    e.preventDefault();    download(transformedImageUrl, title);  }
  if (!image) {    return <div>No image data available.</div>;  }
  return (    <div className="flex flex-col gap-4">      <div className="flex-between">        <h3 className="h3-bold text-purple-600">          Upscaled        </h3>
        {hasDownload && (          <button             className="download-btn"             onClick={downloadHandler}          >            <Image               src="/assets/icons/download.svg"              alt="Download"              width={24}              height={24}              className="pb-[6px]"            />          </button>        )}      </div>
      {image?.publicId && transformationConfig ? (        <div className="relative">          <Image             width={getImageSize(type, image, "width")}            height={getImageSize(type, image, "height")}            src={transformedImageUrl}            alt={image.title || "Transformed image"} // Ensure alt attribute is provided            sizes={"(max-width: 767px) 100vw, 50vw"}            placeholder={dataUrl as PlaceholderValue}            className="transformed-image"            onLoad={() => {              setIsTransforming && setIsTransforming(false);            }}            onError={() => {              debounce(() => {                setIsTransforming && setIsTransforming(false);              }, 8000)()            }}          />
          {isTransforming && (            <div className="transforming-loader">              <Image                 src="/assets/icons/spinner.svg"                width={50}                height={50}                alt="spinner"              />              <p className="text-white/80">Please wait...</p>            </div>          )}        </div>      ) : (        <div className="transformed-placeholder">          Upscale Image Frame        </div>      )}    </div>  )}
export default TransformedImageUpscale;
" I will be looking forward to your response and everyone's response concerning this issue. Thanks in advance.

Cloudinary Team

Hi,

I checked the logs, and you are hitting the maximum megapixel limit which is 25MP for free accounts and thus you are getting the error InvalidTransformation: Image is too large for e_upscale (more than 25 megapixels)

Hopefully this helps.

Regards,
Akshay

Helpful Links For You
💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
📰 Check out the Cloudinary blog for the latest company news and insights

Sky

Thanks for your swift response @Akshay. Does that mean if I upgrade the code would upscale any images irrespective of their sizes? Does that mean the code works as it should and it's just that restriction is placed in free account right?

DannyFromCloudinary

Hi @Sky.

Not exactly. If you were to upgrade, the maximum megapixel limit would still be in place, but it would be set to a higher threshold, letting you upload/create larger images. For specific megapixel limits, please see https://cloudinary.com/pricing/compare-plans

Kind regards,
-Danny