Top tips for resolution independence

on 22nd February 2013

(Last updated 9th February 2016)


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

Jon Leverrier

This article was posted in Musings, Responsive


Hello! I just would like to give an enormous thumbs up for the great info you have here on this post. I is going to be coming back to your weblog for additional soon.

Trinia03/05/2013 05:12

Thanks for writing this article. At JTech, we are moving towards resolution independence in web design and development. We’ve focused on using icon fonts, which perform better in most browsers but are limited to a monochrome color palette. As SVG performance gets better, we look forward to adopting it for multi-color icons and illustrations on our websites — this will open up a whole world of visual possibilities. Here is our take on resolution independence and SVG: .

Mike Kostrey28/10/2014 16:11

Post a comment


Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.