Stop chasing screen resolutions

We live in such an exciting time in the world of the web. Technology and standards are moving forward at a rate that’s perhaps both faster and more exciting than ever. As things change, so do our habits, and one area that I think has seen bigger changes than most would have to be the change in resolution that our devices are now running.

Resolution is a funny thing to measure; it’s not a physical size change, but a clarity change. It’s not making images, brighter, or more rich in color, but making them denser. It’s also something that people seldom understand the value of until they see it for themselves.

Of course, when we get a taste of high-resolution displays, we’re hooked. And we all want our websites (and the websites of our clients) to look awesome on the devices that are sporting these displays. Many web designers are racing towards that goal by creating images for each new resolution that comes our way. Or, as I’m calling it in this article, “chasing screen resolutions”.

An introduction to SVG

Many of us know what SVGs (Scalable Vector Graphics) are. We’ve seen it on the W3C HTML5 website, under “3D, Graphics & Effects”. SVG is a standard HTML5 technology, that displays images with code. Or something.

At least, that’s the general response I got when I asked people about SVG graphics. It’s not really something people are interested in, because its value isn’t fully understood.

I want to show you how to avoid “chasing screen resolutions”, and it just so happens that the SVG standard can help us do just that.

The state of retina graphics

When I say “retina graphics”, I refer to any devices that have a screen resolution higher than that of traditional displays, sporting a resolution way above 72ppi (pixels per inch).

Apple famously smashed the 72ppi barrier with the iPhone 4, a device that had a fantastic new high-resolution display, that looks unlike anything else we’d seen before. Except when you used it to browse the web… the web looked rubbish.

The web had 72ppi optimized images. At the time of writing this, most of the web still does, two years after the launch of the iPhone 4.

Now, we have all sorts of devices with Retina quality Graphics. It’s slowly making its way across the entire Apple product line, extending to the iPod Touch, iPad and even the latest MacBook Pro. Smartphones are popping up all over the place with high resolution displays, so much so that a “standard” resolution display almost feels old-hat at this stage.

Still resolution dependent

When the web design community overcame the blurry images problem with conditionally loaded @2x images (images that were created to be twice the size of their original counterparts, loaded only on high-res devices), the web looked good again, for the most part. Some designers even advertised their websites as “resolution independent”.

Of course, what they really should have advertised their sites as was “optimized for two screen resolutions”.

Devices will keep on getting better, resolutions will keep on getting better, and and the web will continue to be enjoyed on an increasing number of form-factors. What about the inevitable future @3x? What about @4x? What about if the standard “1x” becomes unnecessary? What makes 3x “@3x” and not “@2.5x”?

Messy indeed.

What’s more, this sort of technique is hardly widespread. I browse the web on the aforementioned MacBook Pro with Retina Display, and most of the web is sadly exactly where it always has been since the iPhone 4: blurry. Creating all of your web imagery again is an arduous sounding task, especially when the whole web design world has been designing with bitmaps for so long.

Unzoomable web

Even today, with our @2x images, we still can’t zoom in on web pages without them going ugly again. Text manages a zoom just fine, but by comparison, images just cry out for those future @4x exports (something that no one will deem appropriate to serve just on the off-chance that someone might like to zoom in 4x on your RSS icon).

Going truly resolution independent

The problem is with bitmapped images. We’ve always known that they don’t upscale, and now is no different. What we need is vector graphics on our websites. Vector graphics are calculated by a series of instructions, rather than baked onto a grid where each pixel represents a color. Enter, SVG.

One size fits all

Since SVG graphics are vector graphics (hence the name “Scalable Vector Graphics”), they’ll look awesome on yesterday’s, today’s and even tomorrow’s screen resolutions. Additionally, due to the formulaic nature of vector graphics, you can zoom in on any device and images will stay looking great.

Faster load times

Making a 2000px by 2000px image, to a web designer, sounds nothing short of ludicrous. It would take far too long to load, it would bring some mobile devices to their knees, and the 4000px x 4000px “@2x” version would be craziness. And as resolutions get better and better, it’s simply unsustainable. With SVG, since it’s a vector format, it doesn’t matter if the image is 20px or 2000px; the load time will be exactly the same. The only thing that makes a difference to the load times is the complexity of each image file.

You can use it today

SVG may not be supported across the board, but Modernizr can feature-detect it. By serving a SVG and non-SVG version, you can reap all the benefits of SVG, while leaving legacy browsers with a @1x PNG. It’s as simple as this:

.no-svg .logo { background: url('logo.png'); }
.svg .logo { background: url('logo.svg'); }

Limitations of SVG

It’s not difficult to create SVG graphics out of any vector based image. Many pro apps such as Adobe Illustrator and Inkscape can export to SVG natively. There are a few things that you’ll need to know about SVGs for the web, however.

They can’t contain bitmap images of any kind.

Sure, you can add them in SVG authoring applications such as Illustrator or InkScape, and save your work as SVGs, but they won’t render where it matters: your web browser. CSS wizardry will be necessary to load a bitmap on top of the SVG where appropriate.

Can take forever to load if complicated

If you make a complicated SVG, you’ll be hit with load times not unlike the aforementioned 2000px x 2000px image. You wouldn’t want to draw a complex painting in SVG format, for instance.

Gotta keep it simple

Apps like Illustrator and Inkscape can do much more than your web browser can handle. They’re full blown illustration apps, not web SVG creator apps. In fact, it’s safe to assume that 90% of the functionality that those kinds of application offer will be unavailable to viewers on the web. If you’re familiar with vector software, you’ll need to learn alternative ways to create the effects you’ve come to love.

Try to learn the language

SVG code isn’t something you can “see in your mind” like you can when you read HTML. It’s a series of instructions mapped respectively against one another, element by element, layer by layer. Unfortunately, as of today, you’ll probably have to dip in there from time to time, since there are some results even Adobe Illustrator doesn’t offer.

For instance, images in Illustrator have a canvas you draw on; it’s a set width by a set height. That’s great, but if you want to control those details in the browser, you need such information to be stripped away from the SVG itself (note: some browsers will interpret your CSS irrespective of any declared SVG dimensions, but not all do). It’s not particularly hard, but it can be a headache. It’s well worth spending a bit of time getting to know the language, so that you can manipulate SVGs even further.

SVG in the Wild

Logos

Logos should typically be in a vector format anyway, so they’re a great way to bring SVG into your website designs. By using the markup above, you have everything that you need to take your first SVG elements online.

Icons

Icons are a great candidate for SVG. So much so that I’ve created a full icon set using SVG graphics. The scalable nature of SVG means that the icons can be used at any size, accommodating a broad range of site designs.

Animations

Animations also make a great case for SVG graphic usage. Since animations are typically tethered to a fixed width and height, SVG goes some way towards helping animations get responsive. Flash used vector graphic elements, now HTML5 animations can too.

Background images

Background images have always been a tricky point for web developers; the potential load times, as I mentioned above, can be crazy. SVG background images can be as big as you like; they still have snappy load times providing they aren’t really complex.

Conclusion

All in all, resolution independence is a fantastic goal for web designers and developers alike to strive towards. It’ll even mean their design tastes will be out of date before their site imagery is. While it’s important to approach them with your eyes open, it’s pretty clear to see how SVG graphics can move you closer to a future of total resolution independence.

When you load up an SVG enabled site on a high resolution device like an iPad 3, and you zoom in, you’ll be sold.

I hope this article goes some way towards encouraging resolution independent thinking in web design and development, and I hope that it has encouraged some of you to think about how SVG can work for your next site.

I’ve been in the SVG pool for a while, and I have to say, the water has never been more lovely.

Are you an SVG convert or do you serve scaled bitmaps for retina displays? Are vectors the future of web graphics? Let us know in the comments.

Featured image/thumbnail, vector image via Shutterstock.

Adam Fairhead

Adam Fairhead is an experienced Web/UX Designer on a mission to use his God-given gifts in design to help others. He has worked with people in many different countries, from many different industries, and loves every minute of it. You can connect with Adam over a cup of tea or on Twitter @adamfairhead.