Please pick a subcategory to help organize the information. Thanks!
Here’s a demo of the problem:
I’ve used the Image element to upload a 531x566 PNG, but for some reason it still gets compressed and there is the crappy result. On my machine the image looks very crisp and uncompressed.
I’ve tried:
Don’t know if it will help, but have you tried “processed with imgix” and setting 100% quality?
In Settings/General, did you try to put a higher number to the Output density image
https://bubble.io/reference#ApplicationSettings.image_dpr
Also, some img like .svg will be better
The first trick didn’t do it, here’s the result:
Set it all the way to 3.
I will try the SVG trick.
@sudsy
I have neither of those options on the Image element.
This is not in image. Click on the App Setting, Go in General tab and find this option
For SVG you need to convert your image to this type
I tried an online SVG converter, and this is the result when finally attached to the bubble site:
Looks the same in preview.
But it also looks the same in my browser straight from the .svg file. So can you recommend a PNG to SVG converter that would work on this image?
Those options are not in my Settings | General tab.
I tried converting to SVG on two popular sites for doing that, both came up with very bad quality images, the second someone artistic looking, which I kindof like. 
Except people would wonder too much why the image is blurry. Please still help me fix the main issue! Thanks.
Got it converted to SVG. For any wondering, I used this site:
https://www.aconvert.com/image/png-to-svg/
Here is the much cleaner result:
Sorry. didnt see that you tag shot for the image element. This is not in the image element itself but in the “more” options when you select the image source.
SVG is more reliable. And there’s a lot of online converter for image.
That’s really odd, as I wouldn’t have expected a PNG to look worse after upload.
The images are cleaner looking, but that’s only because they are actually “bloated” versions of the original PNG files. Basically, all that site does is base64-encode the original PNG image (which converts the binary data to text), place it in a data url, and then wrap it in an SVG tag. As a result, your images are significantly larger (byte-wise) than they need to be. For instance…
Yellow Screenshot 25.5K (your web page) vs. 7K (optimized 24-bit PNG)
Windows Logo 63.5K (your web page) vs. 10.3K (optimized 24-bit PNG)
Anyway, with regard to Bubble… Unfortunately, what seems to be happening is that PNG images are being converted to JPG, even if the setting is for PNG (which is why your images looked worse after uploading to Bubble).
I don’t know if the issue is with Bubble or Imgix, but it definitely seems like a bug. I tried a number of different things, and the only way I could output a PNG was via an HTML element with an IMG tag. What a pain!
Before I report it, though, does anyone else have any insights?
This topic was automatically closed after 70 days. New replies are no longer allowed.