Home Articles Tutorials Resources About
ClearType for images   Last update: 2011-11-28 11:41:08 by Rim van Wersch

This little snippet shows how Cleartype rendering can be applied to images, as per this blog post. The basic idea is quite simple. Each LCD screen pixel physically consist of a Red, Green and Blue subpixel, so sampling 3 neighboring image pixels into the RGB values of a screen pixel would effectively tripple the horizontal resolution.


This effect works because we humans have a keener eye for variations in intensity than color. Basically our brains tend to ignore the color imperfections and appreciate the additional intensity fidelity. If you're viewing this page on an LCD monitor with a common RGB subpixel layout, the image on the right should look sharper than the image on the left.

About the code

Below you can download a quick implementation of this idea. I've tried to add gamma correction to the resize operations (both the bilinear and cleartype resample), which might prove useful. For readability's sake I neglect to dispose any Bitmap objects in this demo, which is something to keep in mind if you re-use the code.

Files for this resource

Filename Size
  CleartypeForImages.zip 11.1 KB

Further reading

XNA info is sponsored by vector4. All content is copyright © 2005-2017 by its respective authors | About XNA info | Terms of Use | RSS feed