Project Background
One of the biggest challenges of producing content for fully responsive websites is creating and managing images for multiple breakpoints to support the variety of devices and browsers available to users. Media Content Services (MCS) is both a HTTP image service and application for developers to create proper image URLs for production. High-resolution images are stored in a repository or image library. When an image is requested, the master source is retrieved from the database then cropped, resized and modified as directed by the URL. The service delivers images dynamically in multiple formats including JPEG, WEBP, PNG, GIF & SVG for vector images based on the URL request, user agent information and cookie settings. Although processing and converting images via the service is incredibly fast a caching engine was added to ensure image request were delivered as fast as possible.
Roll
- Conceived
- Architected
- Designed
- Developed
Challenges & Requirements
One of the first design challenges was creating a URL structure that was robust enough to describe complex compositions and transformations while supporting SEO requirements. I also introduced a “micro” functionality that encapsulates common functions into a single word that could be applied the the selected image to reduce the size of the URL and provide a more maintainable codebase.
In order to maintain the library of transformations each function was isolated into separate modules that can be chained together with other functions or actions to easily create complex image transformations. I built the unit test directly into the service so it could be run independently. Given the visual nature of the service it was critical to perform image comparisons to a database of base line images to ensure any changes to the service did not affect any output inadvertently.
Actions & Outcomes
Replacing traditional static image processes with a dynamic media service allows Bank of America to centralize all licensed content into a single database that is searchable and maintainable. The biggest advantage was it significantly reduced development time creating images for all breakpoints or formats and simplified deployment. Custom images could be created on the fly. Search engine image management was also greatly reduced.
Technologies Used
