Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

PNG is a lossless format. It is compressed and heaps better than BMP, but it has its uses for small or exact assets like ui elements and not for photorealistic renders or actual photos. If you transform a png of a rendered master image  into jpg you can go down orders of magnitude in file size. While you can go down like x3 or x4 from BMP to PNG, you can go down another x5 to x20 from PNG to JPG.

For jpg specifically, just try it out. Make a row of sample pictures of your content and since the compression in jpg is given as a number up to 100, just make a 100, a 95, a 90 ... and so on. Then mix in your original and see for yourself how small you can go, until you notice and how far you can go even further till you care. jpg is *very* good at compressing natural looking stuff or stuff that was made to look like it might be natural. Pixelart and comics/anime are unnatural in this context. (note, 100 is not lossless, but even this placebo setting can be half as big as a png)

WebP is available in lossless and lossy, so depending on the content of the image, the same rules applay. Pixel heroes -> lossless. Photorealistically rendered heroes -> lossy.

In other words, there do be reasons, why your digital camera stores those ZillionMegalPixel Pictures in jpg. That is the format you want for stuff that looks like real things. For stuff that looks like my little pony animation with big same color areas and sharp lines you might get away with lossless compression, as this compresses fantastical and you do not want to be fuzzy around the sharp edges, and for pixel graphics, you want to keep the pixels intact, so lossy is bad for those.

Just try out with different samples of your images what is efficient.

Keep in mind that Jpg doesn't support transparency. For sprites in a more lightweight engine like Ren Py, PNG's are the only choice. In my game, I have been impressed with the WebM format - I have lots of 5-10 second videos that are very decent looking at high resolution, and actually take up less space than a PNG still image with a smaller resolution. As long as you don't have a lot of moving particles, it's practically magic. Example: 3520x1152 (extra horizontal resolution is for alpha layer) 30fps 5 second video compressed with WebM at Quality setting 80 - takes up 815kb, since the black background is not rendered. Original PNG still (with half the width) is around 1,5MB.

Keep in mind that Jpg doesn't support transparency.

webp does. Lossy and lossless.

There are claims that jpg is better at compression factor 90 and above and webp at compression 70 and below and inbetween there is little difference, but there seem to be differences based on the content of the image, so quality comparison is very hard and biased. Natural stuff seems to look better in jpg and straight lines better in webp.

So there might be situation where one would prefer jpg over lossy webp. But png is always loses by orders of magnitude, unless you need pixel accuracy. And even then, it typically loses against lossless webp.

and actually take up less space than a PNG still image with a smaller resolution

Which shows precisly the problem with a lossless image format. You can have an animation for the same space  ;-)

Thank you for pointing out overlay technique. It has many benefits and also the welcome side effect of reducing size.

Keep in mind that Jpg doesn't support transparency.

webp does. Lossy and lossless.

- Ah, I think you're right. I ran into some issues with that since Renpy doesn't support it without the workaround I mentioned.

Good article :)