: How to get images' filesizes as low as possible? I usually use photoshop's save for web and devices, but it has no options for compressing pngs and I also wonder if there are superior compression

@Chiappetta793

Just wanted to add that, in addition to some of the answers already given, Yahoo! has a tool called Smushit that can shave off some bytes. It's very easy to use.

Vote Up Vote Down

@Kristi927

I usually use photoshop's save for web and devices, but it has no options for compressing pngs and I also wonder if there are superior compression algorithms available?


Firstly, should you be using PNG or JPEG?

If you are saving an image for the web, these days the choice is between PNG and JPEG. PNG is very good for images that will losslessly compress very efficiently. JPEG is good for the rest.

As a general rule of thumb, if it's a photo or a complex rendering (completely textured) and it's bigger than around 60x60 then a JPEG is likely to be better.

Remember too that JPEG has a sliding quality scale which affects how good it will look while PNG doesn't.

How to optimise PNGs

Unlike GIFs, PNGs support 24-bit images. This has caused a great deal of confusion, with confused people claiming that PNG images take up a lot more space than the same image saved as GIF. This is mainly due to people not realising that it's down-coverting to 256 colours when saving to GIF while they are preserving the full 24-bit colour data in the PNG.

In PNG however, you can reduce the colours to a palette just like GIF and this will make the image file size much smaller.

Photoshop's save for web does have options for compressing PNGs

For the majority of scenarios where PNG is suitable, you want to use a colour palette. You'll get great compression just by selecting 256 colours and using the default algorithms for picking the colour palette. Photoshop's "Save for Web" makes this easy. Just select PNG-8 instead of PNG-24 and start with the defaults.

You may not think of this as "compression", but it is reducing the quality of the image in order to get a smaller file size - it's just a different approach.

If you have a very simple image or a very small icon you can then decrease the number of colours further to get better compression. Every time you get down by a power of two you'll give it a little bump in compression efficiency, so 128 is a bit better than 129-255, 64 is a bit better than 65-127, and so on. So try 256, 128, 64, 32, and 16.

Vote Up Vote Down

@Voss6371140

If the target file type is PNG, then you have a few options. First, open the PNG in Fireworks then save optimized. FW compreses .png files better than PS. Then use PNGOUT(freeware) to compress further. Typical result is about 30% less than what Photoshop would produce.

Vote Up Vote Down

@Cooney243

My approach is not very technical so i cannot give any specific algorithms but Adobe Fireworks is one of the best tools to optimize any image format for web. You can use it.

Also ImageOptim works good on OSX. Same results with fireworks, i compared them.

Vote Up Vote Down