After posting a link to some screenshot of panel scaling in Gutsy a discussion ensued about what should happen. One of the issues was that of scaling icons, and really how just simply scaling them would cause them to become blurry. I think the discussion got a little bit theoretical, so I wanted to provide some visual basis for understanding the problem. Here's an icon from the Tango collection at both it's native 32 pixels and scaled up to 37 pixels (15.6 percent).
While the second icon doesn't look bad you'll notice that it isn't as sharp as the first one. One of the places that this is easiest to see is the marks on the ruler which come in and out. When can start to see why this happens as we zoom in to a smaller part of the icons.
If you look at the normal icon you can see that all of the edges line up exactly on the pixel grid. This means that all the boundaries in the rasterized view of the icon match with the design. If we look at the scaled icon you can see that this isn't the case. The markings on the ruler are in many different pixels, which causes the blurring that you see in the icon. They have different strengths depending on their location along the ruler.
In order to get good scaling of icons, we need an algorithm that will scale them not mathematically, but based on their visual goodness. So you still want them to look sharp, even as they grow. In this example the line widths would stay the same, and the ruler would grow in the middle. That way each marking remains one pixel. This is very similar to hinting for fonts.
Anyone need a thesis project?
Overall, I don't believe that this should stop us from moving towards scaling but it should be on the TODO list to fix. The icon is still recognizable, and most people who spend all their days looking at computer monitors don't have that good of vision anyway.
posted Nov 19, 2007 | permanent link
