StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>PNG</strong> should be used when:</p> <ul> <li>You need transparency (either 1-bit or alpha transparency)</li> <li>Lossless compression will work well (such as for a chart or logo, or computer generated image)</li> </ul> <p><strong>JPEG</strong> should be used when:</p> <ul> <li>Lossless compression will not work well (such as a photograph)</li> </ul> <p><strong>GIF</strong> should be when:</p> <ul> <li>PNG is not available, such as on very old software or browsers</li> <li>Animation is necessary</li> </ul> <p>Despite myths to the contrary, PNG outperforms GIF in most aspects. PNG is capable of every image mode of GIF apart from animation, and when using the same image mode, PNG will have better compression due to its superior DEFLATE algorithm compared to LZW. PNG is also capable of additional modes that GIF cannot do, such as 24 bit color, and alpha transparency, but this is where you need to be careful: if you forget to convert to palette mode your PNG image may be saved in 24 bit color which will take more space.</p> <p>PNG modes include (this is just a small subset)</p> <ul> <li>Palette colour of 2 to 256 colors (like GIF)</li> <li>Palette colour of 2 to 256 colors, with transparent color (like GIF)</li> <li>True color (24 bit color)</li> <li>True color with alpha channel (24 bit color + 8 bit alpha transparency)</li> </ul> <p>For best compression in PNG for the web, use a palette mode. If you find PNG files are larger than the equivalent GIF files, then you're saving the PNG in 24 bit color and the GIF in palette mode (because a GIF is always in palette mode). Try converting to palette mode first.</p> <p>PNG also has other modes such as palette color with alpha transparency. Modes such as this cannot be created in Photoshop, but other applications can create them.</p> <p><em>Edit 2013: Removed a bunch of stuff about IE6 compatibility.</em></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload