Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Crappy Image Resizing in WPF? Try RenderOptions.BitmapScalingMode

Pete Brown - 01 May 2010

A WPF enthusiast on twitter is building an application. They noticed that the images they were using looked like crap in the toolbar. We checked, and it wasn't an issue of SnapToDevicePixels or UseLayoutRounding. Nope, this was something else.

So I asked him to send me the whole project. Turns out the tiny toolbar images are actually 512x512 32 bit PNGs. While resizing those should definitely be on the To Do list for this app, depending on how the images are used, I thought I'd at least figure out how to fix the display.

When resized to 25x25, the images looked like this:

image

Here's a close-up (screen grab taken in the IDE, which is why you see the rectangles)

image

The solution is to set the RenderOptions.BitmapScalingMode to a higher-quality resize.

<Image RenderOptions.BitmapScalingMode="HighQuality"
       Source="/Images/Public.png"
       Width="25"
       Height="25" />

I chose HighQuality. There are several values that range from quick and dirty to smooth but slower.

Once set, here's what it looked like:

image

and zoomed in:

image

You can definitely see the difference in how the resizing was accomplished.

     
posted by Pete Brown on Saturday, May 1, 2010
filed under:      

16 comments for “Crappy Image Resizing in WPF? Try RenderOptions.BitmapScalingMode”

  1. Gravatar of Khalil MuhamamdReply
    Khalil Muhamamdsays:
    Saturday, May 1, 2010 at 4:56:43 AM
    Quite interesting, I have had similar problems where I had to resize the images in a photo-editing tool just to maintain the picture quality. I didnt know that RenderOptions.BitmapScalingMode gave the same result - now I do. Thanks for sharing.
  3. Gravatar of PeteReply
    Petesays:
    Saturday, May 1, 2010 at 10:59:00 PM
    @Marauderz

    As I recall, Silverlight always uses a pretty high-quality image resizing algorithm. Rule of thumb for that, however, is to not resize below 50% of the original size or you will see *some* degradation.

    Pete
  4. Gravatar of MarauderzReply
    Marauderzsays:
    Sunday, May 2, 2010 at 12:24:06 AM
    @pete, unfortunately that's not acceptable in some cases (ie. when attempting to create a high quality photo printout) thus I'll have to stick with my custom bicubic resize code then.
  5. Gravatar of DidierReply
    Didiersays:
    Sunday, May 2, 2010 at 1:13:15 PM
    @pete, would you know of an efficient way of resizing images in Silverlight? I have posted a question at the forum but haven't received an answer yet. Maybe you can help.

    http://forums.silverlight.net/forums/t/179116.aspx

    Thank you in advance.

    Didier
  6. Gravatar of PeteReply
    Petesays:
    Monday, May 3, 2010 at 4:07:26 PM
    @Marauderz

    Are you using Silverlgiht 3 or 4? Silverlight 4 has much nicer image resizing, better than bilinear

    @Didier

    I spoke with the product team on your question. The image you're trying to resize, when uncompressed, is around 465mb. That's a pretty tall order. Are you targeting Windows-only or x-plat? If Windows-only, there may be a way to do this using COM and system APIs for image resizing and/or thumbnail retrieval.

    Pete
  7. Gravatar of DidierReply
    Didiersays:
    Wednesday, May 5, 2010 at 12:06:13 AM
    Hello Pete,

    Thank you for speaking to the product team about this issue.

    I am creating a Silverlight 4 OOB application that needs to work on both Mac OS and Windows.

    It is a little tool that allows users to browse their Pictures folder, update the metadata on pictures and publish them to their website. I can't really control what images the users will have on their hard drive and I am trying to anticipate worst case scenarios where users would have several high quality images in one folder.

    So, in other words, you click on a folder and it displays thumbnails of all the images you have in that folder.

    I am wondering how to clear the memory after each thumbnail creation to make sure I will never get an out of memory exception.

    ---
    Didier
  8. Gravatar of DidierReply
    Didiersays:
    Sunday, May 9, 2010 at 4:05:26 PM
    For now, I will display an error message stating that the application wasn't able to process all the images due to there resolution being to high.

    I don't believe that people use images bigger than 2MB so the application will work well in most cases. It would have been nice if the application wasn't using a lot of memory just to create thumbnails though.

    Let us know as soon as Microsoft comes up with a work around.

    ---
    Didier
  9. Gravatar of EricReply
    Ericsays:
    Thursday, May 13, 2010 at 10:03:34 AM
    Pete,

    Did the default bitmap scaling API change from .NET 3.5 to .NET 4.0? I am generating thumbnails (VisualBrush to RenderTargetBitmap) from my windows, and in .NET 3.5, the thumbnails (48x48) were perhaps a tad blurry but they were an accurate representation of the source window. In .NET 4.0, the thumbnails look perhaps sharper, but there are a lot of artifacts. I've tried various values for BitmapScalingMode, but I do not seem to be able to get back to the way things were. Interestingly, I also generate 256x256 thumbnails of the same windows to use as tooltips, and those I actually like better in .NET 4.0 -- at that size, the added sharpness does not create artifacts.

    Thanks,

    Eric
  10. Gravatar of PeteReply
    Petesays:
    Thursday, May 13, 2010 at 11:47:51 AM
    @Eric

    I need to double-check with the team, but I believe the algorithm changed so generating very small images from very large ones gives you the results you saw in this post. The person who asked me about this originally pointed out that the resize worked as expected in 3.5 but not in 4.

    Have you set the RenderOptions.BitmapScalingMode? I haven't personally tried that on a VisualBrush.

    I'll find out exactly what changed in 4 and post an update.
  12. Gravatar of KenyonReply
    Kenyonsays:
    Friday, June 4, 2010 at 11:17:18 AM
    I added the following xaml to my resource dictionary and now my images are rendering the same way they did in 3.5. Thanks for the blog!
    <Style TargetType="{x:Type Image}">
    <Setter Property="RenderOptions.BitmapScalingMode"
    Value="HighQuality" />
    </Style>
  13. Gravatar of Stefan OlsonReply
    Stefan Olsonsays:
    Tuesday, July 20, 2010 at 7:11:47 PM
    For those having problems with VisualBrush/RenderTargetBitmap I have described a workaround on my blog:
    http://www.olsonsoft.com/blogs/stefanolson/post/Workaround-for-low-quality-bitmap-resizing-in-WPF-4.aspx

    Hope this will save someone some time. I wasted a lot of time trying to workaround this issue.

    ...Stefan
  14. Gravatar of JitendraReply
    Jitendrasays:
    Monday, July 4, 2011 at 9:55:05 AM
    Hi 10rem.net I have problem with silverlight app just I want to assing imageA to ImageB so all the RenderTransform done in ImageA and it is assing to ImageB so it will give me some flip image and some zoom type image.

    Basically I am doing only ScaleTransofm and RotateTransform into the ImageA and it is assing to ImageB.
    as an GroupTransform so it will give me wrong result.

    can you help me I am very frusted how to solve this problem..!!

    Thanks you..!!
  15. Gravatar of RandyReply
    Randysays:
    Thursday, January 19, 2012 at 12:57:07 AM
    I was having the same problems in my WPF app. I tried this and it didn't work.
    When a changed from 'Highest Quality' to 'Nearest Neighbor', my image looked fantactic.
    Not sure why, but thanks for the tip.

    Randy

Comment on this Post

Remember me