-
1. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Noel Carboni Mar 14, 2012 3:59 PM (in response to Shan-Dysigns)Any way you could post two PNGs as examples? You might not be able to see a change but putting one over the other, using Difference mode, and enhancing the result with one or a couple of severe curves layers might turn up hidden differences.
I'm wondering if somehow dithering could be causing less ability to compress... Or something...
-Noel
-
2. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Shan-Dysigns Mar 14, 2012 4:35 PM (in response to Noel Carboni)This workflow is what I used to create the images I attached.
This zip file contains 3 sample png's and a .psd document with those .png files layered. FYI - I'm saving these .png files from a layered .psd document - typical color profile of sRGB.....
saveAs.png = started with no alterations - used FILE/SAVE AS - selected .png - save - file size = 55kb
resized-saveForWeb.png = used "image size" to resize image to 700px wide - select save for web - used default .png settings - save - file size = 46kb
saveForWeb-resized = started with no alterations - select save for web - used default .png settings - changed image size to 700px wide - save - file size = 133kb
http://www.shan-dysigns.com/userForums/photoshop/save-as-png.zip
I will try what you suggested - here are files for you to test along with me (if you want). I'm more interested in the methodology of how Photoshop determines file size simply based on the same two steps just reversed. Let me know if you can come up with any conclusions based on these files.
-
3. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Noel Carboni Mar 14, 2012 5:27 PM (in response to Shan-Dysigns)Very interesting!
Right off the bat I see some things:
- The .psd is in Adobe RGB while you mention sRGB in your note above. One of the embedded PNGs seem to have pixel values in a different color space than the other two.
- Two of the three .png files ask me when I open them what color profile I would like to use, and one does not: SaveAs.png does not ask (implying it carries a color profile), and it opens in the sRGB profile.
- The font positioning is slightly different in saveForWeb-resized.png, while it's identical in the other two. All of the characters are shifted one or several pixels this way or that.
- Just to make matters more interesting, I tried a Save As PNG operation from Irfan View and was provided a dialog that allows me the ability to select a compression level from 0 to 9, and the best it did was bigger than any of the three .pngs you saved from Photoshop at 141 kb.
Seems like we need a PNG implementation expert (Chris Cox?) to describe what's going on behind the scenes with PNG compression.
-Noel
-
4. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Chris Cox Mar 14, 2012 5:38 PM (in response to Noel Carboni)Photoshop's PNG compression is equal to the 9 setting in IrfanView (the effort setting for zLib).
But Photoshop uses large buffers and comes closer to PNG crush for file sizes.
-
5. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Shan-Dysigns Mar 14, 2012 5:39 PM (in response to Noel Carboni)Now that you mention the Adobe profile... I think I have my CS applications synced to default new documents to that profile (I didn't think about that). So, the file I directly saved to .png (saveAs.png) probably included the same profile as the .psd while the save for web files were converted to sRGB. I also noticed some pixels shifting - I figure it has something to do with anti-aliasing, but I'm not sure why there would be a difference between the operations. I wonder what the difference would be if this workflow started with a flattened image (text and all). I have noticed in the past saving a file from a layered document compared to a flattened image yields different results with anti-aliasing. Maybe this has something to do with how Photoshop merges all the layers before saving to a file.
-
6. Re: Save For Web vs. Resizing vs. File Size vs. PNG
JonnyBoyeee Mar 15, 2012 8:00 AM (in response to Noel Carboni)You know your stuff!
-
7. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Shan-Dysigns Mar 15, 2012 9:32 AM (in response to Noel Carboni)With all things said, I'm still not sure the original question was really addressed.
How is the workflow order affecting the outcome of file size?
-
8. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Noel Carboni Mar 15, 2012 10:06 AM (in response to Shan-Dysigns)I was hoping Chris might offer more in that regard.
While like you I strive to understand why something is the way it is, it's proprietary software, and the answers may just never come. One approach that can carry you forward in that case is to just note which method/workflow gives you everything you need (e.g., color profile) along with the smallest file, and use that in the future. Do this enough times and your expertise will differentiate your work from those not so well "in the know".
-Noel
-
9. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Shan-Dysigns Mar 15, 2012 11:42 AM (in response to Noel Carboni)I sometimes let myself get sidetracked on the "why" something happens compared to "just working with the best result". Finding out the "why" is helpful in possible future troubleshooting (whether on the same issue or not). I tend to learn more when I know the ingedients behind the product (if that makes sense). I would prefer to use "save for web" if not just for the fact Photoshop automatically inserts "-" dashes in the filenames (although saving straight to .png seems to yeild better results with only a slightly larger file size). If for nothing more than curiosity, I hope this topic gets some insight.
-
10. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Chris Cox Mar 15, 2012 2:40 PM (in response to Noel Carboni)>> I was hoping Chris might offer more in that regard.
Too many variables, and not enough specific questions. As stated, it would take me days to type up all the possibilities. (a curse of knowing too many details)
-
11. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Shan-Dysigns Mar 15, 2012 5:05 PM (in response to Chris Cox)Too many variables
What? There are 2 variables here (variables = scenarios = steps). Only two different operations.
1. resize the image, THEN use "save for web" = 91kb
2."save for web", THEN change image size = 157kb
Hopefully my logic translates here:
All other settings are the same. I even made sure the .psd was sRGB this time. The specific question was "why does the different workflow order produce such a big difference in file size"?
In creating a new test file (http://www.shan-dysigns.com/userForums/photoshop/savePNG.zip), I did notice an interesting thing: (I'm including my files in case you want to follow along or test for yourself)
If I merge all layers BEFORE performing the steps above, the file sizes were relatively closer to one another - 168kb and 157kb (respectively from the 1, 2 list above)
One thing to note is all the .psd layers are either shapes or text - this whole scenario may be totally different if each layer had rasterized content (actually, it does, by about -20kb).
The file size in step 1 above didn't jump until it had to consider rastered text/shapes into the calculation. So all this tells me the difference in file size has to do with how each process handles vector data. Maybe when you allow PS to resize the image first, the overall file size is smaller because the vector data gets recalculated???
I don't know how to properly interpret all these differences, but I do know there is something about PS's operation of resizing the canvas with vector data versus resizing the canvas with rasterized data - this has to be where the difference in file size lies.
Maybe I've just wasted a bunch of time on the obvious, but I think I learned something here. Now my head hurts and my eyes have popped out of my head.
So, Chris, I guess there ARE more variables in this situation. My curse is being nosey and wanting to know more technically about PS than most casual designers probably would care about.
-
12. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Marian Driscoll Mar 15, 2012 5:27 PM (in response to Shan-Dysigns)Toss in one more variable. Try saving the same image with Fireworks. Fireworks has a few more options for saving PNG.
-
13. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Shan-Dysigns Mar 19, 2012 2:14 PM (in response to Shan-Dysigns)I take it there is no answer to this?
-
14. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Noel Carboni Mar 19, 2012 2:18 PM (in response to Shan-Dysigns)We've been waiting on you to tell us what's the best sequence to use.
Virtually all of the knowledge being shared here by non-Adobe people is from trying things and seeing how they work.
-Noel
-
15. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Shan-Dysigns Mar 19, 2012 2:32 PM (in response to Noel Carboni)There really is no best sequence because using save for web produces less quality than saving straight to .png. Saving for web seems to blur sharp edges and messes with the anti-aliasing on text. Saving straight to .png forces you to manually name images with no spaces. So the choice between those two options is a matter of one extra step in naming the file or a slight loss of image quality.
I just feel I've wasted a whole lot of time creating example files and trying to find out what was going on behind the interface. I thought this would have been a known occurrence and the answer would have been simple. I'm going to move on and let this issue be. Seems most of my threads are left unanswered and left in space anyway - gets frustrating when more attention is spent on silly threads with people asking the same simple questions over and over about the most documented issues.
-
16. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Noel Carboni Mar 19, 2012 8:25 PM (in response to Shan-Dysigns)Shan-Dysigns wrote:
Saving straight to .png forces you to manually name images with no spaces.
This caught my eye... What do you mean? You can't name your .png file with spaces in it?
I haven't had any trouble saving a PNG file with spaces in the name by just choosing File - Save As, PNG, and naming it what I want...
-Noel
-
17. Re: Save For Web vs. Resizing vs. File Size vs. PNG
Shan-Dysigns Mar 19, 2012 8:45 PM (in response to Noel Carboni)Sorry if I wasn't clear. I mean when saving straight to .png, (and keeping web standards in mind) I would have to manually name the file using either dashes or underscores (unless I used camel case). For example, if I wanted a file named "gallery-background", I would have to manually insert the dashes when saving straight to .png, but when using "save for web", PS automatically replaces spaces in the name with either a dash or underscore. This is what I meant when I was comparing an extra manual step versus losing some image quality - but this topic is far from the original, so I caution thinking too much into what I was saying about space in between file names.






