Cloudflare Worker Image Resize | All About

Let’s see more about Image Resizing in Cloudflare Worker. Bobcares, as a part of our Server Management Services, offers solutions to every query that comes our way.

Image Resizing in Cloudflare Worker

With Cloudflare Workers Image Resizing, we have powerful programmatic control over every image request. The benefits of using Workers are as follows:

• Custom URL scheme
• Hidden folder to store images
• Content negotiation implementation

How do we access Image Resizing in Cloudflare Worker?

The resizing feature is accessed via the fetch() subrequest parameters within a Worker. The fetch() function takes arguments as the second argument within the

{cf: {image: {…}}}Copy Code

object. Parameters include:

ANIM

The default value of this parameter is true. Setting it to false reduces animations to still images. Because huge GIF animations can be tens or even hundreds of megabytes in size, we can use them for expanding photos or processing arbitrary user content.

URL format:

anim=falseCopy Code

Workers:

cf: {image: {anim: false}}Copy Code

BACKGROUND

This parameter adds a background color underneath the image.

URL format:

background=%23RRGGBBCopy Code

,

background=redCopy Code

Workers:

cf: {image: {background: "#RRGGBB"}}Copy Code

BLUR

The radius is between 1 (low blur) and 250 (high blur).

URL format:

blur=50Copy Code

Workers:

cf: {image: {blur: 50}}Copy Code

BORDER

We can use the parameter to add a border around the image.

Workers:

cf: {image: {border: {color: "rgb(0,0,0,0)", top: 5, right: 10, bottom: 5, left: 10}}}

cf: {image: {border: {color: "#FFFFFF", width: 10}}}

BRIGHTNESS

It increases brightness by a factor.

URL format:

brightness=0.5Copy Code

Workers:

cf: {image: {brightness: 0.5}}Copy Code

COMPRESSION=FAST

This reduces latency on a cache miss significantly by using the quickest-to-compress file format, at the expense of higher file size and reduced image quality.

URL format:

compression=fastCopy Code

Workers:

cf: {image: {compression: "fast"}}Copy Code

CONTRAST

The parameter increases contrast by a factor.

URL format:

contrast=0.5Copy Code

Workers:

cf: {image: {contrast: 0.5}}Copy Code

DPR

Device Pixel Ratio. The default value is 1.

URL format:

dpr=1Copy Code

Workers:

cf: {image: {dpr: 1}}Copy Code

FIT

Affects width and height interpretation. All resizing modes maintain the aspect ratio. The different modes are scale-down, contain, cover, crop, and pad.

URL format:

fit=scale-downCopy Code

Workers:

cf: {image: {fit: "scale-down"}}Copy Code

FORMAT

This setting only works directly with Image Resizing. The auto option will deliver WebP or AVIF files to browsers that support them. If this option is left blank, a standard format such as JPEG or PNG will be applied.

URL format:

format=autoCopy Code

Workers:

cf: {image: {format: "avif"}}Copy Code

GAMMA

It increases exposure by a factor.

URL format:

gamma=0.5Copy Code

Workers:

cf: {image: {gamma: 0.5}}Copy Code

GRAVITY

This option defines the side or point that should not be cropped when cropping with fit: “cover” and fit: “crop.” The options available include auto and side.

URL format:

gravity=autoCopy Code

Workers:

cf: {image: {gravity: "auto"}}Copy Code

HEIGHT

This parameter represents the maximum height of the image in pixels.

URL format:

height=250Copy Code

Workers:

cf: {image: {height: 250}}Copy Code

METADATA

The option specifies how much invisible metadata (EXIF data) should be saved. The available modes include keep, copyright, and none.

URL format:

metadata=noneCopy Code

Workers:

cf: {image: {metadata: "none"}}Copy Code

ONERROR=REDIRECT

Redirects to the unresized source image URL if a fatal error prevents the image from being scaled.

URL format:

onerror=redirectCopy Code

Workers:

cf: {image: {onerror: "redirect"}}Copy Code

QUALITY

The parameter specifies quality for images in JPEG, WebP, and AVIF formats.

URL format:

quality=50Copy Code

Workers:

cf: {image: {quality: 50}}Copy Code

ROTATE

Shows the degrees (90, 180, or 270) to rotate the image.

URL format:

rotate=90Copy Code

Workers:

cf: {image: {rotate: 90}}Copy Code

SHARPEN

It specifies the sharpening filter strength to be applied to the image.

URL format:

sharpen=2Copy Code

Workers:

cf: {image: {sharpen: 2}}Copy Code

TRIM

It defines the number of pixels to cut off on each side.

URL format:

trim=20;30;20;0Copy Code

Workers:

cf: {image: {trim: {"top": 12,  "right": 78, "bottom": 34, "left": 56,}}}Copy Code

WIDTH

The parameter defines the maximum width of the image in pixels.

URL format:

width=250Copy Code

Workers:

cf: {image: {width: 250}}Copy Code

Image Resizing within Cloudflare Workers – Example

fetch(imageURL, {

cf: {

image: {

fit: "scale-down",

width: 800,

height: 600

}

}

})

[Looking for a solution to another query? We’re available 24/7.]

Conclusion

To summarize, the article provides a detailed note on the image resizing process within Cloudflare workers along with an example at the end.