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)

01 May 2010

Crappy Image Resizing in WPF? Try RenderOptions.BitmapScalingMode

     

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.

Share |
posted by Pete Brown on Saturday, May 01, 2010
filed under:      

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

  1. Gravatar of Khalil MuhamamdReply
    Khalil Muhamamdsays:
    Saturday, May 01, 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.
  2. Gravatar of MarauderzReply
    Marauderzsays:
    Saturday, May 01, 2010 at 10:46:53 PM
    And there's no Silverlight equivalent right?
  3. Gravatar of PeteReply
    Petesays:
    Saturday, May 01, 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 02, 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 02, 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 03, 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 05, 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 09, 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.
  11. Gravatar of KenyonReply
    Kenyonsays:
    Friday, June 04, 2010 at 11:09:20 AM
    Hi Pete,
    I have the same issue moving from 3.5 to 4.0 as reported by Eric. Wondering if you have any update to report. Thanks!
  12. Gravatar of KenyonReply
    Kenyonsays:
    Friday, June 04, 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

Comment on this Post

Remember me