Locking down dynamic image resizing

How many image sizes is enough?

One of the questions that always comes up when building websites is "What resolution and sizes do the images need to be uploaded as?". The answer is usually to do with how many different ways the image is to be displayed on the site. There can be full scale, medium scale and thumbnails depending on what page you are looking at.

A normal image URL would be:
<img src="/images/full-scale.png" alt="">

It would render the image to its full size. If you wanted to have another version normally you would then have to have:
<img src="/images/medium-scale.png" alt="">

Multiple versions of the image are required for each resolution on the site. What then if another resolution is required for a new feature? You then have to update your CMS with the new resolution field and upload all the new files to go with it. Very tedious.

To get around this you can use .NET and set up a HTTPHandler that accepts the name of the image and resolution you would like it to be. One example would be:
<img src="/imagePreview.ashx?url=/images/full-scale.png&w=150&h=100" alt="">

The idea here is that your HTTPHandler imagePreview.ashx will intercept the request, do some magic that we won't get into here and then return the same image resized to 150 width by 100 height in pixels. The benefit of all this is that you can now take that single image and send it any width and height values to return a resized, cropped or water marked image depending on what you want your HTTPHandler to do. The image is then stored on the file system and cached so it is only created once. But there is a risk.

Secure your resizing

Using the above method there is nothing preventing someone with some know-how and a bit of malevolence from spamming you site with infinite requests for the same image at any resolution. Using the above resize URL it would be easy to put together a application that runs a loop to generate thumbnails of all resolutions from 1x1 to 1,000,000 x 1,000,000 pixels. This is done by changing the w and h values of the query string above to:

<img src="/imagePreview.ashx?url=/images/full-scale.png&w=1&h=1" alt="">
... some looping code here ...
<img src="/imagePreview.ashx?url=/images/full-scale.png&w=1000000&h=1000000" alt="">

So how do you lock this down? The easiest way is to add a series of allowed resolutions to either your CMS or your web.config file. To allow only 100x150 and 250x150 resolutions you could use in the web.config:
<add key="ImageResizes" value="100x150,250x150"/>

The HTTPHandler then does a check against each request to see if the supplied w and h values match the allowed resolutions. If the values do not match then no resize is done and you can return a 'nice try' message to the user.

By setting up enough configuration values along the way it is easy to have clients upload only single high-resolution images which can then be sized down for all sections of the site without having to create new images and update CMS settings. All the work is then done at the HTTPHandler which creates the images as they are needed and no clarity is lost. By locking down the resolutions it also ensures no one can find a loop hole in your method to exploit and bloat the file system

Happy Coding.