Dynamic Image resizing for avatars and content images

Currently, we are showing all uploaded images 1:1, which is of course not ideal. To improve performance greatly we should add image resizing to the backend on a dynamic basis. Which means image should be resized and optimized on the fly so that if we define new targeted sizes later we can add them on the fly. If an image is resized and optimized then we need to cache it. My suggestion is a query string based approach as other systems do. This would mean a huge improvement in performance as some of the measurements suggest that we can save up to 95% of our current load size. As soon as we have this base implementation on the backend this gives on the Frontend huge potential to save a lot of performance

Needed features:

  • On the fly resizing to match set container size (so max width or height)
  • On the fly optimizing to same format lossless rendering
  • Support for JPG, JPEG, PNG
  • Query parameters:
    • width and height query string parameters to specify maximum container
    • fm = Fitmode bounds (default) or crops
    • orig=true Will deliver the original uploaded image, Why not deliver it without any parameters? Cause this will help us have
  • Cache files for different sizes
  • Flooding prevention: Preset sizes? (for example avatars can only be resized to 12, 24, 48, 64, etc. those sizes are set on the server side) that fall then back to the nearest defined size in its return
  • I would suggest we start with avatars and then content images (issues, MR's, wikis, etc.)
  • Always keep the original size ratio
  • If the request size is bigger return the original size
  • (Optional/Future) Dynamic WebP support
  • (Optional/Future) Extract first image of GIF's so we can prevent from loading 10MB pixels
  • (Optional/Future) Check Device Pixel Ratio to deliver nice images on High DPI screens

Examples:

/uploads/-/system/user/avatar/1149402/avatar.png

Returns the optimized avatar in original size.

/uploads/-/system/user/avatar/1149402/avatar.png?width=32

Returns the optimized avatar with a maximum width of 32

/uploads/-/system/user/avatar/1149402/avatar.png?width=32&height=32

Returns the optimized avatar with a maximum width of 32 or maximum height of 32

/uploads/-/system/user/avatar/1149402/avatar.png?width=32&height=32&fm=crops

Returns the optimized avatar with a maximum width of 32 or maximum height of 32 by cropping it

/uploads/-/system/user/avatar/1149402/avatar.png?orig=true

Returns the original image

Notes: Example API description of fastly - https://docs.fastly.com/api/imageopto/ This MR just added Graphicsmagick - https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14497

Edited by Tim Zallmann