Our client demonstrated a need to deliver images at varying sizes for various platforms. Of course, this needed to be fast and easy. We built an image service to deliver optimized image files at any size on the fly using a simple url! Our solution is fast, efficient and seamless.

The Problem

The client has a lot of images on their site primarily displayed in sliders. They wanted to speed up their page loads. One simple solution is to use a CDN. That was the initial solution that was deployed in the first iteration. Later as we guided the client, the requirements were updated. They now determined that their images should be served at various sizes to conform nicely to various viewports. For example, a mobile app that runs on an iPhone SE has a smaller viewport than a 12.9 inch iPad Pro or a website displayed on a desktop computer. With the proper solution a smaller image can be sent to the devices and situations that do not require larger images. This also helps load speed especially on devices with a more limited bandwidth. The client also needed to create certain specific sized images to be distributed to other channels. Finally, they had a need for branding some of the images with their watermark.

The Solution

We designed and architected a fantastic solution that satisfied all the requirements of the project and then some. We guided the client all along the way as we wrote the specification and agreed upon the deliverables. Some of what was delivered:

  • Overlay branding
  • On the fly processing including sizing
  • Multiple ways for retrieval of sized and optimized images including the API we developed for the same client
  • Auto sizing and branding on upload
  • Upload and configuration made part of enterprise application they were already using
  • Cache control
  • Image optimizer and options
  • Iterator and options. Add any header or meta tags after the fact when or as needed
  • Used on multiple websites and so far in one mobile app with more in the pipeline
  • URI to the image can be used as the src attribute of any img tag.
  • CDN support

As we worked through the solution we determined that we could provide the functionality that was needed and also be able to reuse the code in other ways. We created several components including creating default images and sizes per specification, a getImage function to resize on the fly, an image optimizer that can be requested but that also functions automatically when images are uploaded. We have applied the optimization to numerous places in the client’s various systems. and we designed and developed an iterator that is used to iterate objects and apply tags or header or just about anything else that is passed to it. So, in the end the client came away with four products in one solution. They are very happy!

Let’s get started on your next project together!