JPG vs. PNG Within PlayCanvas

Help & Support
1

Hey all,

Curious about this line here on the optimization guidelines:

In general, prefer JPG format for textures over PNG.

Is this because when compressed, JPG’s are generally smaller or is there some optimization within the engine that makes PlayCanvas prefer JPG’s? I am putting some finishing touches on a project and am seeing some files that could potentially be made into JPG’s but the size difference between JPG and PNG in this case isn’t very large (like 1 KB or so).

Here are the optimization guidelines I am reading from: https://developer.playcanvas.com/en/user-manual/optimization/load-time/

2

That’s correct, yes

If you take the same RAW image and convert to JPEG and PNG, JPEG is more likely to be smaller

I also recommend using https://tinypng.com/ to compress even more with minimal quality loss

3 Likes
3

Okay so if there is not a size difference, there is not a reason to switch to JPG from PNG? The only reason I could even think of is so that the engine wouldn’t have to compute anything on the alpha channel but I’m not sure if that is even true.

Also yes, tinypng is amazing :slight_smile:

4

Another thing to keep in mind with PNG files that include alpha is they occupy more video memory.

So if that alpha channel isn’t used, your app will have higher memory footprint in the case of png files.

1 Like
5

Both JPG and PNG have their pros and cons, but for web-based apps like PlayCanvas, JPG is often preferred for smaller file sizes. If you are not using transparency, converting PNGs to JPG can help optimize load times.

And for reducing image file size you can try https://jpegcompressor.com/ to compress even more without losing quality. This tool supports multiple image formats such as JPEG, JPG, PNG, SVG, and many more.

6

These days webp might be even better option compared to jpg, as for the same quality it’s around 25% smaller, and can optionally store alpha channel too.

1 Like