The New Vector Web

With retina / HiDPI displays becoming commonplace and likely only continuing to do so as the future becomes present, coupled with the ever challenging issue of managing broadband on mobile devices (and elsewhere), the days of raster images being used on the web are fast approaching. Raster, perhaps more commonly referred to as bitmap, images are what we’ve all become used to seeing on websites.

Vector vs. Raster

I’ll keep this quick and simple, but it’s important to note the difference here so we can properly cover the topic.

JPGs of cats, porn GIFs and greeting card PNGs are all bitmaps / raster images: they’re made up of a bunch of little, often differently colored, pixels that all fit together neatly into a grid to form an image. For the entire history of personal computers, 72ppi (pixels per inch) was the standard and so we could simply create our graphics at that resolution and be done with it. No more, I say. iPhones and iPads and MacBooks all boast much denser resolutions, the term Apple refers to as Retina. Other manufacturers’ devices are following suit, but no one is necessarily setting a standard. Without getting into too much detail, that essentially means you would need to create at least two versions of all of these bitmap type images: 72ppi versions for users on standard displays and then some other, higher quality for users on HiDPI displays. Since those range from 200ppi to potentially 477ppi (which is thought to be the true resolution required to trick the eye into never seeing pixels), you could theoretically get into all types of resolution shenanigans trying to get this all right now, and then updating as time goes on and technology updates.

With bitmaps, an image can only occupy so much space. Think of it like silly putty. Remember back in the day when you could press silly putty onto a comic strip and it would copy the image over to the putty itself? Now, if you stretch that putty to make the whole thing larger, the image gets distorted. This is somewhat similar to what happens when you try and take a 72ppi image with dimensions of 800×600 and double its size for retina devices (which is how these HiDPI devices typically work). You get a 1600×1200, distorted image. With photographs, this isn’t always an issue; we’re used to seeing a little compression in photographs online, and sometimes the difference is negligible to the human eye.

But with small images, think logos and icons, the difference is very noticeable.

The solution for these types of graphics is simple: Vectors. Where a bitmap image is made of up a bunch of little squares that can only cover so much space, a vector graphic is actually comprised of data that instructs computers as to how an image should be drawn. It plots a bunch of curves along points and figures out distances, angles, etc. to redraw an image each time. Vectors have the following benefits:

  1. They can be scaled up or down without losing quality, as the image is simply redrawn at that appropriate size.
  2. They almost always have a vastly smaller filesize than bitmaps
  3. SVG graphics, which stands for Scalable Vector Graphics, even allow us to take the actual code from the image and add it directly to our HTML markup, thereby eliminating an HTTP requests and giving us the ability to apply CSS directly to the image itself. That means you can swap out the color of a logo programmatically rather than needing to call up different versions of an image or remap sprites.

Beautiful stuff.

Are Vector Graphics and the Web Ready for Primetime?

The short answer is, Yes! Internet Explorer 9 and 10 both support SVG. IE8, of course, doesn’t, so you do need a fallback image…which could be as simple as defining that image in an IE8 only stylesheet as a background.

The good news there is that Internet Explorer 8 is ever-declining in usage, somewhere around 5-15% of browser share right now, and falling somewhere around a single percentage point every two months or so. At that rate, and by most estimations, IE8 will be all but gone by mid-2014.

Chrome, Safari, Firefox, Opera and all of their mobile variations all support SVG.

What Can I Currently Do with SVG Graphics?

Thus far, I’ve been primarily using them for logos. This shouldn’t even monkey with your work flow all that much, as any good logo designer will have 100% EPS versions of the logos they create. EPS is another form of vector graphics, and from a program like Adobe Illustrator, you can quickly save these down as SVGs, which can then be used all around the web.

Using a service like IcoMoon, you can import your own SVGs and then use them as font icons. Font icons, as they’re also vectors, will look pristine on Retina and other HiDPI devices. Yum.

While likely we’ll never see big, beautiful photographs replaced by vectors, incorporating them into the sites we’re building today has many benefits. Smaller font sizes and less HTTP requests make for a faster website. Faster websites equal better search engine placement. Better SEP means more traffic and more traffic leads to more comments, sales, or whatever the goal of your website is.

Up Next: Using the WordPress Content Editor