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!

  1. Nacho

    I think you mean PPI instead of DPI.
    I really didn’t know about the different PPI in devices. I thought everything was 72.

    I actually think it will never be obsolete. Unless the unit we call pixel dissapears.
    Measuring stuff in pixels is not so bad. In some cases we can control stuff better.

    At least is what I think.


  2. If pixels disappear, we can only use vector images on websites, snce vector images can be scaled up and down wihout quality loss, and can’t use bitmap based image editors for making web graphics.

  3. […] No matter how many EM’s or percentages we use in our design, we are still locked down with pixels … […]

  4. Jon

    As you say, photographs and things present a problem and the proposed solution you refer to I agree, seems like it could be a major headache for web designers. It doesn’t sit right with me for some reason. But the more I think about it now, the more I think it’s probably the best and maybe only feasible solution. I still don’t like it.

  5. Guy

    Im working on an application right now that is for the most part em based. It’s one of the more complicated apps I have worked on in terms of structure and design meeting accessibility.

    It wasn’t until I tried testing the site that I noticed em’s were in fact holding the site back. The issue was that if I had a div padding on the left and right, em’s were causing it to inflate too much. Pixels helped keep things in line and accessible.

  6. Personally, I like percentage widths on columns. Pixels for images will likely be around for some time, although you *can* use EMs if the image quality is good.

    I advise against using pixels for text, as it is difficult to get IE to enlarge pixel-sized text. Definitely an accessibility problem, Guy.