MATT CARLOTTA

fullstack web developer

rusty bucket

Details:

In Orbit
rusty bucket

Description:

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 downsamples/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.

Tech Specs:

  • rust
  • nginx
  • pm2
go back to projects

©2021 matt carlotta