Where did image output density go in bubble? I

I am trying to adjust the image density in bubble, but the option is gone under the settings? Anyone know what gives or if it was moved?

1 Like

anybody figured out what happen @emmanuel

Hi ryan8,
we recently dropped this setting because we embedded its core functionality into bubble without needing user input.

Images are parsed and resized by our CDN processor, Imgix, in order to load them at roughly the same pixel size as the canvas needed it (optimizing quality versus loading speed).

Because phones, then computers, started using sharper screens for the same layout format as before, the web standard became to ‘pretend’ screens had fewer pixels than they actually did, and kept a rough measure so that a ‘phone’ layout meant roughly 300-400px width, a ‘desktop’ 1400+px, etc, while true resolution would be some multiplying factors of that.

This meant that while text would be sharper on these higher density displays, images going through our processor would be loaded at smaller sizes, negating the benefits of having sharper, ‘retina’ displays.

The workaround for this being to force our processor to load higher resolution images, we used to offer a setting that would allow to unconditionally load images at a different factor of the canvas size - say 2x or 3x. This would essentially mean that you would always get the same, sharper image if you wanted to.

There were several drawbacks to this - you would need to choose between getting a uselessly large image on lower density displays like desktops, and having a lower resolution picture on phones that would not look as crisp as possible.

Therefore, we moved to a newer way to capture the information about the ‘true device pixel density factor’ which depends on every device (it’s approximately 3.5x on Galaxy phones, it’s 2x on retina Macbooks, it’s often 1.5 by default on a lot of Windows laptops…) and use that as a basis to choose the best image resolution to use. This way, images will always be as sharp as they need to be when they go through imgix and you won’t lose any unnecessary bandwidth loading larger images.

I hope this improves the experience on your Bubble app, and make sure to report to us if you experience any issues with this!

Best,
Aless

1 Like

oh okay… awesome thanks. Yea it use to make fuzzy images on devices like phones without knocking it up to atleast 2. But yes thats great.

1 Like

Hey @aless, I unfortunately can’t use an SVG logo due to gradients. I’ve uploaded a 2x size png, but it looks really bad. Image and link below. Any ideas?

Slinky Symbol

Hi, this looks like the gradient is being badly compressed by imgix. In this case, I can suggest you try bypassing imgix compression altogether by appending &ignore_imgix=true to the source url of your logo.

That will negate any benefits of dynamic resizing and smaller assets, but for a small logo like yours that can be a better outcome.
Best,
Aless

Thanks @aless, I tried that, but it broke the image link. Am I doing it in the right place:

image

Thanks again

looks like probably an artifact, verified this is working in your case.

Thanks @aless :ok_hand:

Hi @aless, I’m having the same issue and tried appending to the URL and got the same result. I didn’t understand your response “looks like probably an artifact, verified this is working in your case”. How was the issue fixed?

In that previous case, there may have been a typo or a one-off error in the editor (probably in the cache) that caused the preview to be broken - and by the time I looked at the app in question it had resolved itself. I that is the case for you, try checking the Runmode preview to see if this is actually broken, or just in the editor, and try refreshing the editor if that is the case. Otherwise, make sure there is no error in the url, pasting the link directly in a chrome URL (without the // at the beinning) should be able to bring up the image

ok. thanks. Unfortunately none of those things worked. In the browser i get an access denied message. Tried refresh, copy in to browser without //. The error also appeared in runmode preview.

Hi @aless, I have the same issue, I’ve added ignore_imgix=true next to my file and refreshed the editor. My image is not loading in the editor or preview mode

image

This topic was automatically closed after 70 days. New replies are no longer allowed.