I’ve been working on a web site that is often viewed from iPads. iPads have a retina display (higher pixel density), which makes low-resolution images look grainy. Here’s an example, zoomed in to exaggerate the effect.
The problem is the images are raster (bitmap or pixel) based, not vector (line art) based. Now that I recognize the problem, I see it everywhere. Even the Google search looking glass.
Anti-aliased pixel-based PNGs are the standard. For web developers, the problem is, once they flatten an image to a pixelated PNG, the browser can’t enlarge it again. This is a problem with the widening array of mobile display resolutions.
Unfortunately, a common fix is to swap in a 2x resolution image. This is a dumb approach for icons, logos, and buttons – anything that is not a photograph. All you are doing is downloading a second set of larger files to handle another fixed resolution.
All major browsers support SVG (Scalable Vector Graphic) files now, but before leaping on board, there are a couple performance considerations.
One consideration is the file size. Especially when developing for mobile web pages, for complex icons, a larger-dimensioned PNG may be smaller in file size than a vector representation. For most icons, logos, and buttons, SVG files will be smaller than the PNG. PNGs are actually not that small, since it is a lossless format.
The second consideration is CPU time to render and composite the image (often on top of something else). I haven’t done any performance tests. For maximum performance, scaling and compositing bitmap based icons will be the best. However, my guess is that unless your vector is crazy complicated, or your phone a few years old, using vectors will be fine.
One great trick I wish I knew before converting a batch of PNG icons last month, was that algorithmic conversion (aka image tracing) from pixel to vector is pretty common. There are several services like http://vectormagic.com/home that will automate your conversion. Vector creation is even built in to Adobe Illustrator’s with the “Live Trace” function.
Are you converting PNGs to SVGs? What tools have you found that will help, and what are the gotchas of working with SVG? Please leave a comment below.