Logo Showing up weird. How to properly handle images?

New to bubble here, and just uploading a logo image png. The image is coming out blurred and just low quality looking. Whats up with this? I even tried to upload a size to match the exact size of the image area, still no dice. Is this just a preview thing for speed?

Heres what I’m seeing.

Any insight would be great!

I just went through figuring out how to improve the quality of uploaded images. The solution for my situation is that I had to convert them from png to svg. Quality went from highly blurred to crystal clear.

For logos and vectors I always use svg. It scales with seamless quality. Normal photos and images should be fine as a png though.

You can change the output density for images in the settings:

Keep in mind that this can slow down your app if you have a lot of images.

Thanks for the responses!

@SerPounce, @lockymadera Great thought I’ll do that.

@Thimo DPR doesn’t seam to affect much on the quality, just the pixel density. Which unfortunately in this case doesn’t to much as the logo is compressed somehow after uploaded.

You can see this here with the image dpr settings set to 3.

Haven’t tried this with larger images but will be interesting to see what happens to the quality.

Have you guys had issues with larger jpegs or pngs?

Hey @Thimo, I’m having the same issue and unfortunately can’t go SVG because of gradients in the logo.

I don’t see the output density option. Is it only available on certain plans?

@getset Bubble has removed that feature and better optimized images overall. You can see this post from @aless here: Where did image output density go in bubble? I

If you are still having problems I think the best thing to do is contact Bubble or file in a bug report

Thanks @Thimo :ok_hand: