1. cordoval
    March 25, 2012 @ 6:04 pm

    to understand something we need a background, what was the non efficient solution so this can be a contrast of. If you provide this then everything will make sense. I haven’t yet grasped the idea really.


    • Jacob Mather
      March 25, 2012 @ 8:26 pm

      The background is basically that there is no good, standard, way to handle providing higher (or lower) resolution image assets to users with different pixel densities.

      The canonical example right now is the iPad 3 which has double the pixel density of most other devices out there, with a huge screen as well. The problem is that this huge screen makes it absolutely obvious that the images are lower resolution than the device is capable of displaying.

      There are a few solutions out there geared specifically towards providing double resolution images, but I’ve not heard of any solution from anyone for providing double resolution, .75 resolution, and 1.5 resolution images with a common syntax.

      When I started to think about the solution, I cam to this one, which makes sense, and also opens some other fun doors.

      When you enable media queries to power which source is selected, you also give a powerful way to not only provide different images for different screen densities, but you can provide different images for different widths! You could provide a 900×100 image for your ‘desktop view’, and a 500×300 for your ‘mobile view’, with the same code, and have it easily maintainable and understandable.

      The system would only run at the initial startup because you really only care about the particular device being used. Most people don’t resize their browser, so 99% of people will never notice that it doesn’t adapt to browser size changes.

      Now this still doesn’t solve the issue of the double image download hit (i.e. you’d download both the fallback image and the actual one used), but as long as you pass your lowest resolution mobile image as the fallback image, the hit should be minimal, especially if you make appropriate use of cache settings on your web server.

      Ultimately the double-download penalty will only be truly resolved by standards bodies coming up with a canonical solution to do this, but this seems like the best way to patch things in the mean time.


Leave a Reply

Your email address will not be published. Required fields are marked *