World is now on Opti ID! Learn more

Stephan Lonntorp
Feb 1, 2018
  588
(0 votes)

Clean and unique media URLs with ImageResizer.NET presets

For a while I've been working on cleaning up the urls generated for images, to ensure that they are clean, cacheable, and preferrably querystring-free. Previously, I have been using IIS URL Rewrites to achieve this, but I have always known there are better ways, but just haven't gotten around to it yet. Better, meaning fewer moving parts, and a drop-in solution.

Yes, I am well aware of the built-in functionality of naming blob properties on media items and tacking on an attribute to get a scaled image, but image optimization is far more than just resizing, and a component like ImageResizer is a really great tool to have in your site. It really is worth the cost.

So, without further ado, here's "UniqueUrlFolderPresets", I didn't know what to name it, but this name is as good as any :)

What does it do?

It takes a media URL, like "/globalassets/my-images/my-image.jpg" and prepends it with a 8 character hash based off of the media item's last saved date. Out of the box, it also adds a max-age header, that caches it for a year. Yes, that's configurable. I know, this isn't a very new concept, but AFAIK no one has done it in conjunction with resizing images. This is the "UniqueUrl" part of the add-on.

The second part, the "FolderPresets" part, has support for imageresizing.net's presets as part of the segments of the URL, as opposed to tacking on an ugly querystring. I've added a couple of really simple UrlHelper extensions to help with generating the URLs, but in essence, if you prepend your image URL with "/optimized/<preset>", it will apply that preset, if it exists, to the image request. If the preset doesn't exist, it'll give you a 404. Yes, the "optimized" part is also configurable.

It should work with any other ImageResizer plugins, but I haven't tested it that much, please help with that. If you have clientcaching configured for imageresizer, this plugin replaces that, so you can remove it.

If there's no hash in the URL, you'll get a 301 redirect to the latest version (hash), and if there's an old hash in the url, you'll also get a 301 redirect.

Hopefully, someone besides me will find this useful. And as usual, I'm open to feedback and suggestions. Use github for that.

There's also a back-port for CMS 10, if you have yet to upgrade, you'll find it here.

Feb 01, 2018

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |