better loading times with smaller images for image cards

[jgero]

When loading images for the overview of some image cards requesting and showing the full size images is way overkill and increases loading times. The better option would be to generate 2 images in the cropping function, one "full size" one, and a preview one.

Then it would be possible to request a adequately sized image for the current need in the frontend. Creating different directories in the bucket for raw, full sized and preview versions of the image would also enable more fine grained access rules.

Loading times could be decreased even more by converting images into a better compressible and better suited web-image format.

[jgero]

Have a look at using the sharp library for resizing images in the cloud functions. Sharp also supports WebP, a better format for serving images in the web. An example of how to use it in a firebase cloud function can be found here.

[jgero]

Here is a example from the documentation of sharp on how to convert something to WebP. Together with the resizing example of the previous comment it can be implemented.

[jgero]

Image Magick can do it too, but for some reason 'convert', [tempFilePath, '-quality', '80', '-resize', '800x550^', '-gravity', 'center', tempFilePathConverted]fails.

[jgero]

Or here would be another example of how it could be solved with sharp.