rusty bucket

Window aspect ratios vary from device to device, therefore serving a 3840×2160 pixel image to a 640x480 client viewport is a waste of bandwidth and may result in image distortion or extremely large client windows. However, utilizing a HTML picture element or an image src-set attribute, the browser can dynamically choose which image to load based upon the client's viewport.

This custom built API aims to utilize the above by offering on-the-fly image manipulation. By requesting an image with some additional URL queries, the API interprets the provided queries and down-samples and/or converts the image at request time.

All unique image requests are then stored into a LRU cache on initial request; therefore, any subsequent requests will be served an encoded image from this cache instead of reading/encoding the file from disk. As a result, creating dynamically resized images can be viewed in milliseconds! No more wasted bandwidth serving large images to the client; meanwhile, the client downloads and views an optimized resolution for their view port!

To visualize how the API works, take a look at this flow chart which breaks down the client to API interaction.