Prevent ugly images on Windows Phone

Problem

Sometimes images look nice on a regular computer screen, but when used in your Windows Phone application they become ugly. This effect is most often seen on gradients and images with smooth coloring. In gradient images you’ll start to see stripes and bands. It looks like the colors in the image don’t blend anymore.

Below are the 32bit and 16bit versions of the same images. Notice the banding on the right one.

32bit16bit

Cause

This problem may be caused by a setting in your application or just by screen of the phone itself. It occurs when a 32bit image is shown on a 16bit screen. Because there are way more shades of colors available in 32bit images than in 16bit images, you’ll start to see these artifacts when the depth doesn’t match the screen.

Solution

The solution is relatively simple. Just scramble the pixels a bit to make the colors look like they blend. This process is called dithering. Maybe you’ll remember, back in the days with Windows 3.11, you often saw ‘gradients’ in images with only two colors. Starting with 1 color and along the image there appeared more and  more pixels of a different color.

Here’s another example of dithering. When you have only 256 colors available for a gradient, you’ll have to do something like this to blend from color to color.

image

Below is the dithering effect used on a 16bit image. On the left is the original 32bit image. The middle image is the plain 16bit version, with banding. The one on the right one dithering applied to it.

32bit16bit16bit-Dithered

How to fix

The best way to fix this problem is to make sure your images look right. Don’t depend on the phones to fix the problem for you. I personally do not want to take the risk of any of my images looking ugly on someone’s phone. When the artwork is crap the app is probably too. Always make sure you walk the extra mile to make your apps look perfect. If a similar app looks better, people use that one instead of yours!

The easiest and free way to fix your images is to use Paint.NET with a special plugin.

After downloading and installing I’ve opened a splash screen for my app in Paint.NET. The image uses a lot of smooth transitions between colors and will look bad on some phones.

image

Next, go to Effects –> Photo in the menu and select Simulate Color Depth

image

I’ve you did not get the earlier part about the dithering and the different bit depths, I suggest you play a little with the settings to see what’s effect of the different bit depth settings. And turn Dither on and off a couple of times to see the magic happening.

I personally use the Bayer Ordered 8×8 method on all my images. But you’ll free to use an other one if you like.

image

Hit Ok and you’re done.

If you are using Photoshop for your imagery, you can find an action to apply dithering to your images over at Robby Ingebretsen’s blog.

Wrap-up

Unfortunately not everyone is dithering their images, which results in bad looking apps. As you’ve seen it’s pretty simple to resolve. I hope to never see banding and ugly artifacts in applications anymore.

6 comments for “Prevent ugly images on Windows Phone

  1. May 10, 2012 at 10:26 pm

    Having played with dithering a bit I just want to note that dithered images don’t look well when they are animated, put in a Panorama background or otherwise positioned without snapping image pixels to screen pixels. A better solution often is to avoid gradients altogether and design your background with banded colors.

  2. mikeloaf
    May 11, 2012 at 4:01 pm

    Or, just set the BitsPerPixel property of the App to 32, in the WMAppManifest.xml file. This defaults to 16 for some reason.
    <App xmlns="" BitsPerPixel="32"…etc

  3. May 11, 2012 at 4:20 pm

    That’s right. If you are sure your application runs only on 32bit screens. Lower-end devices might have a 16bit screen. I’m not sure what will happen on those. Maybe they’ll do the dithering on the fly, which will have some perfomance impact. One more thing I didn’t mention in the article is that images tend to be smaller when using only 16bit colors.

    I won’t take the risk of my artwork looking wrong.

  4. May 12, 2012 at 9:32 am

    Nice suggestions all round: but remember that often gradients are used as a kind of chrome and chrome most of the time has no place in Metro.

  5. May 12, 2012 at 4:28 pm

    You are absolutely right. But you will have some graphics in your app, right? Just make sure that these look at there best on all devices.

Leave a Reply

%d bloggers like this: