Trick or Treat : Resolution = 96 PPI
Have you ever imported an image or Illustrator file into Expression Design or Expression Blend then noticed that it seems either bigger or smaller than your original image? In this post I will explain why this occurs as well as point out a few tips you can use to get your images and other assets imported into Design and Blend at the pixel size you expect.
Expression Blend assumes a resolution of 96 pixels per inch (PPI). WPF, Expression Blend and Silverlight all assume one pixel is approximately 1/96th of an inch and therefore use a resolution of 96 PPI. You might be asking yourself why 96 PPI? I've been using 72 PPI for all of my web work. The short answer is that Microsoft has standardized to using 96 PPI. There are many web sites that describe why this decision was made and why the standard for Apple is 72 PPI. I encourage the reader who would like to learn more about this choice to search on 96 PPI in your favorite search engine.
If you work with assets that were saved specifying a resolution other than 96 PPI, Design and Blend will scale the asset to be the same physical size at 96 PPI. For example, an image that is 72 PPI and has a width of 6.667 inches and height of 8.889 inches has a width in pixels of 480 and height of 640. If I wanted to display that same image at a resolution of 96 PPI, it would need to have a width and height in pixels of 640 and 853 respectively. Therefore, if you import a 480 X 640 image into Design or Blend that was originally created at 72 PPI, its actual size after import will be 640 X 853.
The best way to ensure your assets come in at the same pixel size in Design or Blend as they are in your other content generation tools is to use 96 PPI throughout your workflow.
When using Expression Design be sure to select 96 PPI in the File > New dialog.
In addition, you should set your zoom level to Actual Pixels in order to see your content at full size. For 96 PPI this is 133%.
In Photoshop, you can change the stored resolution of an image in the Image Size dialog to 96 PPI. Be sure to uncheck Resample Image.
Unfortunately, Illustrator files are 72 PPI and currently always scale when imported into Design when the document resolution is 96 PPI. In this case, you can get the object back to the desired pixel size by selecting Scale As Percentage from the Transform options popup menu in the Action Bar. Make sure width and height are linked and change either the width or height to 75% (72 / 96 = .75).
Hopefully these tips will help keep the import goblins at bay!
Joanna Mason
Comments
Anonymous
October 31, 2007
Have you ever imported an image or Illustrator file into Expression Design or Expression Blend then noticedAnonymous
October 31, 2007
Have you ever imported an image or Illustrator file into Expression Design or Expression Blend then noticedAnonymous
November 08, 2007
"In addition, you should set your zoom level to Actual Pixels in order to see your content at full size. For 96 PPI this is 133%." My 96ppi exports are different sizes at 133% and "Actual Pixels"....Actual Pixels is the more reliable of the two, for me. But then, that may be a problem with Web more than Design.Anonymous
November 25, 2007
Thanks was useful as i am begginer in ExBlendAnonymous
November 30, 2007
Today I wanted to share some game prototyping graphics created in Expression Design.   TheseAnonymous
June 23, 2008
How do I do this with Expression Blend June preview?Anonymous
June 24, 2010
Thank you very much for this information. I changed the ppi setting in photoshop cs4 to 96 ppi. But when I try to copy/paste the image to microsoft word 2007, it still looks a little blurry even if word is at 96 ppi. Do you happen to know how to change the settings for microsoft word? Maybe I can change both to be at 72 ppi? I would really appreciate it if you could help me. Thank you!!