Skip navigation
clhiggins9
Currently Being Moderated

PNG and GIF transparent background rendered as black

May 27, 2009 2:23 PM

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?

 
Replies
  • Currently Being Moderated
    May 27, 2009 2:30 PM   in reply to clhiggins9

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2009 4:07 PM   in reply to clhiggins9

    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.

    Attachments:
     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2009 5:51 PM   in reply to clhiggins9

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2009 9:52 PM   in reply to clhiggins9

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2009 10:58 PM   in reply to Silkrooster

    In this case i think it is the image.

     
    |
    Mark as:
  • Currently Being Moderated
    May 28, 2009 1:17 AM   in reply to clhiggins9

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2009 9:28 AM   in reply to clhiggins9

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2009 11:12 PM   in reply to clhiggins9

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 27, 2009 8:41 AM   in reply to Lutz Pietschker

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points