Organization of cropping images on the fly and their optimal and scalable storage

  1. What if the same picture is needed in different sizes, different quality and different formats for each device?
  2. Where and how to store pictures so that it could be advantageous and cheap?
  3. How using nginx and backend logic organize the efficient preparation and storage of images for different devices and formats?
Photo from the presentation on this topic at BIF2019

Having made a lot of mistakes, we came to a solution that we are actively and successfully using in current production projects.

As an example, I consider the implementation of an extensible file storage on the backend and the example of integration with this storage on the JS side of the Vue + Nuxt.JS framework.