Image Hashing - We Solved a Problem

Can you see it? No, really? Have you pressed Ctrl F5?

Here at Webselect, we thrive on being as innovative as possible, aiming to improve anything affecting us and our clients. Recently, we have had a lot of UX/UI design changes, and noticed a common trend. When changes have been made, sometimes our client’s could not see the change, which is quite a frustrating issue in itself, especially since we could see the change was working across all devices and browsers as part of our pre-release QA. We got together last week and brainstormed the issue; how can we make the browser display the latest CSS and images without the user having to clear their cache or affecting page weight and performance?

We were intentionally caching images and CSS files to save the page loading times and improve overall performance and optimisation. When we were making changes in the past we were reliant on the cache being cleared and the page redraws when it is first loaded. This was sometimes delayed for our clients and their customers so the impact of front end change was not being seen as quickly as we would all like.

Hashing and Caching

To combat this without affecting performance and quality, we turned to the wonderful world of hashing. Yes hashing - the headache inducing, wonderful world that is hashing. Hashing is the process of transforming any given key or a string of characters into another value. This is usually represented by a shorter, fixed-length value or key that makes it easier to find or employ the original string.

By hashing images and CSS files, we can ensure the “style.css” is only called when it is required instead of every style.css all being called as the file “might” be the one that is needed. By creating a hash whenever we make an update and then deleting the old file, it allows us to keep a log of when an update has been made and we can utilise our version control a lot more efficiently. But more importantly it acts similar to caching, as hashing is based on the name of the file, so if that doesn't change in the hashing map then the browser will not have to download a newer version. Genius.

pexels-ds-stories-8099506 (1).jpg

The Nerd Bit :)

We're using the hashing algorithm, which can be used for encryption, but we're using it in another way, to hash the contents of the file, essentially giving us a digital fingerprint. In our build pipeline we're now generating hashes for static assets (css, images) and generating a manifest, which maps the original file names to their hashed versions. If an asset changes, its hash will change which in turn will update the manifest. We have written our own helper for including assets on pages. Instead of the traditional <img src="foo.jpg"> we would now write <img src="@Helpers.Image("foo.jpg")">. This will first check that the manifest is up to date (again using hashing) and then map "foo.jpg" to its hashed counterpart. This would result in something like this: "foo-1adfec9bb23e9dea9f02.jpg". This will get cached as normal by the browser, but if the file is changed then so will its hash, and the browser will be forced to download the new version. This is called 'cache busting'.

Why Did We Bother?

We have had a real kick out of solving this problem, as a software engineering team, being presented with technical problems to overcome is what we live for, it just makes us happy. But there are some real world benefits to this and they all matter.

  • The client is reassured what we have done is ‘there’ - no more “have you cleared your cache” conversations.
  • The customer to the website sees the changes as intended, when intended - all the customers get the same experience.
  • The client gets to realise the benefits of the changes immediately when deployed.
  • Our sites are predominantly e-commerce sites. Products, new lines, out of stock items and sales are updated constantly from the CMS. The client wants this to be available and correct instantly and this is the key benefit. The user experience is consistent and as intended at the moment of publication.

Webselect builds consistently solid, robust e-commerce solutions. We know e-commerce, and support our clients to grow their business online. Our range of products and services can fit any budget and most importantly we can build it around you and your business. Have a niche integration, no problem. If you want to talk to us, reach out, we are a friendly bunch.

You can chat to us by calling 0208 066 1000

[email protected].