SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist jor133d's Avatar
    Join Date
    Jul 2003
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent Images

    Hello-

    I have a question regarding transparent images. I am trying to create graphics that have transparent aspects to them for my website design. I have been reading and it seems that the best idea for older versions of browsers is to stay away from png images. I am trying to create my gifs transparent but I seem to get a small white pixelated border around all my images ( I am using a darker background pattern).

    Any ideas how I can create transparent images that are crisp and clean like a png but still have my website viewable on older and newer versions of browsers?

    Thanks!

  2. #2
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You don't have to be afraid of PNG images. The 8-bit ones work exactly as GIFs, but they are better compressed. What caused problems for older browsers was 32-bit PNGs with transparency channel.
    I'd recommend reading these two posts/articles:
    PNG8 - The Clear Winner
    Making IE6-friendly PNG8 Images
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree, 8-bit works very well. PNG is the best way to go for transparency

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Varelse View Post
    You don't have to be afraid of PNG images. The 8-bit ones work exactly as GIFs, but they are better compressed. What caused problems for older browsers was 32-bit PNGs with transparency channel.
    I'd recommend reading these two posts/articles:
    PNG8 - The Clear Winner
    Making IE6-friendly PNG8 Images
    I second the motion. Nice input.

  5. #5
    SitePoint Enthusiast ck88's Avatar
    Join Date
    Jul 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I vote for PNG too. There are two ways to achieve what you want.

    1. Easiest and fastest way is to use PNG 32 Alpha (Bear in mind older browser will not be able to handle PNG32 Alpha, for example ie 6 and earlier versions)

    2. Use PNG 8 with transparancy. The trick to eliminate unwanted edge colors is to match background color/texture of a page where transparent image will be displayed. These are explained in details in those articles on "Varelse" post above.
    ck
    Creative Kitten | Free Web Graphics, Icons and Photos

  6. #6
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ck88 View Post
    Use PNG 8 with transparancy. The trick to eliminate unwanted edge colors is to match background color/texture of a page where transparent image will be displayed. These are explained in details in those articles on "Varelse" post above.
    These two articles describe the method of creating and using 8-bit PNG with FULL transparency channel (as in 32-bit PNG), which is different then matting the edge to background colour technique used with paletted-transparency 8-bit PNGs.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •