SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Using PNG8 in Fireworks

    I'm going to run through a little PNG trick in Fireworks. It's being published shortly in the Design View, but is probably of interest here too (I hope so anyway).

    This is nothing amazingly new, In fact it's a method that's been around for years, but I'm constantly surprised by how many people don't know about it. Even in the SitePoint office, I've had web gurus furrowing their brows and insisting "No, no ... that can't be right ... can it?"

    So, at the risk of having long-time Fireworks users yawn, roll their eyes and think duh!, I'll run through it here.

    As you probably already know, PNG comes in two flavors -- 8-bit and 32-bit. It's the 32-bit version that gets most of the fanfare.

    PNG32's major characteristics are:

    * It uses a flexible "JPEG-like" RGB color model, rather than a limited palette as GIF does.
    * It employs a completely lossless compression method, allowing you to save and resave your image with no loss of quality.
    * Lossless compression does come at some cost -- PNG images are always much fatter than their JPEG equivalents.
    * It can reproduce complex, graded transparency settings, similar to a PSD or TIF file.

    Of course, Microsoft's scant regard for the PNG spec (authored way back in 1996) meant that the announcement of the glorious PNG format fell on deaf ears. And rightly so -- in that year, Internet Explorer had roughly 95% of the market, so naturally an image format that rendered transparency as a solid, dishwater grey in most people's browsers qualified as a total non-event for the majority of developers.

    Not to be bowed, a lot of bloodyminded developers set about inventing all manner of hacks, tricks and workarounds designed to force IE to play nice. These included many JavaScript/IE Filter-based solutions and even a Flash powered PNG renderer.

    While most of these methods worked, all of them were complex, completely tied to the presence of another technology (Flash, JavaScript, etc.), and still failed badly on older browsers.

    These efforts were, however, good attempts at making the best of a bad situation.

    PNG8's major characteristics are:

    * It employs a palette-based color model (sometimes called an indexed palette), like the one that GIF uses.
    * It can't animate like GIF.
    * It offers GIF-like 1-bit transparency. Pixels are either solid or completely transparent, but never partially see-through.

    Although this last point is generally accepted as fact, it isn't strictly true, and this is the topic we'll be examining today.

    Transparency information for all PNGs is contained in a section of the file called a chunk, and according to the spec, for indexed images, it stores alpha channel values for one or more palette entries.

    In other words, the chunk is allowed to have more than one transparency color.

    Now, as we know, official specs can lay out all sorts of wonderful ideals involving rainbows and unicorns and fluffy kittens -- just look at the most of W3C specs -- but it's what happens in the big, wide, dirty world that truly matters.

    Let's try an example.

    We'll begin in Fireworks with a simple illustration that I've given a yellow translucent glow. As you can see in the screenshot below, the background is visible through the glow.



    If we set our file format to PNG8 - indexed transparency, we get a result very much like any transparent GIF you might see. One color chip in our palette is set aside for the alpha channel, and all semi-transparent colors are flattened into the background color and rendered opaque.



    However, if we switch from index to alpha transparency, things get interesting.



    While our default alpha chip is still there, our PNG8 palette preview now shows a new type of color chip with a transparent chiplet cut out of the top-left corner. These are our semi-transparent colors.

    Let's export the graphic and see what our web browsers make of it. If you want to try your own quick tests, the page is here.



    As you can see in the diagram above, all four modern browsers render the yellow glow effect beautifully, with subtly varying levels of transparency. No issues there.

    But what about those cranky older IEs? Are they going to suck the life out of the party again?

    The answer is: not necessarily.



    Although older browsers won't render the gentle glow effect, they'll happily ignore it while continuing to render the 100% transparent parts in glorious, GIF-like, 1-bit alpha. Not perfect, but not tragic either -- particularly when compared to the ugly grey boxes that accompany unhacked PNG32s on older versions of IE.

    Amazingly, Fireworks seems to be the only graphics app that supports this semi-transparent PNG8 export feature -- and it has done so since at least version 3.

    I can certainly confirm that none of Photoshop, Gimp, Paintshop Pro, or Xara has this functionality built-in. Perhaps there are plugins out there that can inject super PNG powers into these apps, but I haven't seen them. So if you have even an older version of Fireworks hanging around, it's probably worth holding onto just for this feature!

    Summary


    It seems there are very few reasons for not using more 8-bit Fireworks PNGs in our work. In many typical situations, between 60% and 80% of users will be using a browser that fully supports these files.



    The remaining IE5-6 users will see a slightly jaggier but often very acceptable version of the same image. The example to the right is used on the sitepoint.com home page, and I doubt IE6 users are aware that they're missing anything.

    The generated files are small -- the light globe image used in the examples above was less than 6k. I generated a PNG32 version of the same image and it was 3 times the size.

    And as they have no reliance on browser hacks, JavaScript, Flash, DirectX, or any other third-party technology, it's difficult for them to fail.

    While there will still be times when full transparency control in all browsers will demand the PNG32 hacks, personally I think PNG8 should become the default choice for web transparency effects.

    Cheers,
    Last edited by AlexW; Sep 20, 2007 at 21:12.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  2. #2
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazingly, Fireworks seems to be the only graphics app that supports this semi-transparent PNG8 export feature -- and it has done so since at least version 3.
    Have you tested this statement's veracity with PaintShopPro 9 or Adobe Image Ready CS?
    DONMACideas!
    Marketing and Advertising-
    donald17@donmac-ideas.com
    www.donmac-ideas.com

  3. #3
    SitePoint Zealot icantsurf's Avatar
    Join Date
    Dec 2004
    Location
    SF Bay Area
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Good Golly! Just when you think you'd seen it all.

    Thank you for this wonderful tutorial.I especially love that it has a graceful degradation built in. I've always been a fan of PNG but only used it sparingly. Now I think it will become my format of choice.
    Sig under construction. . .
    please keep checking back to see if I update it.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the while IE6 dominates, I can't use PNG - and believe I have tried every known hack and workaround possible. JPG and GIF are still the only way.

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexW View Post
    This is nothing amazingly new, In fact it's a method that's been around for years, but I'm constantly surprised by how many people don't know about it.
    I've been using Fireworks for years but you're right, I only discovered the alpha transparency for 8-bit PNGs just a few weeks ago.

  6. #6
    SitePoint Zealot
    Join Date
    May 2002
    Location
    Nashville, TN
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had Fireworks for years, because it came with Studio 8 and now CS3. If I had only known... I've been waiting for this functionality since the 1990s!

    I'm so excited about using this technique. Thank you!

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The funny thing is, I was trying to do this with photoshop today and I stupidly assumed that if it couldn't fireworks wouldn't be able to either. So this was very timely.

    But I did find out that there are a couple of command line tools: pngquant (also has a simple GUI wrapper on windows) and pngnq (no windows support). Both are pretty simple to use, although it seems that fireworks produces better images.

  8. #8
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by danieljames View Post
    The funny thing is, I was trying to do this with photoshop today and I stupidly assumed that if it couldn't fireworks wouldn't be able to either. So this was very timely.

    But I did find out that there are a couple of command line tools: pngquant (also has a simple GUI wrapper on windows) and pngnq (no windows support). Both are pretty simple to use, although it seems that fireworks produces better images.
    Good work, danieljames. It made sense that there would be applications somewhere that did it, and it was matter of finding them. Even if they're not as slick as Fireworks, at least they provide some alternative if you can't get your hands on a copy of Fireworks.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  9. #9
    SitePoint Zealot icantsurf's Avatar
    Join Date
    Dec 2004
    Location
    SF Bay Area
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SeriousKevin View Post
    All the while IE6 dominates, I can't use PNG - and believe I have tried every known hack and workaround possible. JPG and GIF are still the only way.
    Or you could use PNG and get the same results as a GIF.
    Sig under construction. . .
    please keep checking back to see if I update it.

  10. #10
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by icantsurf View Post
    Or you could use PNG and get the same results as a GIF.
    Exactly. PNG8 files are the same size or smaller than a GIF equivalent, so it's hard to think of a reason other than animation requirements to select GIF over PNG8.

    Unless of course you're targeting a big Netscape 4 audience.
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  11. #11
    SitePoint Member
    Join Date
    Aug 2001
    Location
    Bristol, UK
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    That's astounding. I'm amazed that this tidbit of information hasn't become common knowledge before. Thanks, Alex. I'm glad I read my Design View email today.


    Quote Originally Posted by AlexW View Post
    Exactly. PNG8 files are the same size or smaller than a GIF equivalent, so it's hard to think of a reason other than animation requirements to select GIF over PNG8.
    In regard to this, is this true for small-palette GIFs? I use PaintShop Pro to render GIF, often using just 16 colours, which means most icon/menu images come out at 2-4K.

    Cheers,
    Paul.

  12. #12
    SitePoint Member whitecat1's Avatar
    Join Date
    Jul 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazingly, Fireworks seems to be the only graphics app that supports this semi-transparent PNG8 export feature -- and it has done so since at least version 3.
    What about DrawPlus? It can do this... I think from version 7 or 8

  13. #13
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by danieljames View Post
    Both are pretty simple to use, although it seems that fireworks produces better images.
    Glad to see I'm not alone in sometimes typing 'Firefox' instead of 'Fireworks'

    Back on topic, I've used PNG8 a few times in the past and have found it to be a good alternative to gifs if there aren't many colours displayed in the image, good to know that it supports transparency in IE6 too, thank you!

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by icantsurf View Post
    Or you could use PNG and get the same results as a GIF.
    but i dont use gif for any transparency or shadow effects, only for limited pallette plain colour files. i use jpeg for everything else .

    png would give zero benefit - on our client sites a good 50%+ are viewing with ie6. i can easily tell the difference between that drop shadow sitepoint book example shown above, and so would our clients.

  15. #15
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In my experience, GIF files are generally better for small graphics; say under 32x32 pixels. Beyond that, PNGs are usually more efficient.

    It's also worth using a tool such as TweakPNG to remove the gamma settings that Photoshop and other products save.

    I've generally stuck with PNG8 and this technique looks great. I'm not a Fireworks user, but hope that some other products will catch up soon.

  16. #16
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple IE6 hack

    Quote Originally Posted by SeriousKevin View Post
    All the while IE6 dominates, I can't use PNG - and believe I have tried every known hack and workaround possible. JPG and GIF are still the only way.
    I have used this simple hack for PNGs for some time:

    <!--[if gte IE 5.5]>
    <style type="text/css">
    #logo
    {
    filterrogidXImageTransform.Microsoft.AlphaImageLoader(src="images/FWlogo.png");
    }

    .pngs img {
    visibility: hidden;
    }
    </style>
    <![endif]-->


    HTML validates nicely and there is no issue with IE 7 relative to PC (don't have a Mac, so I can't guarantee Safari although it works nicely in Safari for Windows).

    Fireworks is often overlooked - I discovered this while working on a logo which originally came to me as a huge jpeg with a background and Photoshop CS3 didn't solve any of the problems with jaggies - however, when I imported it to FW as vector, it nicely resized and for all intents and purposes, the jaggies are gone.

    Good article and I will incorporate it!

  17. #17
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SeriousKevin View Post
    but i dont use gif for any transparency or shadow effects, only for limited pallette plain colour files.
    You can do the same with PNG8 and sometimes the file size will be smaller (especially if you use an added tool to strip out the extra info as mentioned above), so you shouldn't restrict your usage of PNGs to images requiring transparency.

  18. #18
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is all very well for Fireworks users but some of us don't have the wads of money for it!

    I tried the pngquant with no success. I couldn't install it on my system and it's not exactly user friendly.

    Are there any other alternatives? Apart from the aforementioned hacks?

  19. #19
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    OMG! This works great. I kind of clunk around in Fireworks and this is a great thing to know. Thanks so much! Keep these coming!

  20. #20
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ceeb View Post
    It's also worth using a tool such as TweakPNG to remove the gamma settings that Photoshop and other products save.
    Fortunately, Fireworks doesn't suffer from this problem.

  21. #21
    Always have a backup plan! failsafe's Avatar
    Join Date
    Jun 2006
    Location
    Canada
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where, oh where, was this article a few weeks back! I spent untold hours trying to make a PNG background panel with a drop shadow play nice in IE6. Very frustrating when it looked fine in every other browser!

    I'll keep this handy for the next time.

    "We're all mad here." Cheshire Cat—Alice in Wonderland, 1865
    ________________________________________________________________

    Graphic Design • Web Development • Writing and Voice Services

  22. #22
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I just came across something that looks to be quite helpful in getting IE < 7 (at the very least, 6) to use PNGs properly: http://bjorkoy.com/past/2007/4/8/the...st_way_to_png/

    Hope that helps somebody. I haven't tried it out myself yet, but I'm sure I will shortly.

    EDIT: Just read, this fix works for IE5.5+
    The content of this article and this fix pushes the use of PNGs way up for websites.

  23. #23
    SitePoint Enthusiast Madmac's Avatar
    Join Date
    Jan 2002
    Location
    Durban, ZA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SitePoint home page IE6 breakage

    Near the lovely .png on the SitePoint home page you were flaunting in this article, two essential links are impossible to click in IE6:

    Before You Code

  24. #24
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Madmac View Post
    Near the lovely .png on the SitePoint home page you were flaunting in this article, two essential links are impossible to click in IE6:

    Before You Code
    I still use IE6 and the link works. Anyway, nice insight Alex.
    What sitepoint made me to do:
    Select from 1,2,3,4,5,6,7 8 9where name='ghostme'

  25. #25
    SitePoint Zealot Kai Gusto's Avatar
    Join Date
    Jul 2007
    Location
    Australia
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This may sound like a dig, but it is absolutely not.

    To all you PostScript programmers out there. What if the PDF format would adopt a user friendly environment that includes the functions of Fireworks. This is most probably already there. So, please enlighten me.

    Still learning....
    Peace on Earth. Please...
    Tuts:1 2 3 4
    5

    Beside myself.


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
  •