ImageFly: On-The-Fly Image Transformations

^ Thanks DALL·E for the “High quality photo of a fly riding a space rocket”


Page optimisation and page speed are becoming increasingly important for websites and web applications. One of the biggest contributors to page load times is the size of the images being served (also mentioned in Using The BlurHash Algorithm With A TypeScript Azure Function).

You might have legacy systems that contain older generation image types. Introducing large changes to support modern an image format like WebP can be time consuming and expensive.

Clone the Open Source desholmes/imagefly repo and follow the post below.

ImageFly: Overview

The diagram above shows a high-level overview of ImageFly being used with an Azure CDN. Here’s the flow from top to bottom:

  1. User requests an image from the CDN
  2. CDN checks the cache for the image
  3. Cache miss: ImageFly is called
  4. Image is loaded from the origin, transformed and returned to the CDN
  5. Cache hit: Returns the image

Until the cache is warm for a particular URL ImageFly will need to generate an image and the responses will be slower. Once the cache is warm the image will be served directly from the CDN and the response will be blazing fast

Here’s some benchmark results (taken from as the origin):

Image URL Size Response Time Notes 453kb ~51ms Original image 58kb ~38ms ImageFly webp (defaults) 48kb ~35ms ImageFly jpeg (format:jpeg, quality:30)

So, there you have it! Everything you need to roll out your own on-the-fly image transformations.

ImageFly is Open Source, and contributions are welcome.

Popular related posts for Azure, Azure DevOps and CI/CD:

Related Posts