Kilian Valkhof

Building tools that make developers awesome.

When will pixels become obsolete?

Design, 8 September 2008, 2 minute read

No matter how many EM’s or percentages we use in our design, we are still locked down with pixels for images and screen sizes. For how much longer?

It used to be so easy. Every screen was 72DPI, so you were quite certain in how large or small something would display on a monitor. Nowadays, websites are viewed on all sorts of devices with all sorts of DPI. Most screens have 72 or 92DPI, some have 120DPI. An iPhone has 160DPI and regular cellphones have around 100 to 200DPI

That means that your 400px wide image will look very different on a range of monitors, and that the pixel will become less and less the “solid” measure most Front end developers regard them as. This isn’t new, Roger Johansson blogged about it two years ago.

One thing the article mentions is that a CSS pixel is not always equal to a device pixel (otherwise zooming would be impossible, for instance). Unfortunately, as you can read in the same article, this doesn’t mean you can go merrily about your ways, because it will still look different on a screen with higher or lower DPI.

what now?

I think that in the future, pixel based designs will not be a viable option for web design any more. Technologies such as SVG and CANVAS, coupled with relative sizing (relative to the base size of browsers), or even the CSS gradients, repetition and stretching background options CSS3 and the Webkit team bring us, will be used in favour of jpg’s, gif’s and png’s. For most website designs, SVG etc. would be easier to use and maintain than pixel based formats. But alas, not all browsers support it yet.

However, this doesn’t completely solve the problem, because there are plenty of photographs used in web design. What about those? The current idea is to give higher resolution images to screens with a higher DPI and lower resolution images to screens with lower DPI. I am uncertain if this will work, as it essentially doubles the work of a web designer.

Well, will they become obsolete?

I certainly hope so! It might not be in the next couple of years, but in a decade or so, I think web developers won’t be thinking in pixels any more.

Polypane browser for responsive web development and design Hi, I'm Kilian. I make Polypane, the browser for responsive web development and design. If you're reading this site, that's probably interesting to you. Try it out!