Image optimisation

[DavidAJohn]

A photography website is probably going to have to display much larger images than a normal website. Potentially, you could be looking at files that are 15-20Mb or more, depending on the resolution.

My original idea for this application was to create and store multiple versions of the image when it's uploaded, probably by using an Azure function. Then different Blazor components can automatically show the version they need. A masonry grid only needs a small version, whereas the Lightbox component could show a much larger version. The original, full-sized version could be reserved for use only when sending a high resolution version to be printed.

However, that does complicate the storage and the code. You have numerous versions of each file stored. How do you name and organise them? How do you decide which size is used in each component?

An alternative would be to use Imageflow.NET

Imageflow is .NET middleware that allows dynamic image processing. In its simplest form, each image tag would have a querystring parameter added to the 'src' to control the image processing (eg. src="image.jpg?w=500" ), or it could have a 'srcset' that points to the original image, but with added parameters for different sizes.

This would be an important addition to the application before it is used in production.