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: {…}}} 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=false

Workers: cf: {image: {anim: false}}

BACKGROUND

This parameter adds a background color underneath the image.

URL format: background=%23RRGGBB , background=red

Workers: cf: {image: {background: "#RRGGBB"}}

BLUR

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

URL format: blur=50

Workers: cf: {image: {blur: 50}}

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.5

Workers: cf: {image: {brightness: 0.5}}

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=fast

Workers: cf: {image: {compression: "fast"}}

CONTRAST

The parameter increases contrast by a factor.

URL format: contrast=0.5

Workers: cf: {image: {contrast: 0.5}}

DPR

Device Pixel Ratio. The default value is 1.

URL format: dpr=1

Workers: cf: {image: {dpr: 1}}

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-down

Workers: cf: {image: {fit: "scale-down"}}

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=auto

Workers: cf: {image: {format: "avif"}}

GAMMA

It increases exposure by a factor.

URL format: gamma=0.5

Workers: cf: {image: {gamma: 0.5}}

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=auto

Workers: cf: {image: {gravity: "auto"}}

HEIGHT

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

URL format: height=250

Workers: cf: {image: {height: 250}}

METADATA

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

URL format: metadata=none

Workers: cf: {image: {metadata: "none"}}

ONERROR=REDIRECT

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

URL format: onerror=redirect

Workers: cf: {image: {onerror: "redirect"}}

QUALITY

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

URL format: quality=50

Workers: cf: {image: {quality: 50}}

ROTATE

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

URL format: rotate=90

Workers: cf: {image: {rotate: 90}}

SHARPEN

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

URL format: sharpen=2

Workers: cf: {image: {sharpen: 2}}

TRIM

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

URL format: trim=20;30;20;0

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

WIDTH

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

URL format: width=250

Workers: cf: {image: {width: 250}}

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.