Today, photographer and blogger Tom McLaughlan asked me why the social media icons looked pixelated (particularly when zoomed in) on his new iPad on a website he was building. (The icon set has 32- and 128-pixel sizes, along with an SVG source file.)

After emailing back, I wanted to share my answer not only with him, but with the whole world:

The issue is not so much with the icon set as it is a broader issue with scaling pages that have what’s known as raster graphics: In virtually all images used on the web, not just photographs but icons and logos too, the images are made up of a finite set of pixels. When viewed at its intended size, the image appears smooth to the eye. However, once it is scaled up, the image and its pixels get larger, resulting in a pixelated appearance. This traditionally hasn’t been a major issue as websites are almost always viewed at 100% scale. On the new iPad, the screen resolution is very high, so to make the page appear the proper size, it has to zoom in behind the scenes, causing graphics to look a little less sharp than they should. It gets even worse when you zoom in further. (If you look very carefully, you’ll notice the same thing for photographs, but it’s harder to notice.)

Aside from raster graphics, there is a class of images called vector graphics where images are not produced with colored pixels but instead with outlines based on mathematical expressions. With a vector graphic, it doesn’t matter how far you zoom in: the edges will always appear crisp. Since Apple and Adobe introduced TrueType and Type 1 fonts back in the late 1980s, text has mainly been in this class of vector graphics. That is why on your iPad, text still looks good even at high zoom.

There are image file formats (not just font formats) for vector graphics as well. A few well-known vector formats can be attributed to Adobe (AI, EPS, PDF), and there are a number of other proprietary vector image formats out there from other companies too. One open vector graphics standard is SVG (Scalable Vector Graphics). Because of its open nature, SVG graphics can be opened and edited with a number of tools, including a free one called Inkscape. Also because of its nature, support for it has begun to be implemented, along with the rest of what some know as HTML5, in modern web browsers. An SVG graphic used in a website will theoretically remain sharp regardless of the scale or resolution. The main roadblock to this becoming mainstream is Internet Explorer: As long as people continue using Internet Explorer 8 (or older), they won’t be able to properly see websites that implement SVG graphics. However, in theory (and I suggest this only in theory), you could create SVG images for every icon from the SVG source file included with the icons and embed these in your site instead of the regular icons.

A more realistic solution would be to use the 128px size icons instead of the current 32px ones on your site and to specify with CSS (or HTML if you’re more comfortable with that) that the width (and/or height) should be 32px. This will take the images ever so slightly longer to load, but the result should be sharper display on the iPad. (In fact, you could even produce higher resolution images from the included SVG source file if you want the graphics to still appear sharp when zoomed way in.)

___________________

Found this article useful? I don’t use advertisements on this site, so if you’d like to help support content like this, consider making a voluntary donation using the PayPal donation button below. It would be greatly appreciated!