PNG images are fuzzy RRS feed

  • Question

  • I'm displaying several png files on a WPF window. These display okay, but the image is a bit fuzzy compared to the original image, so I must be doing something to distort it or render it incorrectly. I'm still digging into this but I wanted to throw this post out in case anyone has suggestions.


    Here's what I'm doing:

    Code Snippet

    Image image = new Image();

    image.Margin = new Thickness(5d, 0d, 0d, 0d);

    image.HorizontalAlignment = HorizontalAlignment.Right;

    image.Width = 16d;

    image.Height = 16d;

    image.Stretch = Stretch.None;

    if (link.ImageURL != null && link.ImageURL != string.Empty)


    BitmapImage bitmap = new BitmapImage();


    bitmap.UriSource = new Uri(link.ImageURL, UriKind.Relative);


    image.Source = bitmap;



    The image I'm trying to display is a 16x16 png. Any ideas on another way to render this? I tried the PngBitmapDecoder class with no luck, but I may have been missing something. I'm going to look into this further.


    Any suggestions would be appreciated.

    Wednesday, August 1, 2007 11:51 PM


All replies

  • The effect is caused by the anti-aliasing that WPF does for every object.

    As far as I know there is at this time no way to turn it off.

    I read about some registry values that might improve the outcome

    of the anti-aliasing, but I haven't tried these since they would only improve

    the outcome not don't do anti-aliasing at all.

    I had the same problem and my conclusion is that the only thing one can do

    is to wait until the algorithm for anti-aliasing in WPF is improved.


    Hope this helps.



    Friday, August 3, 2007 10:58 AM
  • Thanks for the info.


    I thought I had found a solution, but it appears to be sporadic. The anti-aliasing problem may be coming into play.


    My attempted solution was to remove the size settings on the image (where I set the width and height to 16). This seemed to clear up the images in my control library unit test project even though the image in question is 16x16, but I absolutely can't get the fix to come through to the real project. I have replaced the assemblies, tried messing around with bitmap cache settings, etc., nothing seems to work.


    So now I'm not sure if I have found a solution and then run into a bitmap caching problem, or if this anti-aliasing issue is coming into play or what.


    This is certainly a pain, especially being so close to a solution. Any additional info would be appreciated. Thanks.


    Friday, August 3, 2007 6:31 PM
  • I've written a blog post about this very issue.  Hopefully, you'll find it useful:




    Friday, October 5, 2007 11:06 PM
  • Thanks for the post. I may give this a shot but it seems quite involved. Is the issue that WPF just doesn't offer enough control in this area yet?

    Also, I found that if I put the image in a TabItem of a TabControl, then it renders perfectly. Any idea why the TabItem has this effect? Unfortunately I cant use a tab item in this case, but I'm hoping this sheds light on a more straight-forward solution, or perhaps even another container with the same desired outcome.

    • Proposed as answer by John Wycoff Saturday, February 6, 2010 1:07 AM
    Monday, December 15, 2008 3:50 PM
  • I implemented the solution and was able to get the bitmaps to render properly. Thanks.

    Does anyone know if  WPF will expose the ability to control this in the future without having to manually do it ourselves?

    Wednesday, January 28, 2009 8:24 PM
  • I know it is 2 years later but if someone else finds this as I did, here is the simple solution.

    It is easily fixed by using RenderOptions.BitmapScalingMode

    <Image Source="/images/icons/_16/search_16.png" Width="16" Height="16" RenderOptions.BitmapScalingMode="NearestNeighbor" />
    • Proposed as answer by iYalovoi Wednesday, September 29, 2010 10:09 AM
    Saturday, February 6, 2010 1:07 AM
  • Thanks mate. Helped me very match.
    Wednesday, September 29, 2010 10:09 AM