Speeding up image loading in WPF using thumbnails

During a recent WPF session I needed to build a ListBox that showed a bunch of images loaded from an arbitrary directory. Thanks to WPF’s data binding, this was trivial – I just needed to get a collection of objects that each had a property pointing to the full path of the image, and WPF would take care of all the loading/displaying. Something like this:

   1: <ListView ItemsSource="{Binding}">
   2:     <ListView.ItemTemplate>
   3:         <DataTemplate>
   4:             <Image Source="{Binding Path=FullPath}" />
   5:         </DataTemplate>
   6:     </ListView.ItemTemplate>
   7: </ListView>

The assumption here is that the DataContext for this window is set to a collection of “Photo” objects. The Photo class has a member called “FullPath” which is just a string with the full path of the photo on disk – this is what the Image.Source member expects.

This worked, but it didn’t take long to see a major issue: With today’s cameras, loading multiple 5+ megapixel images could take a while (not to mention the RAM requirements).

After a little digging, I found a solution. There exists a feature in the BitmapImage class that allows you to load an image but tell it to only load a thumbnail. To use this, you have to step out of the shrink-wrapped data binding world and insert a converter into the equation. Basically, this converter will take the above string with the full image path, it will load the image (as a thumbnail), and pass it back into the Image.Source parameter as a BitmapImage, which it’s happy to consume.

First, let’s look at this converter’s code and how it loads the thumbnail:

   1: public class UriToBitmapConverter : IValueConverter
   2: {
   3:     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
   4:     {
   5:         BitmapImage bi = new BitmapImage();
   6:         bi.BeginInit();
   7:         bi.DecodePixelWidth = 100;
   8:         bi.CacheOption = BitmapCacheOption.OnLoad;
   9:         bi.UriSource = new Uri( value.ToString() );
  10:         bi.EndInit();
  11:         return bi;
  12:     }
  14:     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  15:     {
  16:         throw new Exception("The method or operation is not implemented.");
  17:     }
  18: }

Notice line #7. That’s the magic line which tells it how big of a thumbnail to load. The smaller the number, the quicker the load, the lower the quality. Notice also line #8 – this is there to force the image file to be closed after it’s loaded. Without that, I found that my app couldn’t write back to the image file since the ListBox still had it open.

Next, let’s look at the XAML change to insert this converter into the mix. You’ll need to create a resource for it:

   1: <Window.Resources>
   2:     <local:UriToBitmapConverter x:Key="UriToBitmapConverter" />
   3: </Window.Resources>

The “local:” namespace directive on line #2 is one I’d made sure to add to my main “Window” declaration, like this (line #4):

   1: <Window x:Class="MyClass.Demo"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:local="clr-namespace:MyClass"
   5:     Title="Demo" Height="300" Width="300">

Lastly, use this new resource in the Image element so that FullPath (a string) gets pushed through the converter before Image.Source gets it:

   1: <Image Source="{Binding Path=FullPath, Converter={StaticResource UriToBitmapConverter}}" />

That’s it. Your images will now load very quickly. Tweak the thumbnail size to vary the speed versus quality.


Comments (12)

  1. Jon says:

    Thanks. This was helpful. One other thing that I’m wondering though is if there is a way to find out what the real dimensions of the image are before decoding the image? The reason I’m wondering that is that some images might be higher than wide and some may be wider than high. I want to make my images fit in a 50 by 50 square. So, I want to set the DecodePixelWidth if it’s wider and DecodePixelHeight if it’s higher. I don’t want to images to stretch, so, I don’t want to set both values.

  2. mrj@fpr.dk says:


    I’m a newbie on WPF and wanting to create my own thumbnail viewer.

    Your code looks VERY interesting.

    Is it possible to get a sample project of your code above?



  3. timw says:

    another newbie, couldn’t integrate it into a project and get it to work.  the binding syntax to the class might help – or a sample

  4. pebbie says:

    Aplikasi image browser yang ditulis sebelumnya awalnya mengandalkan loading image mentah-mentah ( full

  5. ph says:

    Code works like a charm. I’m using it to display thumbnails of images in a particular folder. Since this view opens in a separate window it can take a pretty long time to load even just the thumbnails. Anyway you can do this for each thumbnail asynchronously? Maybe even giving a default image until the thumbnail is ready?

  6. M says:

    Just what I was looking for! Thanks!

  7. Paul says:

    Take a look at http://msdn.microsoft.com/en-us/library/ms748873.aspx to see how to do this direct in xaml.

  8. Niclas says:

    Hi there and many thanks for your article, really useful.

    I have the same question as Jon had, if there is any way to know the real dimensions before loading, or any other trick to achive the same as Jon.


  9. Jobi says:

    Thanks for the post,

    There is another easy way to make thumbnail is just use BitMapImage in XAML and specify the Pixel size

                             <Image Stretch="Uniform" >


                                       <BitmapImage DecodePixelHeight="200" CacheOption="" UriSource="{Binding Image}" />



  10. Ershad says:

    Great code and clean description .. thanks

  11. Armando says:

    Grreat and useful code, but what do you think when you have to load 1000+ images?

  12. Waqas says:

    Thanks Yahoooooooooooooooooo!

    You solve a nightmare problem of my projects thanks

    if any one want to know how to implement this i am here waqasidrees@hotmail.com