Top tips for resolution independence

Our guest blogger - Jon Leverrier explores how using adaptable images called SVG's can help make you're website images look better on existing as well as future devices.

Join the Pixel Independent Revolution Resolution

Wouldn't it be great if somebody invented an item of clothing that would adapt to any person wearing it, without any loss in quality or appearance (think Back To The Future 2 and Marty's shrink-wrap clothing)?

When your web designer creates a graphic for your website, they more than likely do so to a defined height, width and resolution (the number of dots per pixel/inch). When these graphics are viewed on devices that display images at higher resolutions, (like the new iPhones and iPads) then the image loses quality and sharpness.

In an earlier article, we wrote about the impact that responsive design was having on our approach to planning and designing websites. With the advent of new, higher resolution screens (like those found on the new MacBook Pros, tablets and iPhones) we find that individual graphics are also starting to be affected by the environment in which they’re viewed. When viewed on high resolution devices these graphics appear blurred and pixelated and can let an otherwise well-designed website down.

So how can we futureproof graphics so that they look great whether they’re displayed on a standard laptop or the latest smartphone?

If we consider the concept of ‘adaptable images’, we can ensure that an image will be displayed at the right quality without having to plan for what device or resolution it will be viewed on. Sound good? Read on...

Scaleable Vector Graphics (SVG)

Although they don’t work for every scenario - SVGs (a vector-based file format) offer us the ability to create a single piece of vector artwork that is lightweight, entirely scalable, resolution independent and (to some extent) can even be visually changed via CSS. This type of treatment works well for charts, logos, graphs, line work etc, and SVGs look great on the new, high resolution devices.

The downsides? SVGs aren’t currently suitable for photographic imagery - there’s simply too much detail in a photo - when converted they either look too banded or are far too big in file size.

Ironically, SVG's have been an open standard with the W3C since 1999. Due to the complexities of building websites for the modern mobile web, they have come back into focus. Cross browser support can still be patchy depending on what browsers you wish to support and certain techniques of implementation might not be the most elegant of solutions. The balance between your users needs and technical solutions are likely to be the deciding factor.

Icon Fonts

An alternative solution is to create a custom web font from your design assets, which can be used in replacement of standard picture icons (remember picture icons will lose quality if they are enlarged beyond their set size).

It will allow these elements to be resized without affecting their clarity, which means they can be made larger and therefore accessible to people with visual impairment. Again - these still aren’t going to make photographic imagery look any better...

Doubling the size of your images

A fairly recent but effective technique involves doubling the physical size of your images, and displaying them at half the size. This way, images remain clear and sharp on standard and high resolution devices. Whilst this is the easiest solution to implement (and it’s really the only solution for photographic imagery), it’s still not entirely future proof. As new, higher resolution devices (like 4k TVs) get released, image sizes will need to be enlarged further. Also, in most circumstances, a mobile user will be forced to download the desktop (high resolution) version of the image to their phone which could prove to be unnecessarily slow and potentially expensive for end-users - especially in developing countries.

A combination of all three

As you can see - there’s no real silver bullet here - not yet anyway - but the pragmatic approach would be to consider what imagery your website needs and how future proof its imagery needs to be. Is a significant portion of your audience now or in the future likely to be viewing your site on high resolution devices? If it is - then where possible, create the majority of your artwork using CSS, SVG and fonts. In cases where you want to use photographic imagery - consider using image doubling techniques.

Further reading

• Vaneso Design - Why And How To Use Icon Fonts
• Envato Trust - Improving Image Quality on the Retina Display

Written by Jon Leverrier