32 Replies Latest reply on Sep 7, 2009 12:55 PM by Pete-1967

    Using .png images in a website?

    Pete-1967 Level 1

      Being new'ish to Fireworks and the .png format I am really amazed at the quality of png's in a webpage and how the hold their quality. In web design I tend to like placing text over images and this can often have quality issues as text tends not to work to well with a jpeg unless you increase the resolution before hand.

      I have found that while I edit an image in FW and place text over an image if I then save as a jpeg the image may not be as clear as I would like, if I keep it as a .png the quality is perfect.

      I know why this is but on doing some research have found that .png's are still not universally used across may web browsers and as a result it is advised not to use them.

       

      Some forums say they are fine while others say the opposite in using 'png's in web design, does anyone have any thoughts on this?

      I want to use .png's in my web design instead of jpegs but am undecided from what I read on the Internet so would appreciate any thoughts you may have regarding this.

       

      Many thanks, Pete.

        • 1. Re: Using .png images in a website?
          Panos Zygopoulos Level 3

          You use a .png file when you need to preserve paths and other stuff, so that you can edit them again in the future, not for using it inside a web site. We prefer a jpg image, because has a lot smaller file size than .png. I don't think quality is an issue with jpg. In Fireworks, open the optimize panel, select JPEG, and choose 100quality for great result and still  much smaller size than a png.

          • 2. Re: Using .png images in a website?
            Pete-1967 Level 1

            Thanks for that, interesting point. Do you think the quality is still preserved as a JPEG doing what you said if I am applying text over a JPEG then saving?

            This has been my main problem, mainting image quality while making the text clear.

             

             

             

            Many thanks.

             

            Date: Tue, 1 Sep 2009 03:32:54 -0600

            From: forums@adobe.com

            To: pete.design@hotmail.co.uk

            Subject: Re: Using .png images in a website?

             

             

            You use a .png file when you need to preserve paths and other stuff, so that you can edit them again in the future, not for using it inside a web site. We prefer a jpg image, because has a lot smaller file size than .png. I don't think quality is an issue with jpg. In Fireworks, open the optimize panel, select JPEG, and choose 100quality for great result and still  much smaller size than a png.

            >

            • 3. Re: Using .png images in a website?
              Panos Zygopoulos Level 3

              Well, i've been using text within a jpg image with no problems in the past.

              If you mean that you get a bitmap and try to add text on it, then there may be some optical problems, depending on the colors of the file and its quality. (Of course, if you already got a bad quality jpg, you cannot improve it.)

               

              It would  be good if you could attach your  file.

              • 4. Re: Using .png images in a website?
                mfoxhop

                Thanks, the only problem is that the website page is in grayscale and I need the transparency in the picture. Jpeg can´t be transparent. This is a logo with an outlined drawing and text. That´s why I need png or gif with transparent background.

                 

                Date: Tue, 1 Sep 2009 03:32:54 -0600

                From: forums@adobe.com

                To: REMOVED BY MODERATOR

                Subject: Fireworks Re: Using .png images in a website?

                 

                 

                You use a .png file when you need to preserve paths and other stuff, so that you can edit them again in the future, not for using it inside a web site. We prefer a jpg image, because has a lot smaller file size than .png. I don't think quality is an issue with jpg. In Fireworks, open the optimize panel, select JPEG, and choose 100quality for great result and still  much smaller size than a png.

                >

                • 5. Re: Using .png images in a website?
                  mfoxhop Level 1

                  Hi, thanks for helping. I need png because this will be a transparent logo to be added to a grayscale page website. Jpeg cannot give me that transparency.

                   

                  Sorry I am slightly different from zero in vector and fireworks. Here is one of my first attempts a few days ago. Let´s say that this is my final work and I want it as an outline white in transparent background. Where to go from now? If I save it as gif or png it is white. I am missing something very simple, I believe. Thanks for the help.

                   

                   

                   

                  Date: Tue, 1 Sep 2009 04:00:44 -0600

                  From: forums@adobe.com

                  To: REMOVED BY MODERATOR

                  Subject: Fireworks Re: Using .png images in a website?

                   

                   

                  Well, i've been using text within a jpg image with no problems in the past.

                  If you mean that you get a bitmap and try to add text on it, then there may be some optical problems, depending on the colors of the file and its quality. (Of course, if you already got a bad quality jpg, you cannot improve it.)

                   

                  It would  be good if you could attach your  file.

                  >

                  • 6. Re: Using .png images in a website?
                    Nadia-P Level 5

                    PLEASE NOTE:

                     

                    WHEN AUTOQUOTING - PLEASE ENSURE THAT YOU DO NOT INCLUDE YOUR EMAIL ADDRESS - AS IT WILL BE CERTAINLY BE HARVESTED BY THE SPAM-BOTS.

                    • 7. Re: Using .png images in a website?
                      Nadia-P Level 5

                      You use a .png file when you need to preserve paths and other stuff, so that you can edit them again in the future, not for using it inside a web site.

                      You're talking about the fully editable png file that you can edit whenever you need to make changes to your original file.

                       

                      Nothing wrong with saving a file as png8 in my opinion.

                       

                       

                       

                      Reference:   http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

                      • 8. Re: Using .png images in a website?
                        Pete-1967 Level 1

                        I have had problems with placing text over a JPEG even while using FW. On a site I am working on I wanted to make a framed box that have text as links and info. I created a box with a frame in FW however if I placed text over the image and saved as a JPEG the text became unclear.

                        I have to increase the resolution to at least 300dpi of the box before placeing text over, which then kinda works however the JPEG is then a larger file due to its increased resolution.

                         

                        My point was that if I save the box and text as a .png and insert that into my web page the text is perfectly clear. Hence I was hoping it was 'the done thing' to use this in web design. I really like the way you can reedit .png's without compromising the quality I was just hoping I could use the finished result in a webpage.

                         

                        I have attached a sample of what I am tlaking about.

                        • 9. Re: Using .png images in a website?
                          mfoxhop Level 1

                          Thanks, I just realized that. That was my first try in the forum.

                           

                           

                           

                          Date: Tue, 1 Sep 2009 04:14:07 -0600

                          From: forums@adobe.com

                          To: REMOVED BY MODERATOR

                          Subject: Fireworks Re: Using .png images in a website?

                           

                           

                          PLEASE NOTE:

                           

                          WHEN AUTOQUOTING - PLEASE ENSURE THAT YOU DO NOT INCLUDE YOUR EMAIL ADDRESS - AS IT WILL BE CERTAINLY BE HARVESTED BY THE SPAM-BOTS.

                          >

                          • 10. Re: Using .png images in a website?
                            Nadia-P Level 5

                            Myres wrote:

                             

                            Thanks, I just realized that. That was my first try in the forum.

                             

                             

                             

                            Date: Tue, 1 Sep 2009 04:14:07 -0600

                            From: forums@adobe.com

                            To: REMOVED BY MODERATOR

                            Subject: Fireworks Re: Using .png images in a website?

                             

                             

                            PLEASE NOTE:

                             

                            WHEN AUTOQUOTING - PLEASE ENSURE THAT YOU DO NOT INCLUDE YOUR EMAIL ADDRESS - AS IT WILL BE CERTAINLY BE HARVESTED BY THE SPAM-BOTS.

                            >

                             

                            Still happened with your last message, but I removed them for now... can't keep it in indefintely though  ;-)

                            • 11. Re: Using .png images in a website?
                              Nadia-P Level 5

                              An experiment for you  :-)

                               

                              442-png.png442-png24.png442-png-jpg.jpg

                               

                              Pic 1:  Exported as a png8  files size:  14.4kb - shows some banding on the background highlight - but you an work on that,.

                               

                              Pic 2.  Exported as a png25 - file size:  40.2kb

                               

                              Pic 3.  Exported as a jpg - file size:  42.7kb

                              • 12. Re: Using .png images in a website?
                                Pete-1967 Level 1

                                Hi Nadia,

                                Thank you for your time with that. I must admit I am not seeing a huge amount of difference between all three of your examples other than the banding problem and the file size

                                The first one, the text is clearer slightly however the file size being so small is impressive. As mentioned at the beginning of this post I am new'ish to FW and really only use it to edit pictures. What was it you did for example one? If I was to do this am I creating an image with FW applying text then just saving it differently?

                                 

                                The banding in the background image may be a little more challenging as I create that in a Microsoft (sorry) application as I don't know how to do the same thing in FW.

                                 

                                Thanks again.

                                • 13. Re: Using .png images in a website?
                                  Nadia-P Level 5

                                  What was it you did for example one? If I was to do this am I creating an image with FW applying text then just saving it differently?

                                  Yep, I used your original png file you supplied and then in the Optimise Panel, I selected PNG8 and that compressed the file down considerably - albeit it giving that banding effect in the shading.

                                   

                                  The same with the others, just used the same panel and selected PNG25 and then plain old JPG  :-)

                                   

                                  You may have missed the article I pointed to: makes for good reading.

                                  http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

                                  • 14. Re: Using .png images in a website?
                                    Paevo Kelley Level 2

                                    You can't see that awful banding in the first example? My God, it's hideous!

                                    • 15. Re: Using .png images in a website?
                                      Nadia-P Level 5

                                      Paevo Kelley wrote:

                                       

                                      You can't see that awful banding in the first example? My God, it's hideous!

                                       

                                       

                                      LOL - didn't see my point under Pic 1,.  I did refer to the banding ! 

                                      • 16. Re: Using .png images in a website?
                                        Pete-1967 Level 1

                                        Hi again Nadia, Thanks for that. Will def have a read of the link you sent, looks like I have missed something with regards the Optimize Panel.

                                        The banding may be a bit of a concern, like I said I created that in a Microsoft application. It is taking me some time to get my head round FW as Adobe tend to make things overly complicated hence I gave up trying to use Photoshop some time ago ;-)

                                         

                                        Will give the saving thing a try and hope that works however I fear the banding problem will cause yet another 'problem'. Its never easy

                                        • 17. Re: Using .png images in a website?
                                          Pete-1967 Level 1

                                          Hi Nadia,

                                           

                                          Sorry to be a pain, or to anyone else of course reading this who is shaking their head wondering what I'm going on about

                                           

                                          Am I to understand that if I save an image as a png8 or png25 I can then insert that directly into my webpage rather than a JPEG?

                                          • 18. Re: Using .png images in a website?
                                            Nadia-P Level 5

                                            Am I to understand that if I save an image as a png8 or png25 I can then insert that directly into my webpage rather than a JPEG?

                                             

                                            Yes you can.  Use it directly in your webpage, the same as you would a jpg. 

                                             

                                            I myself am starting to use a lot of png8s, depending on the quality of the output (if it has banding like my first example, then I don't)...

                                             

                                            What I was trying to say when I provided my examples, was that not everything to has to be either gif or jpgs for the web these days.

                                             

                                            You can even use png8 with alpha-transparency for the newer browsers with no problems, it's IE6 that does have a problem with that,, but is easily overcome by usiing an IE filter.

                                             

                                            Hopefully that explains it and it isn't as clear as mud this time round  :-)

                                            • 19. Re: Using .png images in a website?
                                              Pete-1967 Level 1

                                              Hi there,

                                              Thanks very much for that, I will give it a go later. I must admit from what I was reading in other forums I 'thought' .png's could be used in web design but there size was an issue. You seem to have clarified that for me and like I said will give it a go later and let you know how I get on.

                                               

                                              I have a funny feeling I will have another discussion on here very shortly with regards the banding and how on earth to use gradients in FW. Not had a look so unsure if Adobe have buried that somewhere never to be found

                                               

                                              Thanks again, will give it a go and let you know.

                                              • 20. Re: Using .png images in a website?
                                                pixlor Level 4

                                                On PNG images:

                                                When you "save" from Fireworks, the file contains extra information in the file header which is proprietary to FW. The file will be viewable in a browser, as browsers just ignore the extra information, but the file is larger than is needed for a Web page. To create a .png file for a browser, you want to "export." (I like using the Image Preview function, myself.) There is no difference in the file extension between a fully-editable FW document .png and a flattened exported .png. In a thread some time ago, a poster commented that he gave his Fireworks documents a .fw.png extension, and exported to the plain .png. I've tried to adopt that approach and I find it helps me keep better track of what's what in my folders. It's up to me to remember to do it, though.

                                                 

                                                Exported PNG images can be 32-bit, 24-bit or 8-bit. Here's the difference:

                                                • A 32-bit PNG will represent your FW document with transparency. All the objects will be flattened, of course, but transparent and partially transparent areas will be preserved. The file is 32-bit as you have 8-bits each for red, green, blue, and transparency. Eight bits of data gives you 256 values. (Note: Photoshop calls this a version of the format a 24-bit PNG with transparency.)
                                                • A 24-bit PNG does not have transparency. The 24 bits of data are 8-bits (256 values) for red, green, and blue. In this sense, it is similar to a JPEG, although you do not have the data loss or the color shifts.
                                                • An 8-bit PNG has 256 colors in a list. In a way, this is similar to a GIF image. The interesting thing about PNG8, however, is that colors in PNG8 in Fireworks can be semi-transparent. In a GIF, you have the option of selecting only one color to be fully transparent.

                                                 

                                                Using PNG images on the Web

                                                You will want to export to PNG32, PNG24, or PNG8, as appropriate for your needs. Do not overwrite your Fireworks document! If you use Image Preview when exporting slices, and select a .png format, then that setting will be set for that slice. You can't select .png from the Property Inspector.

                                                 

                                                If you need to support Internet Explorer 6, you can use PNG24 with no problem. IE6 will render any semi-transparent areas of PNG32 or PNG8 images as fully transparent. To support PNG32 in your Web pages on IE6, you need to add special code. Even then, however, your visitors' browsers can lock up under circumstances that are not fully understood (http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html). If you know your visitors won't be using IE6, or the content in the transparent PNGs is purely decorative, then maybe that's not an issue for you.

                                                 

                                                Here's a roundup of techniques for using transparent PNGs at Smashing Magazine:

                                                http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-desig n/

                                                 

                                                File Size

                                                Choose the best file type for the image you have. No one file type is always better. If you need to support IE6 still, and you can think of how to do your site without transparent PNGs, then the coding will be easier and the cross-browser compatibility will be better. If you use Image Preview (under the File menu item), you can change the quality level for JPEGs. The default level is 80%, which may not be a high enough quality level for a particular image. Higher quality means larger image size, but for photographic elements, a JPEG may still be smaller than a PNG for a given visual quality. It depends on the image content; each image is different.

                                                 

                                                Gradients and Banding

                                                Fireworks creates strict numerical interpolations between the two colors you use for your gradients. If the colors are close together, you may not have enough intermediate colors to span the distance you want to cover and you will get bands. Photoshop produces what appear to be smoother gradients, because that application adds subtle noise into the gradient to prevent banding.

                                                 

                                                Indexed Palettes

                                                If your image contains more than 256 colors and you select an image format with an indexed palette (GIF or PNG8), you may find that Fireworks produces a palette with fewer than 256 colors. This is a known "feature" of the program and there's no known workaround. If you decide to produce transparent PNG8 images, you need to be aware that this can happen.

                                                 

                                                 

                                                And...that's all I can think of that touches on your issues.

                                                • 21. Websites and Portable Network Graphics
                                                  brianelliottlavoie

                                                  I love using Firework CS4's .png file format for my web site images, graphics, menu bars, etc.  It makes the clarity and sharpness of my pages that much more distinct, and the quality is like none other, unlike anything I've ever used before.  It doesn't slow down the loading time of the page, as evaluated with Google Chrome.  In fact, the HTML usually loads slower than the actual .png graphics, which surprised me.  In short, I highly recommend using .png as your website image choice.

                                                  • 22. Re: Websites and Portable Network Graphics
                                                    pixlor Level 4

                                                    Sorry, but you do not want to use the Fireworks document .png in a Web page. The Fireworks .png format is augmented with data that browsers simply discard, therefore, it's bloat for your page. Yes, the document is visible as an image. But the bytes necessary to contain the vector objects, layers, and the Fireworks-proprietary information produces a file that is much larger than necessary and you do not get a superior visual result over a flattened 24- or 32-bit exported .png.

                                                     

                                                    Test it for yourself. Create a document. Add in a layer. Drop in a couple of rectangles and a line of text. Save. Then, export to PNG32 (with a different file name). Compare the file sizes. Depending on the complexity of the document, the differences can be incredible.

                                                    • 23. Re: Using .png images in a website?
                                                      Pete-1967 Level 1

                                                      Hi there,

                                                      Due to a slight difference of opionion in some of the answers to my question I am still not 100% clear on whether I can use PNG's directly in web design.

                                                       

                                                      If transparency isn't a problem as I dont use that very often, is it acceptable to use PNG's in web design if they are exported and saved as a PNG25?

                                                      I like and often make an image and then place text over it, as a result the text can be unclear if saved and used as a JPEG.
                                                      Nadia-P showed examples of what I am try to achieve with an image I placed on this discussion. If the imaged is saved as a PNG25 the gradient is acceptable and the text clear, the file is also smaller than a JPEG.

                                                       

                                                      So in conclusion is it safe and acceptable to use a PNG25 in web design rather than a JPEG?

                                                       

                                                      Many thanks.

                                                      • 24. Re: Using .png images in a website?
                                                        pixlor Level 4

                                                        Pete-1967 wrote:

                                                         

                                                        So in conclusion is it safe and acceptable to use a PNG25 in web design rather than a JPEG?

                                                         

                                                         

                                                        Summary:

                                                        Editable Fireworks document PNG - Don't use, it's bigger than it needs to be. Instead, export to:

                                                        1. PNG24 (does not have transparency) - Yes, you can use this anytime.
                                                        2. PNG8 (has 256 colors, transparency allowed) - Use this if your image is fully opaque or if your semi-transparent pixels are not essential (Internet Explorer 6 renders them fully transparent).
                                                        3. PNG32 (has full transparency) - Requires special HTML/CSS coding to work in Internet Explorer 6 (current version is 8), but IE6 can still lock up. Use if you are not concerned about IE6 visitors.
                                                        • 25. Re: Using .png images in a website?
                                                          Pete-1967 Level 1

                                                          Hi all,

                                                          Thanks for your help with this.

                                                           

                                                          Many regards, Pete.

                                                          • 26. Re: Using .png images in a website? FURTHER QUESTION
                                                            Pete-1967 Level 1

                                                            Just trying to get my head round using .png's in web design rather than jpgs.

                                                            Am I doing this right because in earlier samples the file size was smaller as a png24 than a JPEG

                                                             

                                                            I am exporting my png by using image preview the exporting as a png24 however if I do the same with a JPEG the file size is smaller.

                                                             

                                                            The reason I want to use png24 is that more often than not the quality of text over an image is clearer.

                                                             

                                                            Please see my two examples. Many thanks.

                                                            • 27. Re: Using .png images in a website? FURTHER QUESTION
                                                              daaave

                                                              when you export as jpeg are you using the "sharpen jpeg edges" option in the small drop down in the same black banner bit of the ptimise and align panel ? also try a jpeg around 85 quality in combination with sharpen jpeg edges

                                                              • 28. Re: Using .png images in a website? FURTHER QUESTION
                                                                Pete-1967 Level 1

                                                                Hi thanks for that however I am wanting to use PNG24 in my web design as you will see in the attachments I posted I often use text over images and as a result the poor quality of the text is a problem when saving as a JPEG.

                                                                Nadia-P suggested using PNG24 as it is clearer and maintains the quality of the image as well as the text but her files were smaller than a JPEG, when I do the same the PNG24 files are bigger than a JPEG.

                                                                Was wondering why this was.

                                                                • 29. Re: Using .png images in a website? FURTHER QUESTION
                                                                  pixlor Level 4

                                                                  A PNG24 keeps the exact color data for each pixel.

                                                                   

                                                                  A JPEG develops a mathematical representation of your image data, but it keeps the "low-frequency" information and it throws out the "high-frequency" information. Low-frequency information means areas where the colors don't vary much from pixel to pixel. High-frequency information means areas where the colors vary dramatically. Most photographs are mostly lower frequency information. Line art is usually high-frequency information. A black-to-white transition is a high-frequency spot.

                                                                   

                                                                  By throwing out high-frequency information, JPEG files contain less information. That's why they're smaller. Depending on the content of the image, this loss of information is not noticable, so we benefit from having the smaller file sizes. Text, however, is higher-frequency information (sharp lines) and you lose the definition when that data is discarded. That's why your text gets blurry. (If you look carefully, you will see that your colors shift, too.)

                                                                   

                                                                  The other thing about JPEGs, though, is that you can control how much to compress an image. If you go to File > Image Preview to export, you can set the quality level. A lower quality level means that more image data is discarded and the exported file is smaller. A higher quality level means less data is discarded and the file is larger. What quality level are you using for your .jpg file? If you're just exporting your image, chances are it's the default value of 85. If you go through Image Preview, you can set the value higher. You may even find you can get an acceptable .jpg file which is smaller than the .png file.

                                                                   

                                                                   

                                                                  For every image, you need to analyze the content to decide which format is better; which image format gives you the quality you want at a file size you can accept. There are trade offs. Generally, the better the image quality, the larger the file size, but it may be that you can get a good enough file at a small enough size. There's no "this format is always better" answer. Your choice will depend on the image.

                                                                  1 person found this helpful
                                                                  • 30. Re: Using .png images in a website? FURTHER QUESTION
                                                                    Pete-1967 Level 1

                                                                    Hi Pixlor,

                                                                    Thanks for your indepth explanation and it seems from what you say there is no right or wrong way of doing things here.

                                                                    I do export images through the Image Preview as per your previous posting and find that is a very good way of seeing file size ect before exporting and I to will remember to keep separate folders if I do adopt the approach of exporting images as PNG24's.

                                                                    It seems clear however that to keep an image as a JPEG would in most cases be best and when exporting in Image Preview I have set the quality to 100 not leaving it at default of 80. I must admit the image is, from what I can see is as clear if exported as a JPEG as it is if exported as a PNG24 and the JPEG is a smaller file.

                                                                    I have printed out both your postings so I don't forget your advice and it looks like I'll just have to play between the two to see what looks best and of course what works on my webpage.

                                                                     

                                                                    Many thanks again.

                                                                    • 31. Re: Using .png images in a website? FURTHER QUESTION
                                                                      pixlor Level 4

                                                                      You're welcome!

                                                                       

                                                                      You might also try quality of 99 or 98, and see if you find that image acceptable. You never know till you try.

                                                                       

                                                                      Also, in the images you've posted, your colors are in the browns, reds, and golds, and you don't have a high amount of contrast in brightness. With this analogous color scheme, the colors are related, so the JPEG compression scheme will distort less than if you had, say, black on white or dark red on light cyan (opposites). If you had a different color scheme, you might decide that you prefer PNG24. If you had a monochrome palette, you might decide a PNG8 or a GIF gets you everything you need in a small file. Ya just gotta try 'em and see.

                                                                       

                                                                      Cheers!

                                                                      1 person found this helpful
                                                                      • 32. Re: Using .png images in a website? FURTHER QUESTION
                                                                        Pete-1967 Level 1

                                                                        Hi there,

                                                                        Hmmm well the colours I am using are really important however I do understand what your saying.

                                                                        I am, right at this very moment, using Fireworks with various images to see which works best for me. I have a funny feeling I will stick with JPEG's because of the gradient I have in the background and the colours I am using.

                                                                         

                                                                        Cheers again, you've been really helpful