Image Transformation middleware 📷

[blenderskool]

The image transformation middleware performs on-demand image transformations that are useful while consuming user-uploaded images on the web. It is inspired by tools like Cloudinary and imgix and also leverages the power of existing middlewares in diode for caching, rate-limiting, etc.

Current experimental version of this middleware includes following transformations that can be applied with their respective query param:

• width: w
• height: h
• fit: fit
• image file format: fm
• quality: q
• color quantization: colorquant
• smart crop strategy: crop

2nd Aug

• blur: blur
• saturation: sat
• brightness: bright
• contrast: cont
• progressive jpegs: prog

11th Sept

• masking: mask

...More to be added soon.

Example usage:

http://diode.local/api/v1/jdia90aDAKlBb3?w=512&q=50&fm=webp

This request does the following:

• Sends a request to underlying origin endpoint for the image.
• Makes the image's width to 512px while preserving aspect ratio.
• Updates the quality of the image to 50. This helps with file size reduction by dropping some image quality.
• Converts the image to webp, a better file format for serving images on the web.
• If the API route has caching enabled, it will also cache the image in the redis store for the given amount of time.

Demo:

https://user-images.githubusercontent.com/21107799/182035210-c38ec4f6-82e5-42cf-a64b-10944a63c4a2.mp4

Performance: Performance tests haven't been done yet. The middleware uses sharp module which internally uses libvips and claims to be really fast when compared to other libraries out there.

Other notable changes:

• The API response middlewares pipeline has been refactored to use Buffers for storing data instead of pipelines as it is more compatible with operations performed by the middlewares in diode.
• Package updates:
  • Nextjs to v12.1
  • ioredis to v5
  • ioredis-mock to v8 (This also includes a fix for https://github.com/stipsan/ioredis-mock/issues/1103 🎉)
• Bug fix: Trailing slash added to origin API url when making a request causing it to fail for some origin endpoints.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
diode	✅ Ready (Inspect)	Visit Preview	Sep 11, 2022 at 8:51AM (UTC)