saving graded transparency for indexed png's - Site Graphics and Multimedia Design forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

saving graded transparency for indexed png's

sssweb

1:35 pm on Jun 18, 2012 (gmt 0)

10+ Year Member

I have some .png web images that I need to tweak. When I open them in my graphics app (I use GIMP), they show up as indexed, with no graded transparency (not sure if that's the correct term; I'm referring to the gradually increasing alpha value around the edges that makes the image look smooth to the eye, like font antialiasing). However, the alpha grading is there when I view the image on my site. Also, it has an alpha channel in my app, and when I change it from indexed mode to RGB, the grading appears.

That's all fine. The problem occurs when I tweak the image and re-save it. It's fine if I save in RGB mode, but the file size is 4 times larger than indexed mode, so I prefer the latter. But when I try to save it, I lose the alpha grading (even though the channel's still there). It's gone in web view and if I re-open the image and change back to RGB mode, it doesn't show up.

Is there some trick to saving a png in indexed mode while keeping the smooth image edges? (If it matters, the image file is a simple, one-color, icon sheet.)

rocknbil

3:38 pm on Jun 18, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

This is not a GIMP issue, it's this way in Photoshop too. You can only save semi-transparent images as .png. That is, if a portion of the image itself is to be transparent, you can't do it with .gif (that I've ever known of.)

Gif supports transparency, but it's 100% transparent and is only useful for background knock outs or other knock outs where it won't destroy the image if the edge is sharp. There is no anti-aliasing in .gif - because it doesn't support semi-transparent pixels.

You might look at the settings in GIMP for saving under that format, but .png is mostly uncompressed, so it's a trade off. If you can figure out how to make it work with .gif, that will be the smallest file size.

sssweb

4:04 pm on Jun 18, 2012 (gmt 0)

10+ Year Member

Thanks - just to be clear, I'm not trying to save it as a .gif; I want to save it as an indexed .png (there's no way to make .gif work).

I know about .gif's and wouldn't have expected to be able to save an indexed .png with semi-transparency, except (as mentioned in my orig post) that's how it came in the 3rd party files I got (jQueryUI theme set).

I checked the GIMP manual again; if it's there, I don't see it.

sssweb

4:20 pm on Jun 18, 2012 (gmt 0)

10+ Year Member

Is there a chance it has to do with saving it in PNG-24 format vs. PNG-8 ? There's a file menu option 'Save for web' that lists two .png formats. I tried and couldn't get it to work, but maybe you know more about it than me.

rocknbil

4:07 pm on Jun 19, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

It's been too long since I worked with GIMP for precise instructions, but I think the problem is the indexed color. There's no allowance for transparent pixels.

I may have confused the issue - you can save a .png as indexed color, but as soon as you do, features not supported by .png are thrown away. That's generally why you use .gif if you're going to create indexed color.

The reason indexed color can be so lightweight is it works with a reduced palette. Let's say I have an image that will render fine with an 8 or 16 color palette. Those 8 colors are all the values that are stored in the file, and the file format maps out which pixels get which color.

Contrast that with .png, which can contain up to 16 million colors as well as transparent pixels and other data, and that's a lot of info to store.

sssweb

6:58 pm on Jun 19, 2012 (gmt 0)

10+ Year Member

Yes, I understand all that. What I don't understand is how my jQueryUI theme set came with indexed .png images that show semi-transparency on the web, and when I open them in GIMP and switch to RGB mode, the semi-transparency is there (which isn't the case when I save the indexed .png myself).

Somehow, they figured out a way to store the semi-transparency info in the indexed file. Just thought someone here might know how.

rocknbil

8:21 pm on Jun 19, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

from the manual, this [ie.technion.ac.il]?

sssweb

1:09 pm on Jun 20, 2012 (gmt 0)

10+ Year Member

For a minute there, I thought you found it. But...I know about semi-flattening and can't use it here because the background color can change. The files I got manage to preserve semi-transparency without resorting to that.

I thought maybe there was a simple trick to it that I didn't know; that seems not to be the case. Since this isn't a major issue (I'll just use my regular .png's and live w/o the file-size savings of indexing), I don't want to take up more of your time.

Thanks much for the attempt, and thanks for the manual ref; that's different than the one in the app and has good info in it.