High-resolution / 'Retina' images by implementing Imgix's DPR

Hi guys!

So, I have a idea (well, more a feature request) of which I hope would be useful to more of you:

When you (our your app users) upload an image (JPG or PNG, not talking about SVG’s of course) in Bubble, they don’t look sharp on devices with high-density displays such as MacBooks, 4K/5K monitors and smartphones (!!).

I just saw Imgix has an option called DPR which solves exactly this. Having the option to set the DPR to 2 in Bubble would be really, really great.

@emmanuel Is this something you would consider adding to Bubble?

Thanks!

2 Likes

Would you make this an app-wide setting?

I second the need for native support of 2x images in bubble. I often end up having to upload most of my images to a google cloud bucket in order to achieve crisp looking images, which is a real pain.

Thanks for the quick reply! :slight_smile:

Yeah, that would definitely be the best solution I think. (Since you’d typically want all (or none) of your images to be ‘retina ready’.)

Based on the latest release note, looks like this has been implemented. Nice!

When setting the app DPR to 2, do we need to reupload any images or deploy? Would be awesome to get a brief explainer.

You shouldn’t have to do anything, except changing the DPR. It’s quite easy to test if you’re not happy with an image

3 Likes

Thanks for the quick implementation Emmanuel, really happy with this! Images look super sharp now!

1 Like

Where do I toggle this setting? Cant seem to locate it…

In your app settings, under General > General Appearance. There you should see an option called ‘Output density of images’. :slight_smile:

1 Like

I have been trying to find some answers in the forum but can’t find more info here or in the reference. You are writing in the thread that we don’t have to reupload any images to set DPR to 2. Of course this will work but will it look good? What I understand an image that is 100 x100 px in DPR 1 should be 200 x 200 px in DPR 2 to be sharp. What I understand from the imgix documentation, imgix will reduce the file size to DPR 1 devices automatically. Is this also implemented in Bubble? Great if someone would clarify this. Thanks! :slightly_smiling_face:

1 Like

If you (or your users) uploaded images in high resolution before, your images will still look good when you turn the DPR from 1 to 4 for example. (the original image will just be resized again to the new, bigger size).

imgix will reduce the file size to DPR 1 devices automatically

I don’t have a device to test this on – but I don’t think Bubble implemented this.

1 Like