locked
8-bit PNG Transparency RRS feed

  • Question

  • I first ran into this issue while testing the new Silverlight CTP Virtual Earth Map Control. I make requests to a tile server that returns parcel lines as transparent 8-bit PNGs. Most of the time, this is fine. However, I noticed that when I zoomed in, I would sometimes get opaque grey tiles if the tile image contained little to no data. After looking through a number of message boards, the consensus seems to be that Silverlight does not support indexed transparency on 8-bit PNGs. However, this does not explain why it works for the majority of the time, and only fails when the PNG is very small. Below is some code illustrating the problem. Can anyone tell me what's going on here?

    <UserControl x:Class="PngOpacityTest.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width="768" Height="276">
        <Grid x:Name="LayoutRoot" Background="Green">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock TextAlignment="Center" FontSize="14" Text="Transparent Png 1" />
            <TextBlock TextAlignment="Center" FontSize="14" Grid.Column="1" Text="Transparent Png 2" />
            <TextBlock TextAlignment="Center" FontSize="14" Grid.Column="2" Text="No Image" />
            <Image Grid.Row="1" Source="http://irv.parcelstream.com/GetMap.aspx?tileid=02301320201123133" />
            <Image Grid.Column="1" Grid.Row="1" Source="http://irv.parcelstream.com/GetMap.aspx?tileid=0230132020112313303" />
        </Grid>
    </UserControl>
    Thursday, April 23, 2009 4:22 PM

Answers

  • Hmm, good call on checking with IrfanView. We perform some compression on the server when we create these images, and it seems that while most of them are 8-bit (and do indeed work), our compression program goes a little bit overboard with particularly small images, compressing them all the way down to 4-bit.

    I guess that solves the mystery then. 8-bit PNG transparency works, 4-bit does not.

    Tuesday, April 28, 2009 1:57 PM

All replies

  • From the silverlight docs

     

    Silverlight does not support all possible color depths that are included in the PNG specification. The following are the PNG color depths supported in Silverlight:

    • Indexed color: 1-bit, 4-bit, or 8-bit color depth (per channel).

    • Truecolor: 24-bit color depth, or 32-bit color depth (per channel) for truecolor plus alpha.

    Notably, gray scale (with or without alpha), and 64-bit truecolor, are not supported in Silverlight.

     

    http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapimage(VS.95).aspx

    Thursday, April 23, 2009 9:53 PM
  • I am aware of the documentation. From what it says it would seem to indicate that it supports 8-bit PNG, but it doesn't mention whether or not it supports indexed transparency (as I said, the consensus on that seems to be no). This still does not explain, however, why, given two images generated in the same manner on our server, one would work and one would not. The part that concerns me is the fact that transparency seems to work for images of a reasonable size, and does't seem to work for small and/or empty images.

    Friday, April 24, 2009 1:13 PM
  • It's true that SL does support 8bit PNG, but if you read carefully, it doesn't say Alpha in that line.

    Are you sure your PNGs are always 8bit? I have tested on quite a few image tiles, and I have yet to see any palette based PNGs that worked with transparency. Try and open a tile that works and a tile that doesn't in IrfanView and press 'i'.

    It's completely beyond me how Microsoft chose not to support this. It's a big overhead to have to download 24 or 32bit PNGs, and sometimes we aren't even in control of the services serving up these images. It's still not supported in SL3beta, but hopefully they will get the support pushed in for final. They are definitely aware of the problem.

    Tuesday, April 28, 2009 3:40 AM
  • Hmm, good call on checking with IrfanView. We perform some compression on the server when we create these images, and it seems that while most of them are 8-bit (and do indeed work), our compression program goes a little bit overboard with particularly small images, compressing them all the way down to 4-bit.

    I guess that solves the mystery then. 8-bit PNG transparency works, 4-bit does not.

    Tuesday, April 28, 2009 1:57 PM
  • Whaaaaaat? :-) Can you share one of those 8bit PNGs that works? I'd like to see how the PNG headers differ from mine, since I have never been able to get this to work.

    Tuesday, April 28, 2009 2:14 PM
  • Sure, this is the one I was using in the sample above, but you can play around with the tileid to see others if you'd like: http://irv.parcelstream.com/GetMap.aspx?tileid=02301320201123133

     Pretty much anything lvl 16-18 should work. Lvl 19, as I've found out, seems to have a lot of 4-bit ones. Smile

    Tuesday, April 28, 2009 2:48 PM
  • WTF ! This actually works. Both IrfanView and PhotoShop describes this as an 8bit palette based PNG. This is not suppose to work according to Microsoft, but it does.

    Microsoft Silverlighters: Care to elaborate???

    Tuesday, April 28, 2009 5:20 PM
  •  Btw... how are you creating these PNGs ? You mentioned you are processing them on the server, which might reduce the number of bits. Are you just using .NET's GDI+ libraries, or some other PNG library?

    Tuesday, April 28, 2009 5:24 PM
  • The images were initally generated as "normal" 24-bit PNGs. You can see the old ones if you go to parcelstream.com. We are using OptiPNG (http://optipng.sourceforge.net/) to compress the images, giving us the nice new ones on irv.parcelstream.com.

    Tuesday, April 28, 2009 5:50 PM
  • We just exported a few million tiles for the VE Silverlight control using http://globalmapper.com/

    The format seems to be PNG 8bit with no issues on transparent edges. I only noticed they were 8bit when trying to get the filesize down with both PNGGuantlet (4% reduction) and OptiPNG(1.5% reduction). The tiles are 256x256 and average about 45KB which I thought was a little large (hence played with other programs) but can't reduce.

    John.

     

    Tuesday, April 28, 2009 8:03 PM