Hacker News new | ask | show | jobs
by DanielStraight 5906 days ago
I think there's a much more important distinction to be aware of. Namely, that PNG is good at representing graphics while JPG is good at representing photos. A screenshot of my browser while typing this comment is 388 KB in JPG, only 80 KB in PNG. If your image consists of few colors and large areas of solid color, you should always use PNG. The image will probably actually be smaller. If your image is a photo or something photo-like, you should use JPG.

Either way, your master images should be the format you first obtained or created the image in. If the image came from a camera, the master should be the raw camera image. If the image was created in photoshop, the master should be a photoshop file.

2 comments

>> If your image is a photo or something photo-like, you should use JPG.

Keep in mind that many, many things produced by computers these days are photo-like, as the OP demonstrated with the icons, so this might not be the best rule of thumb. No argument that simple images should be PNG, but toss in a couple of gradients (which your HN screenshot does not have) and your PNG can start to blow up.

PNG is extremely good at compressing certain kinds of gradients.

Linear gradients get compressed nearly as well as large areas of flat color. More complicated images, of course, are more difficult to optimize.

Basically, you cannot typically create PNG-optimized graphics automatically (yet). There are a lot of things you can do pre-save to help the compression techniques (and when they won't work, use another format and stitch the two together - at the cost of another HTTP request).

http://www.smashingmagazine.com/2009/07/15/clever-png-optimi... is a pretty good outline of it.

For screenshots and other linear graphics, choosy moms choose GIF.
Not unless you have only 256 colors on your desktop.

Edit: Even if you're OK with indexed color, the indexed PNG will still be smaller.

It usually doesn't matter. If you have photo-like data in your screenshot, you're better off going with the JPEG.

EDIT: You're probably right about the indexed PNG.

I don't have a .jpg optimizer, but a PNG screenshot run through pngcrush has been consistently smaller than a .jpg compressed to the wrong side of tolerable for me.
For still images, why would you ever go with GIF over PNG?
A screenshot of Opera displaying this website gave me a 90 Kilobyte GIF or a 60 Kilobyte PNG, both with 256 colours.