ImageFly: On-The-Fly Image Transformations

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

Introduction

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.

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 https://dholmes.co.uk/img/ as the origin):

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:

• Using The BlurHash Algorithm With A TypeScript Azure Function
• Azure DevOps Pipelines: Frontend Code Quality Checks
• GitHub Actions: Frontend Code Quality Checks
• GitLab CI/CD: Frontend Code Quality Checks
• 5 steps to reduce your React app CI/CD build minutes