Better image handling (2): Have an automatic scaling process

I want to propose two significant changes in terms of image handling, that will vastly improve the performance, cost-effectiveness and userfriendliness of the platform

1. Make it possible to reuse images and assets
2. Have an automatic scaling process

Have an automatic scaling process

(I’m using the example of badges, but this also works for other images and assets on inSided.) On inSided, you can upload images and assets with upto 5MB filesize. And every time this image is needed in the frontend, it is being loaded in its original filesize, no matter what image dimensions the image is being displayed in. So for example, you can upload badges with image dimensions of 480x480px that are 2MB large.

• So every single time any user opens a topic and any of the commenters has earned any of the badges, a 2MB large badge image will load and be displayed with 20x20px image dimensions. If you have a topic with several users that have earned badges, you can multiply the 2MB by the number of users.
• The same happens on user profile pages or in the leaderboard (only with slightly larger image dimensions).

There is no need at all to load an image in its original image dimensions and its original file size, only to scale it down to a smaller width and height afterwards. This is very costly on a performance level and it increases loading times immensely.

Therefore, I propose that scaling should take place before the image is being loaded. It is known in what image dimensions the most common assets are being displayed in (badges, hero banner, category icons, etc.). So when an asset is being uploaded, inSided should then automatically create copies of these assets in the needed image dimensions. So when a 20x20px image is being displayed, only the 20x20px image with less than 100kb filesize should be loaded instead of the original file.

In combination with making it possible to reusing images and assets, both new features will have a great positive impact on loading times and therefore on userfriendliness. Also, it saves (AWS) costs having a smaller page load.