4

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:

enter image description here

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
  • 3
    Excuse me but isn't 1.44 KB small enough? – Alin Feb 29 '16 at 7:32
  • Why would it be? I regularly use image files that are under 200 bytes (at which point it makes sense to base64 'em directly into CSS files and save requests while still getting cache). – Stan Rogers Feb 29 '16 at 7:35
  • Can you show us the Information box for the file? The computer could be rounding it up to a minimum file size. It could also be a file cache on the Mac that doesn't reset in case you the original with the exported, often happens to me. Make sure you are creating a new instance of the file when exporting from web. – MicroMachine Feb 29 '16 at 7:36
  • @Alin The original image was only 456 bytes. I modified the color a little and now it is 1.44 KB. Also, what Stan said is correct, small images can be turned in base64 strings which can be embedded in the CSS file. It saves bandwidth if you only need to download 1 CSS vs 1 CSS file + 1 Image file. – Cheng Feb 29 '16 at 7:45
  • I downloaded the image and can confirm the same thing happens here. Can't help much more than that now though :) – Cai Feb 29 '16 at 7:46
5

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.

  • You are totally right. I didn't even pay attention to those settings. I have published the experiment result in my original post. – Cheng Feb 29 '16 at 9:07
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!)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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