Retina support, Windows-style

Every bit of graphics that goes into a modern Windows app must be done in at least three different sizes - one for each common screen DPI level.

DPI stands for dots-per-inch and it’s a metric of a pixel density, in our case - on the screen. The smaller the screen, the more pixels are packed into a square inch if the resolution remains the same. The difference in DPI between a large LCD panel and a 12” notebook screen can easily be a factor of two or more.

This means that if a program renders 9px text on both screens, on one it will appear twice as small as on the other one, and might command a need for a magnifying glass.

Naturally, it’s a good idea to make the OS aware of the actual DPI of the monitor in use. If it’s too high, the OS can do few things to make things visible with a naked eye again. Like increase size of the default system font and make windows and controls generally larger.

This can be done automatically by looking at the monitor .inf files or by letting the user configure the DPI manually.

XP defaults to 96 DPI and with some difficulty it can be changed to 120 DPI. Vista and newer versions are better. They come with four predefined levels - 96, 120, 144 and 192 - and they also support custom settings.

This brings us back to needing multiple versions of every graphic in the app.

Vista is the first Windows version to routinely use monitor-specific DPI values out of the box. As such 96 is no longer a dominant DPI level and the apps are now expected to take the DPI into an account when rendering their content.

The higher the DPI, the larger the graphics and the fonts the app should use. Hence the need for 3+ differently sized copies of the same pixel art.

The penalty for not doing this is an automatic stretching of the app window that inevitably leads to a blurry appearance and a host of other lovely issues. In other words - not complying with the OS expectations is not really an option.

For more info check here and here.