How to cope with images in different sizes

Hi there,

I am working on a project management tool. Projects are displayed in a repeating group as a card.

User can upload a banner image. This is used as card image, but also als banner like a hero image in the project detail page.

I find it difficult to have the banner image being sort of equally displayed in the card and in the detail page.

How do I preserve image quality and proportions in both scenario’s, without compromising to much on performance?

When uploading the image, several plugins are out there to allow for the compression and resizing of images. You could then save multiple versions of the image for different locations.

I personally though, have found that Bubble does a pretty good job scaling down larger images on the fly to be displayed in smaller sizes when needed, especially in the new engine. You might want to experiment and see if whatever the have in the background is sufficient.

1 Like