PNG image quality

Does anyone else have problems with bad quality or blurry PNGs?

See below:

Did you check to make sure the rescale/stretch setting is not the cause?

Use SVG instead of PNG.

Im exporting from photoshop- so i can’t export as SVG that easily :confused:

also the rescale/ stretch is not the cause either.

Hey

SVG is great for logos etc, but for other graphics I always use PNGs

So, I found that using Sketch instead of Photoshop to export graphics solves this.

Even if you pull them into Sketch from Photoshop and just export.
(Obviously only if you’re using vectors or high res assets to begin with.)

Hope that helps
Paul

This didn’t work for me. I still had to export to .svg so that the file was .svg and not .png.

This is easy enough to do in Photoshop - Click the layer > File > Export as > Select .svg

I put the same image side by side one a .png and one a .svg and the .png is blurry, the .svg not.

Here is a .png, a screenshot from my local paper:

PNG
ImagePNG

When I upload the same image here to Bubble Forum it is blurry in the Bubble preview too but when live, it’s much sharper than in my app where it remains blurry in live. Why?

Here is the .png on the left and the .svg on the right. The .svg is definitely better resolution.

(This forum doesn’t allow .svg images probably because of the file size so the side by side screenshot is a .png as well!)

The same .png is sharp and clear in my WordPress. Anyone know why this is the case in Bubble?

.svgs are about a quarter more file size than .pngs so not sure why we have to upload .svgs…

Has anyone been able to find an answer to this? I’m working with a client logo and when I upload it to my editor, the file looks crisp. However, with the width locked when I view the same logo in the live app it’s blurry.

The client has said the current blurry logo won’t work for them, so I’m wondering if there’s a way to improve this?

Hi Brian, I’m now uploading .pngs but creating them at 144dpi and also turning the General Settings > pixel output in Bubble to 2. Now my .pngs are sharp. 3x is also used nowdays - is it on iPhone 8 Plus or X? Not sure…but a trip to the Bubble store to test the X will tell you!

J.

1 Like

i have no pixel output in my general settings