How do you save a Png for web under 300kb

[taralc1984]

I need to save a transparent png file at 1800px (w) by 1600px (h) and keep it at or under 300kb. I've saved my raw files in photoshop under 300kb and they came out successful. But as soon as I open one it Photoshop and check the image size it jumps in size, and I haven't been able to save anything under 1mb. Please help!!

[Theresa J]

You don't need to open the file in PS to check the size. What does the file size say when you look at in the Finder or Explorer? Are you using the Save for Web option to export the png?

[taralc1984]

Super helpful to know the size shows differently in PS than Bridge because of compression! But, I'm still not able to take an 1800x1600 file to under 300kb. I do use save for web, but it doesn't go below 1mb. I've also tried the tiny png plug in, but it seems to be resizing my images to 900x800.

[gener7]

It could be unwanted metadata coming along for the ride when you use SFW. Have you tried setting the Metadata to None?

[taralc1984]

Actually,  I've just seen where the scaling in the tiny png plug in was set to 50% and after switching it to 100% all seems to be well, coming in just under 300kb. Although I would still love to know how to do this without the use of a plug in.

[Theresa J]

That is really small. Did you try PNG-8?

[taralc1984]

I did try png 8 and the quality of my shadows were terrible, with harsh rings.

[Theresa J]

That's not surprising. PNG 8 is definitely as high a quality, but your image size will be small . I think gener7 made a great suggestion about removing the metadata.

[taralc1984]

My web ready settings have the 'no metedata' box checked. I crop at 1600x1800px at 72 dpi, save for web as a png and then re open the png and run through the tiny png plug in - with all this I can get under 500-400kb but not 300.

[gener7]

Jpeg at 10 quality might be a better option then.

[John Waller]

But as soon as I open one it Photoshop and check the image size it jumps in size, and I haven't been able to save anything under 1mb. Please help!!

Where are you reading the file size in Photoshop?

http://creativepro.com/know-your-photoshop-file-sizes/‌

As Theresa suggests, what is the size on disk in Explorer/Finder?

[taralc1984]

the size is 241kb in bridge, but after retouching and saving a png version in PS it jumps to over 1mb - with saving for web. the site where the images are heading requires uploads to be under 300kb.

[Herbert2001]

One thing to understand about Photoshop's (old) Save For Web function is that it is quite abysmal for proper PNG optimization - especially so for ones which require alpha transparency (for example, a semi-transparent drop shadow). This is a fact - it is that bad. Avoid.

For example, the SFW function does not even allow for indexed transparency - which is the primary method to reduce the file size. However, it depends on the original image whether a reduction to 256 colours will retain the original's visual quality.

The newer export option is not that much better.

Things can be improved by utilizing a number of techniques in Photoshop:

https://www.smashingmagazine.com/2009/07/clever-png-optimization-techniques/

https://www.smashingmagazine.com/2009/07/png-optimization-guide-more-clever-techniques/

However, these techniques generally take too much time in a production environment, and I prefer to export the image as a 32bit full quality transparent PNG, and then use third-party tools to squeeze the last bytes out of my files before upload.

The by far most brilliant tool for PNG optimization (without having to spend to learn command line tools such as these: Best Command Line PNG Tools) is ColorQuantizer. And it is, amazingly enough, FREE!

http://x128.ho.ua/color-quantizer.html

Nothing else can touch it. Unfortunately only available for Windows, but it works under WINE for both Linux and Mac. For Mac users reasonable alternatives are ImagOptim and ImageAlpha.

https://imageoptim.com/

https://pngmini.com/

The powers of ColorQuantizer are many. One excellent feature I will mention here: a quality brush which allows the user to brush over small coloured areas which must be retained during optimization. It's brilliant. It is also the only tool I am aware of that allows for reduction to ANY number of colours if required.

If you wish to stay working within Photoshop, and not depend on external tools, a viable option is PngHat:

Source | PNG Hat

SuperPNG might also be helpful: SuperPNG

Other vendors (like TinyPNG) produce similar plugins, but I really cannot see why anyone would pay for a simple plugin with functionality that can be had for free. At least PngHat offers some neat time-saving features aside from quite good PNG compression.

[mark@headTrix]

You mentioned trying a PNG8 but it gave your shadows harsh rings.... are the shadows the part that are showing the transparency?

If that is the case, PNG 24 is the ONLY setting that would work, but its also by far the largest setting, and not adjustable. Except unchecking "Interlaced could save you a little bit of file size. Is it possible to lower the height and width? The less pixels.... the smaller the file size.

Also Save for Web and Choosing PNG, saves more file size then File>Quick Export as PNG

Lastly, if you are able to use GIF, it work just like a PNG 8, but it also has the option called "lossy" which is the compression that JPEG uses, which throws away some of the pixels to reduce file size. It will degrade of course, but will help you save a little more file size than the PNG8.

Hope you are able to figure out a good solution.

best,

mark

[benjaminhort]

Check your file (the one with the bad shadows) in a browser rather than Photoshop. I don't know why, but photoshop shows the compressed png with a hard shadow, but when opened in a browser they look fine.

[mjbelt]

Try Saving for Web (Legacy)...

Optimize images for PNG-24 in Photoshop Elements