Why are JPGs and PNGs blurry in Bubble? SVG file size makes site 7s to download

[sudsy]

@cowontherun

Why does Bubble force me to use an SVG?

Not sure what you mean by “force” you to use SVG, but it might be related to this…

Uploaded image gets compressed then displayed?

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…

@cowontherun

and make PNGs/JPGs blurry?

Because they’re automatically converted to JPG, and there’s apparently no control over the output format or compression level. I’ve noted the issue here…

Uploaded PNG images without transparency are converted to JPG

After looking closer at this issue, I learned that PNG images without an alpha channel (no transparency) are converted to JPG. This can easily be seen with my demo page. Both sets of images were PNG on upload, but the ones with the white background were converted to JPG. (Confirm by checking the page with browser dev tools.) This is especially problematic when already-optimized PNG images having fine detail (screenshots with small text, for instance) are uploaded. The degradation in quality is…

It’s a pain of a work-around, but you can bypass Imgix and reference the “master” file directly on Amazon S3 by inserting an IMG tag using a Bubble HTML element.

I’ve not yet reported this as a bug, but it probably should be.