Problem

While reviewing many e-commerce sites, I often noticed images of all sorts of sizes. Sometimes the uploader forgets to compress before uploading and ends up pushing a huge image. For users on a slow network, waiting for those images to load drags down page performance and the overall experience.

Solutions for oversized images

There are several ways to deal with oversized image files, such as:

• Validate before upload in the admin panel
• Cloud image storage APIs (e.g. Alibaba Cloud)
• Cloudflare image resize API
• Compress images at webpack bundle time
• Manually compress image files

What is Imageflow

Today I want to introduce Imageflow, which I think is a great open-source image-processing project for .NET. It offers an image-adjustment API similar to Alibaba Cloud's. Through query strings, you can easily handle image format conversion, cropping, and compression. The frontend can pass parameters and have the backend transform the image before uploading it to your image storage. Or when fetching an image back, the query string can automatically deliver the format and size you want.

Open-source project Link Query command reference Link

Usage

Spin up the project, tweak the image's query command, and the image size adjusts accordingly.

<img src="http://localhost:39876/demo_images/u3.jpg?w=300" />

<img src="" srcset="    http://localhost:39876/demo_images/u3.jpg?w=300 300w
                        http://localhost:39876/demo_images/u3.jpg?w=800 800w
                        http://localhost:39876/demo_images/u3.jpg?w=1600 1600w" />

Extended use cases

Responsive thumbnails

1. The user uploads an image to Amazon S3 storage.
2. A client visits your website.
3. Based on the img element's srcset attribute, the browser loads the image at the appropriate resolution.

If you put Cloudflare in front of your Imageflow site, you can cache those dynamically queried images.