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 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?

2 Likes