Digital Masters Magazine

Home of Digital Masters

  • Design
  • Photo
  • Video
  • Web
  • Code
  • UX
  • Mobile
Home Code Using Sprites in @media Queries for High-Density Displays
Using Sprites in @media Queries for High-Density Displays

February 2, 2015 By Digital Masters Leave a Comment

Using Sprites in @media Queries for High-Density Displays

One way of speeding up a website is  to minimize the number of http requests by combining several small files of the same type. You can do this with scripts, stylesheets, and–by combining images into sprites–with icons and other pictures. So far so good. But using sprites and @media queries gets tricky when addressing devices with a high density display (such as Retina in iOS).

Important update as of 2016-01: HTTP/2 makes sprites obsolete. You should no longer be using this technique! (This article is only of historical value.) You can use sprites to save http requests, to preload rollovers, or to simplify design work.

A sprite is an image file which you can create by laying out the data of several images next to one another in one single image file, and saving it for web. Then, you can use CSS positioning magic to reveal the individual images contained in that one file, one at a time. This part gets somewhat tricky when addressing devices with high-density displays.

Mobile WebKit work with a virtual resolution in combination with a property which specifies the pixel density of the physical display.

The background-size property you specify for devices with a high-density display should contain the size of the standard-display sprite. For example half the width and half the height of the sprite for high-density displays.

The -background-size property you define should be the size of the total sprite, so not just the size of a single icon within the sprite. For example with a sprite consisting of three elements at 60px by 60px each:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
.selector {
background-image: url(http://your.domain.com/somesprite.png);
-moz-background-size: 180px 60px;
-o-background-size: 180px 60px;
-webkit-background-size: 180px 60px;
background-size: 180px 60px; } }

Filed Under: Code, Mobile

Leave a Reply Cancel reply

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

Treat yourself to the best of our content

Courtesy of our friends at substackapi.com

Manhattan beauty

Is this your cup of AI?

Speed is everything: shiny car engine rendering

How to force an older PC to upgrade Windows 10 to Windows 11 when it refuses to go along for the ride

Photo by Warren Wong on Unsplash

The tech revolt. Say goodbye to your favorite search engine that’s been wasting your precious clicks on silly captchas

Change language settings in Adobe Photoshop 2020

How to change the language of Adobe Photoshop

Apple MacBook Pro (16-Inch, 16GB RAM, 1TB Storage) - Space Gray

The new 16-inch MacBook Pro: Faster, slightly heavier but still ultra-light and #WorthTheWait

Change language settings in Adobe Photoshop 2020

If you want to run any of your apps of the Adobe Creative Cloud in another language, you have come to the right place. (There is no need to purchase another license; this is just a setting of your current install.)

Apple MacBook Pro (16-Inch, 16GB RAM, 1TB Storage) - Space Gray

Apple’s new 16-inch MacBook Pro sports even cooler looks than its predecessor. It is also truly different.

What’s up

ActionScript Adobe Adobe CC All-in-One WP Migration Angular 2 Apache Apple assistive technology Belarc Advisor bootable Windows 10 Upgrade DVD crawl disabilities DNG Download tool now Dreamweaver Event Viewer Google GPU HTML iOS iPhone JavaScript Microsoft Windows 10 OpenSSH OS X PayPal performance photos Photoshop PHP product key RAW RSS SEO speed SSD Tim Cook TypeScript upgrade deadline Wall Street Windows Windows 10 Windows 10 Fall Creator's Update Windows 10 free upgrade WordPress

Categories

  • Home
  • Subscribe
  • Advertise
  • Privacy Policy
  • Legal
  • Contact Us

Copyright © 2025 ·Streamline Pro Theme · Genesis Framework by StudioPress · WordPress · Log in