10

I 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?

  • 1
    Use file -> save for web instead and choose png 24 from the list of file formats (JPG is usually default). – AndrewH Feb 23 '15 at 17:42
  • What makes you think a file can be compressed as much as you want? You may want to switch to JPEG and tinker with the Lower Quality settings. – usr2564301 Feb 23 '15 at 18:41
13

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, but aren't using transparency, 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.
  • Use a PNG compressing tool (e.g. https://tinypng.com/). Mind you, these tools use a lossy algorithm. They try to simplify your image in order to be able to save it as a smaller file. They do reduce the size of your file dramatically but the end result might loose too much detail. You can always try them and judge the result depending on the application.

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

  • TinyPNG converts to 8-bit PNG which looks like a GIF. – Hannes Schneidermayer Apr 6 '17 at 11:43
  • @Heanz. True. It converts to 8-bit. But It is not a GIF, though. It supports alpha transparency. In my experience, I have never noticed the difference between the full blown PNG and the one they produce. – cockypup Apr 6 '17 at 17:55
  • @cokcypup For logos that my be true, but for a human face, no way. – Hannes Schneidermayer Apr 9 '17 at 13:45
  • @Heanz i have never used for human faces but I use it regularly for cosmetic packaging photos. I can't tell the difference in those. Still, my comment about alpha is correct. The GIF format does not support alpha transparency. – cockypup Apr 10 '17 at 15:20
2

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.

0

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.

  • Barely noticeable depends heavily on the image you are feeding through the algorithm I've found, use with caution and never overwrite your original file. – PieBie Apr 11 '16 at 20:28
  • Its converting to 8-bit and that looks like a GIF on colorful pics. – Hannes Schneidermayer Apr 6 '17 at 11:44
-1

probably goes without saying, but many people forget to set their resolution at 72 pixels/inch for web assets.

Image>Image size>set resolution to 72 ppi.

  • that has no effect on images used for web, only the size in px – Luciano Mar 1 '17 at 9:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.