14 Replies Latest reply: Aug 27, 2009 8:41 AM by julesmel RSS

    PNG and GIF transparent background rendered as black

    clhiggins9

      I'm having a new problem which wasn't there before - CS4 (Illustrator) - I am creating a vector logo with a transparent background and want to output it for the web, and did so as PNG and GIF and it looks pretty in my Outlook email client, in Dreamweaver and Fireworks, and on all the browser try-outs, but when uploaded to the website, the transparent background turns black.

       

      What settings am I missing? This is a simple two color shape, one layer with no background. Do I have to create a background and make it transparent? (actually I tried that and no dice). Is there a process besides exporting to png or save for web I am missing? There is no background to make transparent. You know how saving for jpg would "create" a white background? Well, saving for png and gif creates a black background, out of nothing. Adding a rectangle and filling it with black and setting it to "0" transparency does no good. Transparency, it seems to me, is rendering as black.

       

      Any suggestions?

        • 1. Re: PNG and GIF transparent background rendered as black
          Mylenium CommunityMVP

          Can you post the website link? This may be either a server-side tool re-compressing the files and thus loosing the transparencies, a server virus scanner damaging them or simply some issue with how the server delivers the pages to the browser nad modifies them possibly. It could add some weird content behind your image, a non-transparent DIV container around your image or some JavaScript code that messes with how the image is displayed. Quite a few things that can go wrong. when you viewed the images in FW and Photoshop, was the black background correctly flagged as transparent in teh color palette?

           

          Mylenium

          • 2. Re: PNG and GIF transparent background rendered as black
            clhiggins9 Community Member

            Thank you for your quick response, Mylenium, I do not have access to the website, the client put the image up and has since I believe replaced it with something else, and I cannot contact them at this time. In Bridge the png image seems transparent (looks like a white background, but so does everything in Bridge) but the gif does have a black background in Bridge. I have one other utility called (old) polyview which renders the background as black. I suspect this is a problem with the image. I created it in Illustrator with no background. (Its a trace from a client, not my design) The png and the gif are attached. The png image is place below

             

            TEST-PNG-1.png

            • 3. Re: PNG and GIF transparent background rendered as black
              clhiggins9 Community Member

              OK, I think its a compression issue. As you may have noticed, the png looks fine loaded onto this website, but the thumbnail at the bottom shows a black background. As a test I uploaded to another webstie, and the thumbnail was backgrounded black, yet the image was good. So in compression the transparency is lost? Perhaps?

              • 4. Re: PNG and GIF transparent background rendered as black
                Wade_Zimmerman Community Member

                I am going to do a test and attach a png from illy it is my feeling that you should create a new document copy the art and paste and do a simple save for the web and leave the default settings alone. But of course I could be wrong let's see how this goes.

                 

                As I thought it is just fine.

                • 5. Re: PNG and GIF transparent background rendered as black
                  clhiggins9 Community Member

                  Well thank you everybody for your thoughts. I would suspect the image is being resized on the webpage. I am not up to date with coding for the web and how transparent background images should be made or resized. Seems to me they should resize just fine, so, It is possible that there is too much compression going on and I will h ave to reevaluate how the image is made and the size it is being used for. Thanks.

                  • 6. Re: PNG and GIF transparent background rendered as black
                    Wade_Zimmerman Community Member

                    lets try this

                     

                    just curious

                     

                    what I did was to post the OP file after resaving from fireworks and renaming it but Iget the same resuts they do.

                     

                    I think they would be wise to remake this file from scratch.

                    • 7. Re: PNG and GIF transparent background rendered as black
                      Silkrooster CommunityMVP

                      Just a peice of info for you. Some web programs such as forums, blogs, wiki's, etc. may use a 3rd party program called image magic to generate thumbnails for images that are uploaded. Therefore there might be nothing wrong with your image, it could be the code used for generating the thumbnail is not supporting the transparency.

                      • 8. Re: PNG and GIF transparent background rendered as black
                        Wade_Zimmerman Community Member

                        In this case i think it is the image.

                        • 9. Re: PNG and GIF transparent background rendered as black
                          Mylenium CommunityMVP

                          It's unfortunate we cannot see the page live, but I agree with the others - it is very likely that whatever peice of software is running on the server is not handling this correctly. At least to me the images appear with correct transparency. For thumbnails these issues cannot be avoided, though, such routines are kinda dumb. Here you can only help by defining a different background color manually. For the full size image it should however respect your settings, as normally it should only be uploaded to the server and then used in its original form. Here's the big if, though: To me it seems that the server is configured all too miserly, meaning that any image that exceeds a certain file size or image dimensions gets resized in the hope of saving a few kilobytes of bandwidth. So once more - I don't think that this is per se something that you do wrong, but rather a problem with integrating your stuff on the server end.

                           

                          Mylenium

                          • 10. Re: PNG and GIF transparent background rendered as black
                            Hat Man

                            I am having the exact same problem.  My site is hosted by GoDaddy.  The image in any paint/illustration program that I have shows up perfectly, but when I upload to them, the thumbnail has black background, and the test/preview of the site also shows the non-scaled image with black as well.  I contacted their tech support group, emailed them the same image, but when they post it to the site, it comes out fine.  I'm stumped.

                            • 11. Re: PNG and GIF transparent background rendered as black
                              clhiggins9 Community Member

                              Hi, I concluded from some correspondance that this happens when the gif file

                              becomes too compacted - someone pointed out that some servers further

                              compress the file. I have seen the black background on some personal

                              computers, and not on uploaded websites, but usually in thumbnails - this is

                              also a super-compressed state, I believe. I am making this all up, but often

                              I am seeing the black background in thumbnails and not in the final display

                              of the full file. I have also seen it sometimes in a full file when it was

                              re-compressed. This is the best explaination I have. It is posible that the

                              files are fine, if you can upload them to a site and they work, that is

                              good. I wonder if a layered file is flattened, then made into a gif it would

                              be ok, but if it is made into a gif unflattened, the compressions continue?

                              I don't know, either.

                              • 12. Re: PNG and GIF transparent background rendered as black
                                clhiggins9 Community Member

                                I think saving from illustrator to a png format does not create the problem?

                                I am not sure. They are a larger file, but possibly better.

                                • 13. Re: PNG and GIF transparent background rendered as black
                                  Lutz Pietschker Community Member

                                  No, I had the same problem with PNG when uploading. The file was fine as long as it was on my machine.

                                  • 14. Re: PNG and GIF transparent background rendered as black
                                    julesmel

                                    Very weird....I am having the same problem. So far I've noticed the problem on Flickr, Facebook, Blip and Vimeo. You can see the PNG images here:

                                    http://www.facebook.com/bookofcooks
                                    http://www.flickr.com/photos/bookofcooks/

                                    Interestingly, the images render well on our blog (you can link to it from those thumbnails, where the images are rendering pristinely well).

                                     

                                    I noticed that this started happening about two months ago, and the problem extends not only to NEWLY created images, but also to old images that used to display correctly.

                                     

                                    The images do look good w/transparency on my Mac running 10.5.8

                                     

                                    Thanks for any help solving this.