JPG vs PNG performance question

[martis]

Hey all,

 

If I have image assets that do not have transparency, which will perform better in the browser, JPG or PNG?

 

Thanks!

[GreenSock]

I'm pretty sure that the only difference is "unpacking" the pixels. Either way, the browser has to grab all those pixels and get them on the screen. The format is just a delivery mechanism to get it through the Internet pipes to the browser So at runtime, it shouldn't make any difference at all. Perhaps one format is slightly faster than the other to decompress but I'd be shocked if it were noticeable in the real-world. 

 

But if you're comparing JPG/PNG to SVG, then SVG is definitely slower for the browser to render. The GPU can keep a raster image and shove pixels around very easily - with SVG, the pixels need to be fabricated on-the-fly whenever resizing/movement occurs (typically at least). 

[ajhalls]

Be interesting to look into BPG as a format

http://bellard.org/bpg/

[Jonathan]

Hello ajhalls,

 

Since the type of image doesn't make that much of a difference as far as performance. That is why I always opt to use PNG-32, since PNG-32 supports full transparency and because PNG is a lossless image format and can have really small file sizes. So when you need transparency that will allow full anti-aliasing on edges within the image, and is lossless for great quality. PNG is awesome, especially PNG-32. JPEG is a lossy image format and will lose quality on each save.

• PNG-8 and PNG-16 can replace GIF since its just index transparency (on or off)
• PNG-24 can replace JPEG so you get a lossless image file type, which also supports index transparency (on of off)
• PNG-32 gives you full transparency (alpha channel) so edges are clean and anti-aliased

For example in Photoshop when you choose PNG-24 and check the box for transparency. You are telling Photoshop to save as a PNG-32. Adobe Firefox will actually give you the option for PNG-32.

 

So since there is really no noticeable difference as far as performance i opt to use the PNG-32 image format. Plus PNG is lossless and can be re-saved and re-optimized without losing quality. TinyPNG.com is a great website for optimizing PNG file size and keeping quality. Plus they also have a Photoshop plugin for TinyPNG.

 

http://tinypng.com/

 

The only thing is BPG does not support full transparency alpha channel. But could be used as a replacement for JPEG, but i usually choose PNG-24 for that.

 

Happy Tweening!

[martis]

Thanks guys, appreciate the responses as usual!