As higher resolution screens continue to make their way to popular and increasingly affordable devices, the need for resolution-indendent (vector) graphics on the Web becomes more apparent. So I've been looking into what's possible on mobile browsers today.
The Summary
- There is no vector solution for photos. If you're going to use photos in your designs, you'll need 2 versions to support high-resolution screens.
- 2x images work pretty well as CSS background images with media queries and an appropriate cascade override. See Tim's testing and results.
- Replacing photos in IMG tags seems best tackled with Javascript (today) but standard and high resolution images may both be downloaded.
- If you opt for a Javascript image swap solution, always start with the lower resolution image first then enhance if appropriate.
- Be aware there are JPG image size limits on WebKit so use progressive JPGs for photos to avoid scaling issues.
- Because creating and maintaing two sets of images can be tedious, aim to use CSS instead of images wherever possible. Currently CSS and progressive enhancement with CSS3 properties is your best bet for consistent vector graphics across mobile browsers.
- Icon fonts (rendered with font-face) can be used to add single color, scalable vector images to your interface (details below).
- Scalable Vector Graphics (SVG) provide a lot more options for vector art in the browser but support is missing on important devices and implementations are incomplete (details below).
Icon Fonts
Icon Fonts use the CSS font-face property to render mono-color images (icons) within a custom typeface. This means icon art in an interface can be scaled, colored, and even use custom drop shadows with no images required. This sounds great but... why are so few people using this technique?
- A very common concern is supporting screen readers. Though solutions seem to be out there to address this issue. For example, icons can be mapped to private unicode area so screen readers don't read them out.
- Creating a font and all the versions required is more complex and time-consuming than building out a CSS sprite. Although in today's 2x image world, it's likely 2 CSS sprites.
- Font files can have larger file saves than a sprite unless you use a custom font that only contains the actual icons you use. One option is to limit the download size using CSS unicode-range.
- Web browser support seems good but you still need fallbacks for browsers that don't support Web fonts.
- Further resources on icon fonts
Scalable Vector Graphics
Because the topic of using SVG for resolution-independent graphics in the Web browser keeps coming up but again very few people are doing it. So I asked why. Here's the most common reasons I heard:
- Android doesn't support SVG prior to 3.0. this means 95% or more of Android devices can't render SVG graphics. Considering how many Android devices are out there, this is a big gap on mobile.
- SVG implementations vary across browsers and iOS in particular has some odd quirks.
- Existing workflows and tools (like Photoshop) are oriented around raster (pixel-based) graphics.
More...
Two years ago I assembled a compilation of resources for managing and creating high screen density images. I updated it with new information this month. If I got any of this wrong or you have additional information, please Let me know!