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)

DPI Matters in Blend

Pete Brown - 12 March 2008

A recent post on Silverlight.net led me to revisit something I haven't played with in quite some time: DPI.

If you wonder why you sometimes drag those pngs or other images onto the design surface in blend, and they come out the wrong size, there are several things to consider:

  1. Do I have the image inside a grid cell that is constraining or stretching it?
  2. Did I use the mouse to set the size of the image on the design surface instead of just dropping it in place?
  3. Did I set the DPI properly when I saved the image?

The last one can be the most vexing, as without proper tools, you can't tell the DPI of an image just by looking at it. I thought you could tell via the properties tab in Vista, but it turns out that isn't the case.

In WPF, Silverlight and Blend, 1 pixel is approximately 1/96th of an inch. Therefore, for dropped images to look correct, you need to save them with a DPI of 96. Here is a screenshot showing the three images. All three have pixel dimensions of 150x196, but all three were saved in PhotoShop using different DPI settings.


The 72dpi one looks a little blurry, as it has been stretched. The 96dpi one is correct. The 300dpi one (used to be a common print image size) just looks way too small.

Note that due to 1/96 being an approximation, the center image comes out to 149.981 pixels wide, instead of 150px. Annoying, but not show-stopping.

If you want to set the DPI in Photoshop, you do this via the Image Size dialog. You'll want to change the image DPI to 96 and then change the dimensions to what you want them to be..


Of course, you can go into Blend and set the values to the correct pixel dimensions after the fact, but setting DPI correctly will help potentially eliminate an extra step for the interactive designer.

Hope this helps clear up this question.

posted by Pete Brown on Wednesday, March 12, 2008
filed under:      

5 comments for “DPI Matters in Blend”

  1. Scott Conradsays:
    Hello, to futher lessen the barrier to entry of this post, what would you recommend that megapixel shots should be shot at? I have noticed that my 5 megapixel shots look quite clear (in my experience), should I be shooting at a larger megapixel or is 5 fine?

    -Scott Conrad
  2. Pete Brownsays:

    For typical web graphics (not Seadragon/Deep Zoom stuff), most any current digital camera will get you an image of more than large enough size.

    More megapixels primarily providers you with the ability to crop to smaller areas of the image while retaining the pixel size you need (it's almost like free zooming)


Comment on this Post

Remember me

4 trackbacks for “DPI Matters in Blend”

  1. DPI Matters in Blendsays:
    A recent <a href="http://silverlight.net/forums
  2. Community Blogssays:
    Pete Brown on DPI in Blend, Joe Stagner on SL and Security, Laurence Moroney on DeepZoom in C#, SL Developer
  3. Community Blogssays:
    Pete Brown on DPI in Blend, Joe Stagner on SL and Security, Laurence Moroney on DeepZoom in C#, SL Developer
  4. Christopher Steensays:
    ASP.NET Attack and Defense: Securing ASP.NET 2.0 Apps [Via: Keith Brown ] WPF A WPF File Selection...