Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
  • 💬 Discuss
Tip 5: Serve Larger Images for High-Resolution Displays

Tip 5: Serve Larger Images for High-Resolution Displays

The large number of high-resolution devices appearing on the market is definitely changing the way we think about web design. High-resolution mobile devices tend to render a page with an assumed viewport width; on top of that, they also apply a default zoom factor! Otherwise, the content would appear very small.

This approach works fine for vector graphics such as text, SVG, and other visuals rendered by the browser, but for images it gets problematic. When a raster image is zoomed, it can look "pixel-y" and horrible. What can we do to solve this problem?

One tip is to start serving larger images than necessary. For an HTML <img>, for example, create the image larger than you need it to be, and then scale it down using a width attribute:

<img src="images/icon-64px.png" width="480px">

Now the image will look smoother on high-resolution devices, because you've supplied more image information for the device to use.

For CSS background images, you can use a media query to detect higher-resolution devices, and then serve a larger image as appropriate:

ul li:nth-of-type(1) a {
  background: url(icons/home-32.png) top center no-repeat;
  padding-left: 32px;
}

@media all and (-o-min-device-pixel-ratio: 3/2) {
  ul li:nth-of-type(1) a {
    background: url(icons/home-48.png) top center no-repeat;
    padding-left: 48px;
  }
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  ul li:nth-of-type(1) a {
    background: url(icons/home-48.png) top center no-repeat;
    padding-left: 48px;
  }
}

Notice that WebKit-based and Opera browsers use different unit values for this media query type. Having to provide both is a pain, but in the future this difference will disappear, as all browsers converge on supporting the standard resolution media feature, which does the same job, and it accepts values with a unit of dots per pixel (dppx).

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus