Search code examples
opengl-esformatwebglimage-formats

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


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.


Solution

  • 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.