16 Replies Latest reply on Sep 7, 2012 10:28 AM by TheForumMan

    Saving Flattened PNG Lowers Resolution

    TheForumMan

      Hello everyone!

       

      I'm in a bit of a pickle as to why saving a "Flattened PNG" file lowers the resolution of the file. When I'm working on a PNG image, I just save it as a PNG until the very end, when I need to flatten the image and get rid of the Fireworks traces in it that Photoshop doesn't like, which is when I save it as a "Flattened PNG."

       

      Here's an example scenario: I'm editing a PNG file that's 200 pixles/inch originally. I add other images from other files to it, but choose "don't resample" for all of them. After saving as PNG, it still says the resolution is 200 pixles/inch under Modify/Image Size. However, when I'm done and flatten all layers, then save as a "Flattened PNG," close the file, then reopen it in either Fireworks or Photoshop, the resolution is lowered to 198.984 pixles/inch. I know this is very close to the original resolution, but I would like to keep it the original anyways. This happens to all images that I edit then save as a "Flattened PNG." If I save the file not as a "Flattened PNG" when I'm done, and instead save it as a normal PNG after flattening all layers, then open it in Photoshop and save it as a PNG again to rid of the Fireworks data, then the original resolution is preserved for some reason.

       

      Is this a bug in Fireworks? If not, how do I prevent it from lowering resolution upon saving as "Flattened PNG" in Fireworks? I don't always want to open two programs to save a file, and I prefer to use Fireworks when editing PNG files and making web/game graphics, because it's easier to do so in Fireworks than Photoshop.

       

      Thanks in advance to anyone who can help me out with this issue!

       

      Regards,

      TheForumMan

        • 1. Re: Saving Flattened PNG Lowers Resolution
          groove25 Level 4

          This question has come up before, but I don't believe any answers have been found. That said, I think it's a bit of a non-issue.

           

          You seem to have made some good observations. If a perfect 200ppi is a priority for you, then I'd suggest using Photoshop to flatten the PNGs. It sounds like you're flattening them for Photoshop's benefit anyway, so why not just flatten each PNG as needed?

           

          But here are some other ideas:

          • Are the pixel dimensions of the file changing? To me, this is a more important question.
          • Have you tried using Image Preview or Export to save out the flattened PNG? It's a long shot, but perhaps there's a difference.
          • Have you tried flattening the file contents within Fireworks first—perhaps saving a copy beforehand?
            [NOTE: I just re-read your post, and it sound like you're already doing this. Sorry!]

           

          The issue sounds like a rounding error on the part of Fireworks, or more specifically, on the part of its Flatten PNG routine. (I always wonder if the specific dimension of the file might play a role in this.) Again, I'd be more concerned if the pixel dimensions of the file were being altered. Resolution doesn't typically play a role in screen-based output, where the monitor dictates the final output resolution or display size of the graphic. In fact, you'll notice that it's listed under "Print Size" within the Fireworks "Image Size" dialog, as it's more of a print concept. Within Fireworks, it's significant only when resampling the image.

          1 person found this helpful
          • 2. Re: Saving Flattened PNG Lowers Resolution
            groove25 Level 4

            Thinking about this a bit more, I think it's mostly an issue of how the information is being displayed. While the resolution may appear to be "off" by a pixel or a half-pixel in a flattened PNG, it seems safe to say that it's still being respected—for example, it's not defaulting to 72ppi or some other unrelated value.

             

            I tried a few tests using Preview, the Mac OS image viewing application. Both Fireworks PNGs and flattened PNGs showed non-rounded resolution values—but extremely close to the specified value in Fireworks. I also noticed that if you leave a file open in Fireworks after saving it as a flattened PNG, and look within the Image Size dialog, the original, rounded resolution still appears. However, if you click "OK" within this dialog, you'll have to save the file as a Fireworks PNG in order to save that value again. So it seems like a piece of metadata that Fireworks stores in a particular way for its own use; saving as a flattened PNG strips that particular piece of data, but still likely preserves some record of the intended resolution.

            • 3. Re: Saving Flattened PNG Lowers Resolution
              groove25 Level 4

              Here's one more thought on this: I'm noticing that, within Fireworks, the Print Size (in the lower half of the Image Size dialog) remains constant across both Fireworks PNG and flattened PNG versions of a file. This suggests to me that those dimensions are possibly being saved within the flattened PNG, while the resolution is being calculated from scratch—based on the pixel dimensions divided by the print output dimensions.

              • 4. Re: Saving Flattened PNG Lowers Resolution
                TheForumMan Level 1

                Hey groove25,

                 

                First of all, thank you very much for all of your helpful responses!

                 

                Yeah, I guess for the most part I'll be using Photoshop to "finalize" the PNG files. I'll flatten all layers of the PNG in Fireworks (that's not the "Flattened PNG" format), then save it, then transfer it to Photoshop to save it without the Fireworks data in the PNG file. This is the only way the resolution stays preserved in what it's supposed to be. So as long as I'm not printing and only using the PNGs for web and game graphics, it should be alright, correct? I just don't want them to look lower quality (when they can be better) when they are published. But I've previewed them, and to my eyes, I don't see anything wrong with them.

                 

                To answer your questions, no, the pixel dimensions don't change for the file after it is saved as a "Flattened PNG" and the resolution lowers. However, I did also notice that if I change the resolution from 198.984ppi to 200ppi for the file, which is 2048x2048, to correct the problem, it automatically resamples the image to 2058x2058, which does show that even though there's only a slight differnece in pixels for the resolution, it does changes the dimensions of the image when reconfigured. Also, exporting it as PNG did not preserve the original resolution; it still lowered to 198.984ppi for a 200ppi file.

                 

                I have some files were supposed to be 72ppi originally, but then saving them as "Flattened PNGs" caused them to be 71.984ppi. Again, not that big of a deal since I won't be printing them for the most part, but I'm just curious as to why Fireworks lowers the resolution upon removal of all Fireworks data in the "Flattened PNG" file. It would make a difference if I were to, say, make a wallpaper for the Retina display, as that needs 326ppi to look good on that display.

                 

                For now, I'll just not worry about that problem in Fireworks and just use Photoshop as the workaround to the problem. I would be helpful though if someone or even an Adobe representative can address the issue, or at least shed some light as to why resolution decreases in Fireworks when saving as a "Flattened PNG."

                 

                Regards,

                TheForumMan

                • 5. Re: Saving Flattened PNG Lowers Resolution
                  groove25 Level 4

                  Just keep in mind that the number you're looking at is really the "print resolution". It shouldn't have any impact on your screen-based output.

                   

                  Also, I like to remind myself that "pixels are a unit of resolution, not size". The pixel dimensions of your image or graphic are a true measure of its resolution in that they tell you how much data your image contains. Whereas the output resolution (and final size) of the image will be determined later by the resolution of the screen/monitor.

                   

                  Finally, if you're going to correct the resolution value of your graphic in Fireworks or Photoshop, be sure to uncheck "Resample Image" to avoid adding pixels to your file (to preserve the original pixel dimensions).

                   

                  I don't think it's anything to get hung up on, but if you want to submit some kind of bug report or feature request regarding this, you can certainly do so here:

                   

                  https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

                  1 person found this helpful
                  • 6. Re: Saving Flattened PNG Lowers Resolution
                    fnordware Level 3

                    I took a look at this issue, and it's actually a little more difficult than I thought. If you have a 72dpi image and save a PNG out of Photoshop (on Windows) and then read it back in, the resulting document will have a dpi of 72.009.

                     

                    This is the unavoidable result of how resolution is stored in PNG files. In my SuperPNG plug-in, I am now rounding to the nearest 0.1, so those PNGs will once again come back in as exactly 72dpi. Read below for a full explanation…

                     

                     

                    PNG stores the resolution as "pixels per meter" while Photoshop uses "dots per inch" (i.e. pixels per inch). More importantly, Photoshop stores this value as a floating point number (technically fixed point) while it's just an integer for PNG.

                     

                    What happens is that 72.0 dpi converts to 2834.6457 pixels per meter (72.0 / 0.0254) which gets rounded off and stored in the PNG as 2835 ppm. When loaded back in, 2835 pixels/meter * 0.0254 meters/inch = 72.009 pixles/inch.

                     

                    As of now in SuperPNG I'm rounding to the nearest 0.1, so 72.009 becomes 72.0dpi.

                     

                    I imagine the PNG authors thought that using meters instead of inches was the sign of a modern file format, but since screen resolution has historically been measured in dpi, the inability to perfectly match standard screen resolution could be seen as a flaw.

                     

                    BTW, Mac users may find that they don't have this problem. I'd be willing to bet it's because Photoshop is saving extra resolution in the resource fork and getting the original dpi from there on Mac.

                    1 person found this helpful
                    • 7. Re: Saving Flattened PNG Lowers Resolution
                      groove25 Level 4

                      Interesting (though confusing) stuff! Thanks for your input on this.

                       

                      I had taken a close look at the numbers of a sample file but couldn't get those numbers to reconcile. Conversion to another unit (i.e. meters) may help to explain this discrepancy.

                       

                      While I didn't perform an exhaustive study, it did seem that files created in Photoshop (PSD and PNG) were more "rock solid" in their resolution value, whereas files created in Fireworks (PNG, original and flattened) were having their print resolutions recalculated—particularly when viewed in a non-Adobe application like Mac's Preview. I assume that Photoshop is able to correctly read FW's native resolution values in some instances, since those applications are engineered to work together where possible, but that it otherwise treats a flattened PNG just like any other application would.

                      • 8. Re: Saving Flattened PNG Lowers Resolution
                        fnordware Level 3

                        I think what's going on is that files saved from Photoshop have this extra information in the resource fork, but files from Fireworks don't. So that's why you have issues with the Fireworks files and not the Photoshop ones.

                         

                        And this is only because you're on Mac. On Windows, there's no resource fork and Photoshop shows the problem as well.

                         

                        Some DPI values will not exhibit this problem because the inches->meters conversion doesn't result in as much rounding. For example, 254dpi should work just fine.

                        • 9. Re: Saving Flattened PNG Lowers Resolution
                          TheForumMan Level 1

                          Hi fnordware and groove25,

                           

                          Hmm, this issue is becoming more complicated by the post, lol. I'm trying to not be confused by all of this, but I do have some conflicting information.

                           

                          I'm using Photoshop and Fireworks CS5.5 versions on Windows 7 Ultimate 64-bit, just so to make that explicit. Also, only Fireworks is experiencing the resolution change (loss, in my case, not gain), and it's always some "x.984" value below the original value so far (i.e. 72ppi -> 71.984ppi, 96ppi -> 95.984ppi and 200ppi -> 198.984), with higher resolutions appearing to lose more ppi. So, it appears to me that the conversion rate may not be a factor here (if it is, it's not significant), because files with higher resolutions are actually dropping more in ppi upon save in Fireoworks.

                           

                          As I've previously mentioned, flattening all layers and saving in Fireworks just as a PNG (i.e. not as "Flattened PNG"), then saving again in Photoshop as PNG preserves the original resolution. I haven't seen a changed, non-round value so far doing it this way, and I've tested with files having the different resolutions I've mentioned earlier. So I agree with groove25 in saying that files saved with Photoshop are "rock solid" in their resolution.

                           

                          I've submitted a bug report to Adobe and linked this forum thread along with it, so hopefully a representative can shed some light on this issue. I just don't want to be going back and forth through programs, plug-ins, etc. all to save a file with the same resolution that it came in.

                           

                          Regards,

                          TheForumMan

                          • 10. Re: Saving Flattened PNG Lowers Resolution
                            groove25 Level 4

                            For what it's worth, I've observed a variety of decimal point values in my flattened PNG resolutions, correlating with the original specified print resolutions (i.e., not to the pixel or print dimensions). In fact, the larger the original print resolution within Fireworks, the more accurate the resulting resolution value within the flattened PNG:

                             

                               10ppi: 9.982

                               72ppi: 71.984

                               240ppi: 239.979*

                               360ppi: 359.994

                               600ppi: 599.999

                             

                            *[Whoops! Somehow, I missed that .979 is actually smaller than .984, so my previous statement is not entirely correct.]

                             

                            These values were observed in Fireworks CS6. Interestingly, Mac's Preview application sometimes recalculated these values differently—as shown in parentheses below. (Note that Preview also rounds to two decimal places.)

                             

                               10ppi: 9.982 (9.98)

                               72ppi: 71.984 (71.98)

                               240ppi: 239.979 (239.97) ← ?

                               360ppi: 359.994 (359.98) ?

                               600ppi: 599.999 (599.98) ?

                             

                            I think it's worth reiterating that Preview reads the same values when looking at a native Fireworks PNG. (Unlike Photoshop, it doesn't read the extra information contained in that format.)

                             

                            Also, I was wrong about the print dimensions (e.g., in inches) remaining consistent. Perhaps they're subject to unit conversion or the non-"floating point" issue mentioned by fnordware; otherwise, they seem to be recalculated based on the recalculated print resolution values. As a result, sometimes they match the original print dimensions, and other times they don't.

                             

                            Again, this stuff is interesting and a little vexing, but it shouldn't be of significance to most Fireworks users, as the application is intended for screen-based output, not for print. The pixel dimensions are what really matter, and those remain consistent. In addition, the print resolution is still being honored, even if not exactly. If using Photoshop or another application to restore the original print (ppi) resolution, be sure that any "Resample Image" options are unchecked—to avoid modifying the actual image content.

                             

                            All that said, if Photoshop can retain consistent print resolution values in its PNG output, it'd be nice if Fireworks could do so the same. Food for thought: It seems like the "Flattened PNG" format taps into Fireworks' standard export options for web. It might not be possible to store the original print resolution values in such a stripped-down format. But perhaps the Save As... "Flattened PNG" option could be engineered to include this extra data (not needed for web output) while still remaining within standard PNG guidelines, by drawing from the same bag of tricks as Photoshop?

                             

                            Also, it may be worth mentioning here that Photoshop's Save For Web seems to use a default value of 72ppi, no matter what the resolution of the original file.

                             

                            For the record, I've been using Photoshop CS6 and Fireworks CS6 on Mac OS 10.6.8 (Snow Leopard).

                            1 person found this helpful
                            • 11. Re: Saving Flattened PNG Lowers Resolution
                              fnordware Level 3

                              groove25 wrote:

                               

                              Also, it may be worth mentioning here that Photoshop's Save For Web seems to use a default value of 72ppi, no matter what the resolution of the original file.

                               

                              More likely, it doesn't save the dpi in the file at all (saving a little space), so it reverts to the default when you read it back in. SuperPNG has a checkbox letting you disable all metadata to get a similar result.

                               

                              Thanks for the info!

                              • 12. Re: Saving Flattened PNG Lowers Resolution
                                TheForumMan Level 1

                                Hi groove25,

                                 

                                Thanks again for your extensive observations and helpful tips! It is interesting how your observations differ from mine: while you see the decrease in resolution getting smaller as the resolution increases, my observation is the opposite of that. But, that may be because you're using CS6 while I'm using CS5.5, and/or because you using Fireworks on Mac OSX whereas I'm using it on Windows 7.

                                 

                                I agree that this doesn't effect my work too much when dealing with Fireworks, but for the sake of maintaining the original resolution of the file, I'm just going to save everything with Photoshop last. It may be a bit of a hassle, but it'll do until Adobe has some sort of fix for this problem. When saving in Photoshop, the original resolution is kept, as I don't choose the "Save for Web" option to create a new document. When I do create a new document, I just choose the file's name in the drop-down list to maintain the resolution.

                                 

                                I think your idea of a newer PNG option is great, as the "normal PNG" saves all Fireworks data, layers, etc., and the "Flattened PNG" erases everything including essential data to the file (but which are not essential for web output, as you said). Maybe a third option called "Optimized PNG" or something with the same "bag of tricks" as Photoshop should be created to save the PNG in Fireworks without the Fireworks data, but still keeping the standard PNG extra data as Photoshop does.

                                 

                                Here's an interesting note though: I was just cropping a PNG file to make an icon for my computer account and for my web accounts, and I've discovered that in Photoshop, two things occur to the new file (saved again as PNG):

                                1. Its original resolution was 96ppi, and after saving, it became 95.987ppi. A little different from what Fireworks would have done to it, but I didn't expect a resolution drop because it doesn't happen as much in Photoshop.
                                2. If I save the exact same file again in Fireworks, even as "Flattened PNG," the file size would be 630KB, whereas in Photoshop the file size saved was 300KB. Where did more than double the data come from in the image after it was "resaved" in Fireworks?

                                 

                                I hope that the Adobe engineers have been following this thread, as I've seen some great research, ideas, and solutions proposed here for the issue of the "Flattened PNG" in Fireworks.

                                 

                                Thanks all for all your support and assistance!

                                 

                                Best Regards,

                                TheForumMan

                                • 13. Re: Saving Flattened PNG Lowers Resolution
                                  groove25 Level 4

                                  Yeah, I was thinking that the act of choosing Save As and then choosing Flattened PNG is different from the act of choosing Image Preview or Export and optimizing the image for web or screen output. So in the first case, Fireworks could add the original ppi resolution in whatever manner Photoshop does when a user choose Save As and selects the PNG format. This approach would also make the applications nicely parallel in this regard.

                                   

                                  (I don't think an additional PNG option would be needed, and it might actually cause more user confusion. I also think that "Optimized PNG" in the context of a web graphics application would suggest an even leaner file, with all unnecessary data stripped and/or more advanced compression routines applied.)

                                   

                                  Not sure about the cropping and resaving behavior you've observed in PS. The difference in file size between PS and FW could make sense if resaving the file as a Fireworks PNG, but is more surprising if you're saving the file as a Flattened PNG.

                                  • 14. Re: Saving Flattened PNG Lowers Resolution
                                    TheForumMan Level 1

                                    Hi groove25 and Adobe Engineers,

                                     

                                    Yes, I agree with your arguments and think that your points are very much valid indeed. I just hope that whatever Adobe does—if they even take action—they do it so that there's a much clearer and better way to save PNG files in Fireworks so that the user knows exactly what data is kept and/or lost with each different save, export, etc. function. And yeah, I have no idea what's going on with the larger file size when resaving in Fireworks, even as a "Flattened PNG."

                                     

                                    But, I do think more options should be included for saving PNGs such that each has its own purpose (at least in my opinion). I only advise this for Fireworks and not Photoshop because Fireworks is the main program to deal with PNGs. So, I propose that there should be these options in Fireworks:

                                    • Saving as "Normal/Fireworks PNG" can be used to save works in progress, preserving Fireworks' layers data and such. Absolutely no PNG data is deleted and no compression. (Used like Photoshop's PSD files)
                                    • Saving as "Optimized/Print PNG" preserves original ppi and other information found in standard PNG files but deletes unnecessary Fireworks data. No compression. (Used for 2D/3D applications for textures and print.)
                                    • Saving as "Flattened/Web PNG" erases all extra data on a PNG and strips it down to just the image. Maybe more advanced compression can be utilized to minimize file size. (Used for websites.)

                                     

                                    I think that with the proper documentation, more options for the user wouldn't be too confusing. I just want to be able to save PNGs in Fireworks with the ease that I do in Photoshop, and not lose data like resolution after removing Fireworks data by saving as "Flattened PNG" in Fireworks.

                                     

                                    It would be nice if it were as easy as in Photoshop, but Fireworks does have its own advantages over Photoshop sometimes. That's why I like to use it to develop web and game graphics/textures over Photoshop, because it's just easier to (and sometimes more ways to) play around with PNGs in Fireworks, like its intended purpose.

                                     

                                    Again, thank you so much for all your help and assistance, groove25, and you too, fnordware. Even though we don't have an answer, I think this thread has been very helpful in understanding how Fireworks and Photoshop handles and saves PNG files through our combined observations and testing.

                                     

                                    Best Regards,

                                    TheForumMan

                                     

                                    P.S. These other findings are a bit off topic, so I'm just adding them to the side here (I can start a new topic if necessary. You are just so helpful that I thought you may know the answers already ):

                                    1. Have you noticed that PNGs and PSDs are always different in size when they're saved, even when the same file/image is being saved? For example, I start working on a new image, then save it in one place, and again in another without editing anything (or save it, then delete it, then save it again), and both files will always have different sizes, although close (like 0.5-1KB difference). I'm not troubled by this finding, as saving the final version (either as PNG in Photoshop or Flattened PNG  in Fireworks) always results in the same file size anyways. I'm just curious as to why this occurs, do you have any idea?
                                    2. Also, why does "resaving" the file cause the size to increase anyway? I tried experimenting by saving the Adobe forum user avatar (30.PNG, as it is called) to my computer, then opening it up in both Photoshop and Fireworks and resaving it, but they are always 4KB in size, versus the original size of 1.31KB. Do they add more information to the PNG or something?
                                    • 15. Re: Saving Flattened PNG Lowers Resolution
                                      groove25 Level 4

                                      I spent a little more time with this in Preview and Photoshop today, and I'm no longer convinced that print resolutions (ppi) in Photoshop PNGs are as "rock solid" as I'd originally thought. When viewing a sample Photoshop PNG, Preview showed me a nice round resolution value that matched the original (e.g., 280) whereas Photoshop itself showed me a number that almost matched the original, but with a decimal place (e.g., 280.01). So I think that Preview's tendency to round values may have mislead me initially.

                                       

                                      The only thing that's clear to me at this point is that Photoshop and Fireworks record or calculate print resolutions differently. (The same file as a native or flattened PNG in Fireworks displayed a resolution of 279.98, or 279.984 when viewed in Photoshop.) I think this goes back to fnordware's insights into metric conversion and/or floating points vs. integers. 

                                       

                                      As for differences in file size between PNGs and PSDs, they're different formats; they're naturally going to save different types or amounts of data, in different ways. Resaving a file shouldn't cause a change in file size, if saving in the same format. An exception would be if different compression or optimization settings were being used. In addition, sometimes file sizes appear rounded up (to something like 4k) when in fact they're smaller (like 1.31k). When making comparisons, be sure to view the files in the same circumstances (i.e. not within different applications or modes).

                                      • 16. Re: Saving Flattened PNG Lowers Resolution
                                        TheForumMan Level 1

                                        Hi groove25,

                                         

                                        Yes, the resolution calculations/conversions are definitely different for each of and recalculated in both Photoshop and Fireworks, as you say. I think when the next update comes about, Adobe should help address this issue, to make for more "solidity" in the handling of the image's resolution. But what has me curious is that I haven't seen Photoshop save any image file with lower resolutions. Maybe it rounds the value to the nearest whole number, but it has always stayed the original if I don't resize, resample, and/or crop the image, just edit it. I guess like I said before, I'll just stick to working in Fireworks, then saving with Photoshop, as Photoshop appears to keep the resolution better than Fireworks does.

                                         

                                        Also, I think I may have confused the question when I stated both PNG and PSD in the same sentance. Of course I know that PNGs and PSDs would vary from each other, because they're different formats and are likely to save different data. What I meant to say is, whether the file is PNG for Fireworks or PSD for Photoshop, they always save as a different file size (relative to themselves, not to each other) each time the are saved, even when the same image is saved without editing. For example, I'm making a normal map for a game, and save that as PSD after using NVIDIA's Texture Tools. That file may have a size of 135,146bytes, let's say. Then, if I save the same file again or in another location, the size could be smaller or bigger for no apparent reason (at least to me), like 134,564bytes or even 138,254bytes. The rounded "size on disk" value may be the same if they vary marginally, but may also be different if they vary more (so a 4KB file can jump to 8KB). And this happens to PSD files in Photoshop and to PNG files in Fireworks, but doesn't happen to PNGs in Photoshop or "Flattened PNGs" in Fireworks. That was what I meant to say, and I was just wondering what's up with that, and if it's related to how Photoshop and Fireworks recalculates data differently with every file save.

                                         

                                        Best Regards,

                                        TheForumMan