How to Reduce the size of a .png with in PS for web

Question

I currently have a .png file that is 2042 x 1250 and is 6.1 MB. When I open with photoshop, and do Save As-> PNG 24, and choose the compressed file size of the two options (the other being no compression) I still get an image that is on the order of a few MB, which, since it is going to be a web asset, I would like to be in the KB and not the MB's. How do I go about intelligently compressing this image to a ballpark range of a few thousand KB? Thank you!

Answer 1

The geeky details (you did not ask for)

Some image formats, such as JPG, support Lossy Compression. When a Lossy Compressed image is saved and then rendered back, the image is not 100% exactly as you designed it but just "close" to it, sort of a sketch. Some of the original detail is lost. Since there is no expectation of accuracy, the Lossy Compressed images have the luxury of storing little information about the original design, resulting in small files. They even allow you to specify how accurate the result should be: the less accurate the result needs to be, the smaller the file is.

On the other hand the PNG format, by design, supports Lossless Compression. This means that after the image is saved in a file, when it is rendered back all the pixels are rendered exactly as you designed them without losing any detail. This is great, but unfortunately it means that it has to store a lot of information to render the image perfectly, resulting on big files.

The PNG does its intelligent thing to optimize the information it needs before saving it into a file but you cannot specify, like you do with JPGs, how compressed or accurate you want the file to be. The result is as is and you have no control on how big the file will be.

Some suggestions

Having said that, there are a few things you could do to try to get a smaller file.

• Big areas of flat colours compress better than complex patterned areas. See if you can simplify your image.
• Do you have a lot of negative space around the image? Try to trim it down to a minimum.
• Are you using transparency? If not, consider saving the image as a JPG instead.
• If you can't save it as a JPG for any reason then untick "transparency" from the saving options. This will shave a bit of bites from your final result.
• Consider cutting the image in parts and composing it in the final HTML, like some sort of puzzle. You could save the parts that require transparency as PNGs and the other parts as highly compressed JPGs. The total result should be less heavy.

If you share your image, I can give you some suggestions.

Answer 2

A 6.1MB PNG is far from the KBs range, so Cokypup's suggestions would would best.

For other PNGs you may create, the best way to save them out for web use to be save in Photoshop with "Save for Web" rather than "Save As". Photoshop's "Save for Web" does some optimization that'll dramatically reduce file size.

Then I would follow that up using a compression tool for PNGs such as Tiny PNG
Tiny PNG uses a lossy compression like you would when saving out a JPG. It dramatically reduces the file size, and as you can see through the example on the site, the lossy compression it performs is barely noticeable.

Answer 3

Try adding a Posterize adjustment layer to the image and reduce the number of colors. I find you can still retain high quality and reduce the file size through this method.