What it does
Imccelerate intercepts all GET requests and inspects them for known image types. If imccelerate detects a request for an image, it will then scale the image appropriately based on the users screen size and screen density. Then, the resulting image is dropped into an LRU cache to let others with the same screen resolution enjoy a massive speed boost in page loading, up to 90% faster with 90% less bandwidth in some of our tests. Furthermore, imccelerate features a proper image sizing system. Why request a massive, 3x page filling image if its just for a thumbnail? We took a cue from Bootstrap and added a variety of sizes ranging from extra small to extra large. These sizes can seamlessly be appended to each image request. Even better, some of our sizes (including a custom profile image size) feature vision logic from Microsoft Oxford. Finally, we attempted to solve one last issue. What happens if a site comes under heavy load and still needs to deliver lots of content? To attempt to solve this, we built a dynamic CDN offloading system. If an image resource becomes too heavily requested to continue its successful delivery, imccelerate will offload the image to Azures high powered content delivery network and seamlessly move clients to it, all without any interruption in service.
How We built it
We used the Express middleware model to intercept and filter GET requests. Once we were sure we had an image, we used Graphicsmagick to process the image and send it for further processing with Oxford if needed. Once we had our image in the form of a buffer, we dropped it (along with a few other pieces of statistical information) into a least recently used cache. The cache takes care of dropping resources that are infrequently queried, while keeping those that are fresh. We then send out the processed image to any future clients with the same resolution and device display density.
Challenges We ran into
Configuring the live offload CDN was particularly difficult as the documentation pertinent to storage services with Node was a bit lacking.
Accomplishments that We’re proud of
We were able to built something that reduces the required image bandwidth up to 90%. 90%! That's incredible! Using this technology a site could go from slow and blurry to speedy and sharp in a matter of minutes. Furthermore, imccelerate could enable easier development, as all image sizes originate from one resource. No need to design 15 images for 300 different screens.
What We learned
We learned a ton about Azure, network performance monitoring and Express middleware. Also learned how to use GraphicsMagick, an awesome image manipulation library.
What's next for imccelerate
We'd like to make imccelerate more stable and efficient in the future, as well as to incorporate a dynamic quality algorithm to save just a bit more bandwidth. At some point, we'd like to be able to achieve a 95% reduction in bandwidth over our raw images.