for opengl (webgl) is png or jpeg the most suitable file format?

Question

on opengl (webgl more specifically) for textures, which format between jpeg and png would be recommended as more efficient at runtime rendering? I understand jpeg can be smaller than PNG, but perhaps decoding can be more costly, or otherwise.

Answer 1

Well decoding a JPEG happens really fast, you would need to use thousands (or hundreds maybe if you are on mobile) of high resolution JPEGs to see a substantial hit on the performance. As your plattform is web I would recommend JPEG, depending on what kind of textures you have it would be the most size/quality efficent format that is supported on all browsers (webp being a good but not well supported alternative).

If your textures are more graphical or cartoon like, meaning they have a lot of sharp and fine edges and a lot of single color areas I would recommend PNG, hard and fine edges can get very smudgy with medium-high JPEG compression.

PNG does lossless compression. Specially with cartoon like content (meaning very few colors and details compared to a photo) you will get a similar size of a well compressed JPEG but with better visual results and in some cases even better compression.

Answer 2

Paul's answer is correct in terms of file size and decoding, but it doesn't really answer the question you asked.

which format between jpeg and png would be recommended as more efficient at runtime rendering?

Since the question is which is more efficient during rendering, the answer changes a little. Both JPEG and PNG are uploaded to the GPU as uncompressed RGB/A data, and as such the rendering characteristics of the two is exactly the same. I've also done some tests that show that the upload speed of the two is effectively the same. As such, your choice should have nothing to do with the rendering performance but instead which format has the traits you need. (Lossy/lossless, alpha channel, etc)

Answer 3

Each format has different uses.

JPEG: Small, lossy. RGB only

PNG: Lossless, 4 channels (RGBA)

In general you should probably use JPEGs where you can because you can make them very small. Simple color textures are great for JPEG.

PNG has multiple uses though

1. You want an alpha channel on top of your RGB colors.

   You can only do this with PNG currently

2. You need lossless compression

   If you are making a font or some other very vector like or 8bit pixel like art you probably want to use PNG

3. You want something other than color data. For example a normal map, height map, a reflection map, an opacity map, a lightmap or some combination of those in the same texture.

   While you might be able to do some of these things with JPEG, JPEG was designed for images that are viewed by humans. That means its compression is specifically designed around what human eyes can see well and what they can't see well. For example JPEG compresses color more than luminance. I'm guessing it also compresses red more than green. So JPEG is generally not good at compressing non-visual data

   So, in these cases you probably want to use PNG.

NOTE: You also have the option of loading data directly into WebGL textures using an ArrayBuffer. You can download ArrayBuffers directly with XMLHttpRequest. This means you can make up your own formats or use other formats that might fit your needs better than JPEG or PNG.

One example is Crunch