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.
Beware that for more intricate clip art, algorithmic conversion will not be good enough. But, luckily designers can be easily found on Fiverr to help.
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.
Perfect for changing images for a mobile site!
Thanks!
Try converting to pnm with ImageMagick’s convert tool then using potrace to trace that to an SVG. Might have to do it in layers to retain/reproduce colours, but lots of options mean can get a decent result.
It is really time to make most design using vectors and maintain vectors into development. Even PNG fallback becomes less crucial now, when mobile and desktop browsers render SVGs natively (so having 100% vector site is perfectly practical).