Saving a png file for web

Question

I have a png file (with transparency) that I'd like to minimize its size for web use:

https://www.dropbox.com/s/5f5utt2mttssa5v/submit2.png?dl=0

The size of the file is about 1.44 KB on my Mac's hard drive. I used PS and 'Save for web' option. In the preview of 'Save for Web', it says the optimized size is 582 bytes. After saving it, it is still 1.44 KB.

I wonder why the saved file didn't change in size.

Here is a screenshot of the Save for Web dialog box:

I have to mention that the file is already the optimized version. Even though PS shows it can be downed to 582 bytes, I guess you cannot optimize an optimized image?. Any other tools I can use to further optimize?

P.S. Here is the original image, which is only 456 B:

https://www.dropbox.com/s/kh3x7r98syhrvq6/submit.png?dl=0

I modified the color a little and saved for web which resulted in a 1.44 KB file for some reason...

---

UPDATE:

Thanks to Simon White's answer. I did a little experiment:

|           Metadata          | Convert to sRGB | File Size |
|-----------------------------|-----------------|-----------|
| Copyright and contact info  |      Check      |   1474 B  |
| Copyright and contact info  |     UnCheck     |   1474 B  |
|             None            |      Check      |    582 B  | <-- PS's prediction
|             None            |     Uncheck     |    572 B  |

Observation:

1. When Metadata is selected, Convert to sRGB does not affect the final file size (at least not to the file I experimented with)
2. PS's prediction about the file size is based on Metadata set to None and Convert to sRGB checked
3. Convert to sRGB does have an impact on the file size when Metadata is set to None

Answer 1

There are a few things this could be.

You are embedding “Copyright and Contact info” metadata in the file. That metadata may be the source of the extra file size that you are looking for. If you want the smallest file size, do not embed any metadata.

You may be writing the metadata twice when you re-optimize. There is no point in optimizing a file that has already been optimized. What you should do is work in a master document in your editor’s native format and then you use Save for Web to export the smallest possible PNG, and you store the native document for future editing and put the PNG on the Web. The PNG you export should not be opened again for editing, it is for viewing only.

Once you have opened up your native document and exported a PNG without the metadata, you should not necessarily trust Finder to give you the right file size measurement. The 1.44 kb could include Finder metadata. If you are making a 10 megabyte file you might not notice the Finder metadata, but at the tiny size you are working at, it could be a factor. The better way to test the actual size of your file is to put it on a Web server (or possibly Dropbox) and see what the Web server says the file size is. On a Web server, it will just be the raw file, no additional Mac metadata.

Another thing to keep in mind is that there is an old way of measuring file size where a kilobyte was equal to 1024 bytes, and there is a newer standardized new way of measuring files, where a kilobyte is equal to 1000 bytes. If Photoshop is using one system and Finder (or another app) is using the other, you can see file size discrepancies. At the tiny size you are working at, the extra 24 bytes or missing 24 bytes can make a difference. That could be the discrepancy between the 456 and 582 byte files.

Also — unrelated — when you save something for the Web, you should always check “Convert to sRGB” which is the standardized RGB color space. Your PNG will be assumed to be in the sRGB color space by Web browsers and other PNG renderers. If you don’t convert to sRGB your colors will be off.

Answer 2

I have found using an additional compression tool after saving for the web to be effective. Often results will be 20% to as much as 80% lighter than straight from Photoshop.

https://imageoptim.com/

(No affiliation, just a happy user!)