August 12, 2010

Do you care about PNG-8 with transparency?

Fans of Adobe Fireworks have long pointed out that Photoshop’s Save for Web feature doesn’t support the ability to generate an 8-bit PNG file with variable transparency.  That is, Photoshop’s 8-bit PNGs support 1-bit transparency (just like a GIF), whereas Fireworks PNGs support multiple semi-transparent colors. (Here’s a really ugly comparison I threw together.)

Question: Is this still relevant, e.g. in building mobile apps?  Is it important to the point where the Photoshop team should prioritize adding this support ahead of doing other Web-/mobile-oriented changes? [Update: If it’s relevant to you, it would be helpful to know specifically how/when you’d use it.]

Thanks,
J.

Posted by John Nack at 9:56 AM on August 12, 2010

Comments

  • Thomas Brand — 10:11 AM on August 12, 2010

    Photoshop’s save for web functionality is one of the Photoshop’s strongest unique features. The more capabilities the better, especially where space saving, and transparency are concerned.

  • David — 10:16 AM on August 12, 2010

    Obviously it all depends what “other Web-/mobile-oriented changes” would be moved down on the priority list, but I for one would like too see PS support 8-bit png with more than 1-bit transparency.

    [Can you be more specific about how you’d use it? Thanks. –J.]

  • Ben Hansen — 10:26 AM on August 12, 2010

    Yes! smaller files with real transparency would be sweet

  • Dan Rodney — 10:34 AM on August 12, 2010

    Yes it’s important because you can get smaller filesize with transparency. It can also be very useful when dealing with Internet Explorer 6, which sadly we still need to support for the near future.

    I am a Fireworks user and I would also like to put in a request to see it’s GIF and PNG8 fixed to prevent banding. There have been longstanding issues with excessive banding. It would be great to see a merger of the good parts of both Photoshop and Fireworks merging so both can have the same good export from both apps. Currently each app has it’s pros and cons.

  • Aaron Leavitt — 10:35 AM on August 12, 2010

    We use the PNG-8 with alpha transparency on a pretty regular basis. We do some ad work with banners and using those images in Flash can be an absolute life saver when trying to eke out those last few kilobytes of size. Simplifying the save from Photoshop, open in Fireworks, resave process would be awesome.

  • Greg Rewis — 10:38 AM on August 12, 2010

    For a more in-depth explanation of the benefits of the png-8’s with the semi-transparency, have a look at http://blog.assortedgarbage.com/?p=414. And John, you know my opinion on this one. ;-)

  • Rick Curran — 10:39 AM on August 12, 2010

    Hi,
    I actually have just used Fireworks ability to do this for the first time, I wasn’t even aware you could do variable transparency in an 8 bit image! I am now using it for graphics where previously I had used 24bit pngs for the same functionality but with much bigger files as a result. I’ve been creating non-flash based interactive elements with jQuery using png graphics that will work on iPhone / iPad etc, So I’m definitely in the place where it would be extremely handy to have this ability within Photoshop itself.

    I would say this is a very important feature for web / mobile usage as mobile phone data plans are squeezed for users, I think it’s time we as designers got back to being a bit more careful with file sizes rather than presuming everyone is accessing our sites on fast broadband connections.

  • Luke Kilpatrick — 10:40 AM on August 12, 2010

    Yes, because there are still so many web designers that live in photoshop because they won’t, can’t or have no desire to make their lives easier by using fireworks. (Disclosure: I run Fire On The Bay, the worlds largest Fireworks Users Group as well as one of the biggest Photoshop Usergroups. Both in San Francisco)

    8-bit png transparency is vital to making better optimized design and I think is a critical feature for Photoshop going forward.

    Greg Rewis gave a great blog post about 8-bit alpha png transparency on his blog. This is how it should be implemented in PS NEXT – http://blog.assortedgarbage.com/?p=414

    Luke Kilpatrick

  • Don — 10:44 AM on August 12, 2010

    Not sure how to answer the when I would use it question? Isn’t the answer just anytime you require alpha transparency but only actually need 8-bit color? ex. maybe a logo that has a drop-shadow applied?

    In the mobile space, every kilobyte does count. Optimizing file sizes goes along way towards load time. Real world 3G isn’t as fast as carriers would have you believe.

  • Mischa McLachlan — 10:48 AM on August 12, 2010

    I had always hoped that PNG-8 could have support for 8-bit transparency. But i think the main thing i’m interested in, is finding a sweet spot between 8, and 24bit. Ie, often 8-bit doesn’t have a large enough colour range, and 24-bit is overkill.

    The way i would hope you might think about this would be to remove selecting the bit depth altogether. Just make it look good. and optimise the file size as best as possible.

    So yes. i’m interested in small png file sizes, with 8-bit alpha. definitely. I just don’t care about ‘selecting or worrying’ about bit depth myself.

    I

  • RUGRLN — 10:52 AM on August 12, 2010

    Totally dude! Just yesterday made a design for a friend of mine and saved it as PNG 8 with transparency at only 35 kb. At first I was gna save it as PNG 24 @ ~350kb..maybe small either way, but when it can be that small, why not. FYI, there were only 8 colours roughly too..

  • Sandee Cohen — 11:06 AM on August 12, 2010

    I have a little different take on this.

    PNG-24, with transparency, is vital for anyone who needs to create graphics for any of the Office products. Especially PowerPoint.

    People cheer when I show them how PNG-24 with transparency can be placed into PowerPoint with no matted or bitmpapped edges.

    It’s one of their most fervent requests.

    Usually, it’s not such a big deal to have larger file placed in PowerPoint.

    But I suspect that in the future the size of a PowerPoint project is going to become important. People will start wanting to run presentations from iPhones or other small devices.

    The alpha transparency for PNG-8 files out of FW is not just for the web.

  • James Darknell — 11:11 AM on August 12, 2010

    YES, YES, YES!! Please, This is so important to making game assets. Even in this day and age, making smaller better assets still counts. I’ve been using a custom utility, not even knowing Fireworks had the ability. It always bothered me that Photoshop Didn’t know that Red50%alpha was a different color in the palette than Red25% alpha. Here’s hopin’.

  • Joe D — 11:44 AM on August 12, 2010

    Maybe the team could work on centralizing the save for web feature to cross several programs like Adobe did with the Media Encoder.

    [It’s already in Illustrator, maybe others; used to be in GoLive. –J.]

  • karl — 12:05 PM on August 12, 2010

    Yes, this would be an important feature! Sometimes in webdesign I have to use 24 bit-PNGs because the transparency in 8 bit-PNGs is bad. The result are huge file sizes for higher resoluted graphics…

  • Collin Allen — 12:43 PM on August 12, 2010

    Wow, I wasn’t even aware that PNG-8 had variable transparency! I thought it was an all-or-nothing deal, since I’ve only use Save for Web (and been limited by it, apparently). Having this feature, while it does seem somewhat dated, would be really great! It’s still quite useful when trying to eke out all the file size savings you can.

  • Warren Young — 12:45 PM on August 12, 2010

    I think if you ask the team, they’ll tell you the reason SFW doesn’t currently do alpha transparency for 8-bit PNGs is that the only way to get transparency with PNGs in IE6 is to use single-color transparency with 8-bit PNGs. This limits PNG to the same feature set of GIF, which is probably where the limit comes from: they can just use the same code path once they decompress the PNG.

    So, I think if you start supporting alpha blending with 8-bit PNGs, you have a potential UI problem: a lot of existing online HOWTOs will break because they just say something like “use 8-bit PNG to get transparency in IE6″.

    I maintain a web app that still has to support IE6. I don’t think your proposed feature is a bad idea, exactly, but I don’t think I’ll be able to use it for another few years yet, and I think it’ll cause some confusion in the meantime.

    If IE6 wasn’t an issue, I certainly could use the feature. One of the things my web app displays are TV channel logos (the NBC peacock, for example), most of which are very simple, color-wise. 256 colors is more than enough for most of them. We’re using SFW’s matting feature to get nice blending in the background, which is a solid color in our web app, so we’re fine as far as that goes, but it’d be nice to get alpha transparency.

  • Bill Brown — 12:57 PM on August 12, 2010

    Meh, the Fireworks workflow is much more optimized for web and mobile work.

    [Be that as it may, a far greater number of people use Photoshop for this work, and no one (not Macromedia when they put their full weight behind it during the dotcom heyday (after which they left it to rot), not Adobe after buying and re-investing in Fireworks) has been able to change that. It is what it is. We’ll serve people where & how they want to work. –J.]

    I would like to see time invested in making these tools better in Fireworks rather than tacking them onto Photoshop.
    I only use Photoshop when working with very large high-resolution images, photo-retouching, or 3D work. Fireworks handles everything else nicely.
    I’d prefer that each tool (Photoshop and Fireworks) be optimized for their target purpose instead of trying to merge every feature from one to the other.
    That said, it is odd that Photoshop can’t export a seemingly essential format.

  • Klaus Nordby — 1:45 PM on August 12, 2010

    Yes! I have done UI design for application development (Borland Delphi and MS Visual Studio) where 8-bit PNG transparency is needed for all kinds of UI widgetes — but to get that from PS I have had to export as needlessly large 24-bit PNGs, which is usually overkill in the color department, and only leads to bloating the final compiled app size. So: Yes — please!

  • BJN — 2:25 PM on August 12, 2010

    I hate switching to Fireworks, so I’ve been creating apparently bloated PNG-24 graphics. It’s time to look at a new generation of interoperability. Instead of a stand alone Flash, give Photoshop a seamless Fireworks mode with all of the Fireworks capability.

    In the interim, you could provide a save-for-web Photoshop option that invokes full Fireworks functionality.

    Provide smart sharpen for whatever save-for tools you provide.

  • BJN — 2:26 PM on August 12, 2010

    Er, that’s “stand alone Fireworks”…

  • Chris V — 3:25 PM on August 12, 2010

    Just another yes vote on this one. Who wants bloated PNG-24 files when doing a simple gradient of a single color?

    The argument against putting the development effort into it (assuming the Fireworks people can’t tell the Photoshop people how to do it!) is that it all becomes less important with the advent of CSS3 gradients for this sort of thing.

  • Allen Cobb — 3:51 PM on August 12, 2010

    I would definitely use it. I prefer PS because I’ve spent so much time developing its required skillset, and it’s so bloody powerful for so many kinds of work. Saving in 8-bit formats is always preferable if the quality is sufficient for the application, and filesize is almost always an issue for me. (I don’t send 1200 dpi files to an inkjet, either.) I use PS images in web work and Flex and in desktop apps, and would frequently use 8-bit PNG with alpha if it were available in PS.

    As for the IE6 issues — the more reasons for people to stop using the damn thing the better.

  • Hhhhh — 4:11 PM on August 12, 2010

    “, not Adobe after buying and re-investing in Fireworks) has been able to change that.”

    actually listing it on your product pages might help, and shouting about how good it is. Instead Adobe just ignores it because they don’t seem to even know how people work

  • Trevor Morris — 4:54 PM on August 12, 2010

    I use PNG all the time (mostly for Web design and Iconography), and when transparency is required, unfortunately it means having to use 24-bit, even if there aren’t a lot of colours. The expression “killing ants with a sledge hammer” comes to mind. Occasionally, I’ll even use a DOS-based application like PNGQuant to convert 24-bit transparent PNGs into 8-bit alpha indexed PNG files, but admittedly that’s a rarity. I’ve long wished for alpha indexed PNG support in Photoshop! Thanks for asking this question, John.

  • Charlie Hayes — 5:12 PM on August 12, 2010

    Yes, and please improve the quantization algorithm that Fireworks uses. The quantization algorithm in PhotoShop is better but it doesn’t support the alpha channel. ImageAlpha is really good: http://pornel.net/imagealpha. It would be great to have this sort of stuff built into PS and FW.

  • SBG — 5:51 PM on August 12, 2010

    It’s a feature I use from time to time. I’d love to be able to cut FIreworks loose all together.

  • Matt — 8:46 PM on August 12, 2010

    Definitely, just for smaller file sizes. Currently I post-process in PNG Guant from pornel.net, so removing the extra step from my workflow would be great.

  • Armand — 9:44 PM on August 12, 2010

    8-bit with alpha is very important to me as well, for the same reasons presented above.

    It’s one of those features I’d like to see in a point update to Ps, rather than wait for CS6…

    I must also stress what Charlie said above – Fw’s “adaptive” mode is inferior to Ps’ “Perceptual” mode, which currently frustrates me:
    – I can either have great 8-bit PNG’s without alpha or flawed PNG’s with alpha…

  • teeth id pro — 10:41 PM on August 12, 2010

    I dismiss this Transparent PNG8 approach because I wasn’t going to spend $300 on a piece of software (Adobe Fireworks) just to be able to do something a certain web browser should already be capable of doing.

  • Doug Neiner — 10:52 PM on August 12, 2010

    Hey John, this is totally relevant to me. I am always working to shave off even a few k from an image. I rarely use this feature to provide IE6 support, but i use it non-stop to shave the size down as small as I can get it. I would love if Photoshop supported this out of the box. My current workflow is 1) Save for web > 24-bit PNG 2) run Optipng on it: “optiping -o7 file.png”. Saving the extra step would be killer.

    The problem with just Optipng is that it only works when there are already less than 256 colors. I would like it to work like the normal 8-bit export, but with full variable transparency so I can reduce the colors as much as possible, while still retaining the full transparency spectrum.

    • Doug Neiner — 10:54 PM on August 12, 2010

      I’d also add I really use this on almost every one of my sites on almost every image that could possibly benefit from a smaller file-size. Feel free to hit me up on Twitter (@dougneiner) if you need more info.

  • Michel — 1:36 AM on August 13, 2010

    Hmm, one more Fireworks feature to be copied (stolen) from Fireworks feature set and ported to Photoshop… This speaks well of Fireworks! ;-)

    Now — we must agree that each tool has a main purpose. Fireworks is concentrated on the web/screen workflow, while Photoshop is more of a “universal tool” (print, web, photo retouch, etc.). Instead of adding more and more features to one app (Photoshop), I would try to educate users to use the proper tool for each task.

    One of the commenters above have said something very true, btw:

    [ quote ]

    “…not Adobe after buying and re-investing in Fireworks) has been able to change that.”

    Actually listing it on your product pages might help, and shouting about how good it is. Instead Adobe just ignores it because they don’t seem to even know how people work.

    [ /quote ]

    Would you like to comment on that?

    On http://www.adobe.com, there is no Fireworks icon + link at the top left (where main Adobe apps are listed — incl. Photoshop, Ps Elements, Illustrator and InDesign and Flash); in the “Products” dropdown, Fireworks is missing, too; now, how can Adobe claim that they are doing so much with Fireworks, if they even do not list it in “Products” list on their main page, viewable by millions of design professionals each month??

    This is clearly a message to the Adobe userbase, and it says more than your words…

    Comments? :)

    [I suppose I can ask the Fireworks PM what’s up. There’s only so much space on the high-profile pages, and it has to be reserved for A) the most popular products and B) up-and-coming apps. Unfortunately FW is neither, and after a couple of revs of trying hard to change that, perhaps Adobe has taken the community’s hint. (Fair warning: I’m not going to debate this all day in comments. It is what it is.) –J.]

    • Michel — 5:01 AM on August 15, 2010

      Yes, you could ask the Fw PM about it, thanks! And just to clarify — Fireworks icon/product link has never been on http://www.adobe.com frontpage and/or in the Products dropdown menu! So…

      Unfortunately FW is neither, and after a couple of revs of trying hard to change that, perhaps Adobe has taken the community’s hint.

      …actually, Adobe has never taken any hints from the community — Adobe has always kept Fw in the shadows — no link on frontpage, no mention in “Products” dropdown, no mentioning in press releases, no product demos when announcing a new major version of CS (CS3, CS4, CS5)!

      Yes, I understand that you wouldn’t like to discuss these matters here — and I do agree that this is way off-topic; however, I have (and not only I!) been trying hard to get any feedback from Adobe on why Fw is always “kept in the shadows” and I really never got an answer… At least, you try to reply to people asking questions, and I very much respect you for that!

      [/end offtopic]

  • Michel — 1:43 AM on August 13, 2010

    One more thing — a recent article at Web Designer Depot:

    http://www.webdesignerdepot.com/2010/08/7-reasons-why-i-choose-fireworks-over-photoshop/

    …sparkled quite a lot of comments from design professionals. It’s worth taking a look at both the article and the comments. You might re-think your attitude “Photoshop is used by every designer for every purpose imaginable”

    [It’s not an “attitude,” it’s a statement about market share and active use. Fireworks is a great product, and I’ve always said so. I’m not going to get into pissing matches about it. I’m just going to try to make things better for Photoshop users. –J.]

    — actually, many designers are preferring Fireworks for web/screen design — only, it seems that Adobe continuously ignores this ever growing segment of its professional users!

    With that said (and back to the topic of your question) — yes, I do sometimes need PNG8+alpha transparency. Only, because I work for Web most of the time, I export directly from Fireworks, so I don’t need Ps to have this feature built-in. Plus, Fireworks supports both alpha and index transparency in the PNG8 export format, so by using Fireworks, I have access to this double benefit feature! :)

  • Zev — 4:49 AM on August 13, 2010

    I didn’t even know 8-bit PNGs had the ability to support 8-bit transparency! Apparently my single minded devotion to PS has been insulting me from the truth.

    8-bit transparency could be useful for some items, like this small rank image we use on our forums…
    http://i.imgur.com/nA6Gn.png

    Overall this feature isn’t a big deal, but I’m curious as to what other wonders Photoshop has been sheltering me from. =D

    PS
    How about killing the Restrictive (216 web colors) palette option? I doubt anyone is using that in 2010…

    PPS
    Still annoyed that CS5 apps show fonts disabled by the Windows 7 font manager.

  • Fred — 6:24 AM on August 13, 2010

    Far more than I do about Flash panels, yes.

    Bandwidth is hugely important on mobile devices, so are HTTP requests. We want requests and file sizes as small as possible. 8bit alpha on an 8bit image is extremely useful for that.

  • Pablo Jeffs — 7:06 AM on August 13, 2010

    First my apologies, English is not my native language.

    Save for web is a option with many differences at Ps / Fw scenario.

    Ps is the leader in the market but not is the army knife. I hope see more consistences and not differences at the CS5.

  • Ken Storch — 8:55 AM on August 13, 2010

    I haven’t needed any PNG-8’s for some time, but just this week I ran across several WordPress themes and related software which used PNG-8 extensively.

    Not a priority for me, John, but there seem to be folks out there still relying on it.

    Ken Storch

  • salvis — 1:34 PM on August 13, 2010

    This is partially off topic, but I work with 1-bit Tiff images in Photoshop (black & white 400dpi 24in. x 36in.) and need G4 fax compression. Strangely, this is not an option in PS when saving tiff files. Would this be too hard to add? It would be nice not to have to open it in GIMP just to save it in this format after making modifications in PS. G4 fax encoded tiff is the native format for our scanner for large drawing files, and is the best compression for 1-bit images.

  • Jan Kabili — 5:25 PM on August 13, 2010

    Yes. Do it. Most people do look to Photoshop for making web graphics (sorry Fireworks-lovers). I know this because my lynda.com courses, Photoshop CS5 for the Web (like earlier versions of same) continue to be one of the most popular courses among the hundreds of courses in the lynda.com library. So anything you can do to improve Save for Web and Photoshop’s web offerings will be useful to many of your users and good for your business. 8-bit PNGs with variable transparency-big YES!

  • Matt Strauss — 11:30 PM on August 13, 2010

    Hey John, for me, it’s all about Blu-Ray. BD HDMV menus and subtitles utilize png-8 alpha, and it would be awesome to be able to work with these images directly in photoshop. Count me in!

  • drs18 — 5:52 AM on August 14, 2010

    I’m surprised anyone would ask if people actually use alpha on PNG8. Of course they do- and more would if Photoshop could write it. I always thought Adobe would fix this quietly in a small update so we would just discover it one day and think, “well, Photoshop had it rigght all along…” But it never happened. I presented a tip at a recent web conference and no one in the group even knew transparency from alpha in PNG8 was possible. In most training, they’re told that PNG8 is indexed and you should use “index transparency”. The kicker was opening a small PNG8 with alpha transparency in Photoshop after everyone saw that it looked beautiful in a browser.
    Geez, just fix it and move on.

  • David — 10:54 AM on August 15, 2010

    Yes Please! I would use it in photoshop all the time for web work where I dont need the color level or a bloated, oversized file but need more than one level of transparency. It has been a source of frustration to switch back and forth just for this purpose…

  • James Conner — 10:21 PM on August 15, 2010

    This discussion wouldn’t be necessary if Adobe would roll Fireworks into Photoshop. I’ve gotten along with PNG-8 & PNG-24 out of Photoshop for years without a problem, but it’s hard for me to understand why PNG-8 doesn’t offer exactly the same features in all Adobe products in which it’s included. And I cannot imagine that anyone would base a choice of Photoshop or Fireworks on PNG-8.

  • Chris Perkins — 4:19 PM on August 16, 2010

    It would be a welcome addition to Save for Web.

  • Rick O — 11:23 AM on August 19, 2010

    Indexed-alpha 8-bit PNGs are great for things like texture/grunge masks — get one greyscale mask file and use it as a background on top of any color via CSS. For such a use, the detail of the mask is key, and much of that detail is in the transparency. (And, if optimized correctly, there’s one color [black] and it’s the alpha that creates the effect.) The same effect can be accomplished with 32-bit PNGs (what PS calls 24-bit), but at a much heavier file weight. So, yes, having support in PS would be great.

  • Ian — 5:12 AM on August 20, 2010

    Alpha support for 8-bit PNG in Photoshop would be a very welcome addition.

    There are plenty of people that don’t even realise it’s possible to do, because it’s not built into Photoshop. I think the usage (and use cases) would grow as a result of Adobe adding it.

    It has plenty of value in standard web site design, not just mobile that you mention in your question. Any time you have an image that compresses well (both visually, and file size) as an 8 bit PNG – but is too large as a 24 bit PNG – that needs to have anti-aliased edges sitting over different backgrounds colours is a good use case.

  • KatieK — 1:31 PM on August 25, 2010

    Please oh please, yes.

    I want to be able to do this – http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ – in Photoshop. The web code is much cleaner when I can have one single image for all browsers, with degraded functionality for IE6 and lower.

    For now and the foreseeable future, I have a much greater need to support IE6 than to support mobile devices.

  • pim — 1:47 PM on September 21, 2010

    John, I know I’m a bit late to the party, but yes: 8 bit transparancy for 8 bit PNGs would be a nice addition. But why not go all the way? It seems there’s some stuff you can’t actually do with “Save for web and Devices”. Like save out true grayscale PNG’s (whenever I read them back in, Photoshop sees them as “Indexed color”, whereas the normal “Save As…” -> PNG will produce a “true” grayscale image).

    I also noticed that Fireworks allows for more (non-web) formats, and this would be welcome too. Slices are not just used for web, they’re very handy for anyone who’s creating GUI elements for software development (be it mobile or desktop). I’m using slices in combination with NVidia’s “Mipster” Photoshop script to save out Mipmaps levels for textures in 3D applications. Truly handy, but especially in that area we need to have full control over what gets saved out (it’s not clear how PNGs are packed now, my PNG parsers tell me that they’re RGB, even if I save them out as “grayscale”, not good! TGA or TIFF and maybe even PVRTC formats would be welcome.

  • Chris Masters — 6:28 AM on October 08, 2010

    I would just like to add a big YES to this.

    It is really annoying to have to either boot up fireworks or use pngcrush on the command line just to create IE compatible png images with transparency. Please include it to the next version of photoshop I would be very grateful!

  • Yeal — 12:48 AM on October 23, 2010

    Yes. i use it in Flash game production. In fact I am now used to doing batch convert with Fireworks. I convert PNG24 to PNG8+8. In the context of SWFs being one single file filled with code and graphics rather than markup which loads individual media objects it is important to keep the file size down and PNG8s are a great way to drastically reduce file size.

    You couldn’t introduce better preparation dialogue for importing multilayer transparent PSD could you?

    The conversion possible into frame by frame movieclips from PSD Layers is useful but can create bulky file sizes and ugly artefacts.

  • Jim Jordan — 9:47 AM on February 09, 2011

    I’m late to this topic, but YES! Please include 8bit transparency with PNG8 files. The absence of this is a major annoyance. IE6 is dead/dying but we can still make use of the smaller file size.

    Here are the hoops we must jump through now…

    http://www.ethanandjamie.com/blog/81-png8-transparency-without-fireworks

  • Gavin Stokes — 8:27 PM on March 15, 2011

    It’s hugely relevant, for (among other things) the purpose you mentioned: mobile development. I was just preparing an iPhone UI element with Photoshop and found that it’s useless because this PNG transparency defect still exists in CS5.

    Incredible.

  • Alex Beltramo — 12:06 PM on March 20, 2011

    PLEASE! We are developing an isometric role-playing game for the web and mobile. The png figures (monsters, etc.) have a built-in shadow as part of the art, and the shadow need to be semi-transparent so that the floor below can be seen.

  • Palmer Woodrow — 5:35 PM on April 01, 2011

    And this shouldn’t be buried in “save for Web”. It should simply work when saving PNGs.

  • Christian Yurman — 6:37 AM on April 11, 2011

    We will see many of these with HTML5/CSS3 not only jQuery.

  • Eric Guerin — 4:32 PM on June 09, 2011

    Yes, this is very important, I hate having to prep a photoshop file, save it, open Fireworks, Image Preview…, Alpha transparency 8-bit! Too many steps…very surprised this feature is still lacking in Photoshop CS 5.5

  • Chris — 4:07 PM on August 30, 2011

    I deal with png-8 images with alpha transparency on a weekly basis.

    I was astonished to learn that Photoshop, a $$$$$ program, lacks support for them. Get it together Adobe!!

  • Mattyk — 4:21 AM on September 01, 2011

    Every 6 months or so I have a little search on the web for photoshop plugins. Or even a free alternative to fireworks. Can’t believe that at CS5 photoshop still hasn’t fixed this.

  • Donna — 2:07 PM on September 30, 2011

    I’m developing more graphicly interesting sites these days, and the designers I work with love to use transparent overlays. They look great, and with PNG-8 are lightweight. It’s annoying to have to fire up Fireworks for them, and inconceivable that Adobe’s extremely expensive flagship product (Photoshop) still doesn’t support PNG-8 with alpha transparency.

  • Rich Morey — 9:06 AM on October 21, 2011

    Just starting to learn JQuery Mobile and the file format for icons it wants is PNG-8 with transparency. Would love to be able to do this with Photoshop.

  • Christopher Anderton — 12:12 AM on November 19, 2011

    I use Photoshop. I need 8-bits PNG with full alpha. There is no discussion. Just do it! ;-)

    While waiting i use this little open source app called ImageAlpha (Mac) (Google it) that converts 24-bits PNGs with alpha to 8-bits PNG with alpha with amazing results. Saving almost 70-80% on every file i drop on it.

  • Felix Buenemann — 6:38 AM on January 26, 2012

    This has been THE feature missing from Photoshop’s Save for Web dialog. PNG8+alpha is by far the most useful web graphics format besides jpeg. Only in rare cases you need the increased alpha resolution and color range of PNG32.
    It not only saves a lot on filesize it also helps decrease memory usage, which is very important for todays memory limited mobile devices.
    I currently use a combination of several commandline utilities via the png8 script to generate my 8-Bit+alpha PNGs from 32bpp files.

  • Yang shaobo — 1:28 AM on February 28, 2012

    As a web designer, Yes We Need!!!

  • Don Quinn — 6:05 AM on June 21, 2012

    Just noting that PS CS6 did not add this feature.

    CS9 maybe?

  • DeeKay — 7:19 AM on September 06, 2012

    What kinda question is that? OFCOURSE we need it! Have you ever saved anything bigger than a button in PNG24 just because you needed the alphachannel? Being lossless, the files quickly become huge! And if we did not care for size, why would we need the ‘save for web’ feature in the first place?? P.S.: The tRNS chunk feature is in the original v1.0 spec – from 1996!! Get your act together, Adobe, this is simply embarassing…

  • Matt Wagner — 11:55 AM on October 15, 2012

    Just wanted to add my voice, and my perspective, to the clamor for this feature.

    I think the other comments on this post more than suffice to extoll the advantages of bringing full-transparency to the PNG-8 format in PhotoShop/ImageReady in terms of the intrinsic virtues of the format itself – I’d even go as far as saying it’s Adobe’s responsibility to web standards to promote the use of this format as a means of lightening the bandwidth load for millions of websites across the world.

    The simplest example I can think of as a use-case that would benefit, in particular on mobile sites, is that of a round button image on a background containing a horizontal stripe. The transparency tool currently available in ImageReady would simply not accommodate saving the button in PNG-8 format with adequate alpha transparency to account for the stripe – so a PNG-24 image has to be created instead or, worse, the stripe has to be built into the button. How 1997!

    Taking therefore both the advantages of the format and the applications as self-evident, I’d like to add a note about workflow to address the question of “how I’d use it/why it’s important for it to be a part of PhotoShop:” as more and more designers board the “web development” teams at mainstream companies, they are taking on more of the web image optimization responsibilities that “webmasters”/developers and hackers used to claim as their speciality/dark art.

    With this simple fact in mind concerning the evolution of workflows, simplifying the process of image development is of renewed importance: it is not in the typical purview of designers to fiddle with tools that interfere with the creative process itself, and given that PS/AI are the de facto standards for asset creation, it seems critical that their export tool, ImageReady, be up to snuff when it comes to producing the best, most optimized renditions of their art. The designers I’ve worked with would easily adopt a checklist of settings to use in exporting images from their creation tool; it’s a much harder sell for me to teach them an entirely new tool such as Fireworks only to meet a goal specific to my agenda as “webmaster” overseeing site performance. It’s not that they couldn’t learn it, it’s that it complicates the process.

  • matsaukeo — 6:57 AM on October 26, 2012

    Finally! Every 12 months or so for the past 8 years I search for a way of doing this through photoshop. I normally save the file as a PSD and then have to re-open in fireworks. This would save me a massive amount of time.

    Two reasons why semi transparency is essential to me.

    1) File size is way lower than 32bit. – Sometimes the image has too much banding to be a png8 but I need to decide that on a per use basis.

    2) Although ie6 ignores the semi transparency completely, it at least looks better than they grey box around png32. On things like icons this is what I’d prefer.

    Please, please please add this support to the save for web.

    Thanks

  • Chris Converse — 2:10 PM on November 11, 2012

    What kills me is that Creative Suite 2 had this all figured out. ImageReady and GoLive were years ahead of their time… 7 to be precise. GoLive’s SMIL and SVG animation editor (which is *finally* being re-imagined in Edge Animate) and ImageReady’s multi-slice sets, roundtrip with Photoshop and pixel-based variable capabilities remain **unmatched** by anything the unfortunate Macromedia acquisition has ever provided us faithful Adobe customers with.

  • Garconis — 1:47 PM on November 15, 2012

    I was just disappointed to find that when trying to output a PNG-8 image with transparency, it didn’t let me do it the same way a normal PNG would work. My only option now is an oversized PNG file. :( Thanks CS6! (NOT!)

  • DeeKay — 6:01 AM on February 05, 2013

    The worst thing about all this is that Fireworks, which does officially support PNG8 with Alpha, sucks so much. Not only does it seriously lack in the dither-options department, its choice of palette colors also remains a complete mystery (it seems to freely choose between faking transparency through dithering and actual transparency). It is also incapable of correctly saving without alteration a hand-prepared PNG32 that only has 256 colors (=16 colors with 16 transparency levels).

    Come on, Adobe! PNG8 with Alpha is NOT Rocket science! I can do it by hand, although it’s work intensive (and Fireworks fails, like mentioned!). You simply dither Alpha in X levels and the Picture in Y colors, while X*Y may never exceed 256. It just needs one extra pulldown for Transparency levels (max. colors and transparency levels adjust whenever one of the other values is adjusted!), three new options for Alphachannel-Dither in the Transparency pulldown (error diffusion, pattern, noise) and maybe an extra slider for the strength of the alphachannel-dither, so you can adjust that separately from the picture dithering. Ofcourse, the color picker would need an extra transparency slider, too, to be able to manually adjust that per color in the palette area!…

  • Chris Converse — 10:06 AM on February 05, 2013

    i have been using imagealpha (macintosh) to convert photoshop-png24 to variable transparent png8 — it works great, and really helps with tools like Edge Animate, iBooks author, and general jQuery work – where manipulating image elements lags with larger images (some images can be compressed by 78%! — and, there are other tools out there for both platforms) — http://pngmini.com

  • Carl Erling — 2:28 PM on May 04, 2013

    Funny question. Simple and obvious answer: YES.
    And also for AI / Save for Web!!!

    Fireworks is not an option (any more). I share DeeKay’s opinion from 2 comments above.

    Ask Google how they like slow loading websites these days.

    Unbelievable, that question was asked in 2010 and in 2013 we still need 3rd party converters like ImageAlpha to make small transparent PNGs for the web. That complicates our web development workflow.

    I was fearing that the new Adobe Cloud System could slow down the CS development, including DW, AI and PS, since there are not paid upgrades any more that bring fresh money but now the money comes automatically, month by month.
    I hope you prove me wrong. :-)

  • Cory Thomas — 3:37 PM on June 11, 2013

    I find 8-bit alpha PNG’s to be useful for two things:
    • Highly optimized web images
    • Efficiently compressed game graphics

    Browser support for CSS clipping is not quite ubiquitous yet. But even if it was, it’s still extremely convenient to be able to store alpha information within the image itself. PNG32 images tend to be way too heavy for use on websites (this goes double for mobile), so indexed color images tend to be much more practical when transparency and translucency are desired. Furthermore, small high-density screens make dithering nearly impossible to see, so indexed-color images tend to look really good on mobile devices. In a perfect world, JPEG images would support alpha channels, but that’s unlikely.

    For a game, it is critical that its download be as small as possible. The bulk of download and “loading” time is actually spent transferring and decompressing large resources. The majority of a game’s graphical assets tend to lend themselves to indexed-color compression because they are often small repeated images. But character animations and icons usually have irregular shapes. Even 3D texture maps could benefit from efficient compression with inherent alpha channels. PNG-8 with alpha also lends itself well to rasterized vectors which can be used in title screens and menus.

Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)