BunnyCDN image manipulation engine

Part of BunnyCDN’s new optimizer engine is the manipulation engine. This allows you to append further configurations onto an image URL to manipulate the end received image.

Here is a list of what you can do with the BunnyCDN manipulation engine as per the docs:

  • Width
  • Height
  • Aspect Ratio Crop
  • Quality
  • Sharpen
  • Blur
  • Crop
  • Crop Gravity
  • Flip
  • Flop
  • Brightness
  • Saturation
  • Gamma
  • Hue
  • Contrast
  • Automatic Optimization

Of interest to me in particular is width, height, crop and quality.

Sizing

For this post i will use the placeholder URL of

https://cdn.domain.com/testimage.jpg

Assuming it is a massive 6000×4000 5.5MB image when can serve this better like

https://cdn.domain.com/testimage.jpg?width=800&height=600&quality=60

 

BunnyCDN manipulation engine width
BunnyCDN manipulation engine width

Crop is useful to effective zoom in of focus on part of the image. There are two options for crop.

?crop=width,height

or

?crop=width,height,x,y

If using the first method the width and height will be cropped from the center of the image as per crop_gravity.

https://cdn.domain.com/testimage.jpg?crop=300,300,3100,2200

Appearance

You can also do basic image appearance changes such as adding brightness or sharpening the image. Saturation can be applied from a scale of -100 to 100. with -100 being grayscale.

BunnyCDN manipulation engine brightness
BunnyCDN manipulation engine brightness

Many of these options are a more unique touch which whilst they have their use cases it is defined. The ability to edit or manipulate images on the fly and after they have been uploaded is an awesome feature.

Making a thumbnail out of a full sized image or a small scaled image instead of needing to fetch the full size image is web design 101 and makes all the difference in speed.

This manipulation engine is $0.005 per 10k requests on top of the $9.50 per month for Bunny optimizer which unless you’re serving a massive website wont see great costs.