I like to talk endlessly about anything related to the design and development of websites and mobile apps, technology, and the creative industry, which may tickle your fancy.

Hear! Hear! Edward O’Connor, who works on web standards with Apple’s Safari/WebKit team, has proposed a standard for managing multiple-resolution images as an alternative to media queries.

Media queries are awesome. However, they aren’t ideal for managing multiple images served for both single- and double-pixel displays (most notably Apple’s retina display). Primarily because the code for calling them is managed in multiple places in the CSS. This complicates code management and in some browsers forces double downloads.

The media query looks like this:

#Logo {
 background: url(“/i/logo.gif”) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
 #Logo {
  background: url(“/i/logo-x2.gif”) no-repeat;
 }
}

Solutions like SASS and LESS could provide us with a solution to help simplify code/asset management. Joe Lambert even wrote an extension for Compass/SASS which enables developers to manage images in one place while outputting code for devices with both pixel densities. But this doesn’t address the extraneous code (important on sites with high volumes of traffic) or the browsers which download both resolutions of each image.

Edward’s proposal looks like this:

#Logo {
 background: image-set(
 url(foo-lowres.png) 1x,
 url(foo-highres.png) 2x) center;
}

This essentially enables developers to manage assets in close proximity and with browser adoption only one asset would be downloaded. I strongly applaud this recommendation and hope the W3C takes a serious look at getting it implemented as a standard.