Hi all,
For some reason whenever I upload a high res logo or graphic to an image element, despite having fixed width unticked, the image is rendered blurry and rough. It is not the image quality itself as they are very high quality and render on websites fine, but just not in Bubble. It means our logo is blurry and distorted, any idea how to make Bubble just render it properly and not compress or skew it?
Examples:
Original:
Bubble’s render:
Reece
@help are you using Imgix to process it? For logos I always use SVG where possible.
Hey @gregoryjohn
Why SVG? I’m curious.
I always use jpg or PNG and I get the same problem as @help
I will try tomorrow.
Cheers
SVG can scale without losing quality. They are XML based so are tiny. Great for performance.
Just using the standard image uploader in Bubble editor. I’ve converted them all to SVG now and its all good, but I still dont get why Bubble is doing that to png and other image files
I ended up just converting png to SVG for free, I used these unreal tools:
Was so easy
Thanks very much! This is an awesome help!
Any other way to solve this issue?
I don’t have an issue with every image uploaded, just one.
Also this could be a serious problem if we let our users upload images and force them to first convert their images to SVG.
Most of the time, if I change the “Output density of image” in General Settings of app. This is fixed. But sometimes this is not enough so I use :processed with imgx and set the quality to 100. Finally, SVG is my last option if I have issue.
My current output density is 1
What do you usually set it to?
Im also not sure how this would affect my app as the problem is in a group element which has a background style of image…seems like :processed with imgx is not an option for group element background style of image
Most of the time 2 is enough. But not sure if this will fix your case.
