Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Wednesday, January 08, 2014

Using High-Definition (Retina) Graphics with CSS

Responsive web design techniques aren’t just for changing the layout and composition of your web designs; they can also optimize your project’s imagery for high-resolution screens. CSS3 media queries include properties for detecting the pixel ratio of a device’s screen—and when the pixel density value is two or greater, we know the device has a high-density display, and can use high-definition graphics.

Standard definition graphics can appear soft or blurry

Standard definition graphics can appear soft or blurry when viewed on a high-density display.

Querying a device’s pixel ratio with CSS The most widely used media query in CSS3 is the screen size. This measures the number of pixels used in a device’s screen. When high-density displays hit the scene starting with the iPhone 4, web designers encountered their first departure from pixels roughly representing the screen size. For example, if you query an iPhone 4 or 5 screen, it will tell you the number of pixels across is 320, even though the device is using 640 actual pixels on the physical screen.

Making a media query on the iPhone

A media query on the width of an iPhone 3, 4, and 5, will result in 320 pixels. However, the iPhone 4 and 5 actually have 640 physical pixels in their screens. Using device-pixel-ratio in media queries allows us to get the physical properties of a device.

Because of this, we need to query the device with a different property. Instead of a measurement of the virtual dimensions, CSS3 allows you to query the device’s pixel ratio, and hence determine the actual number of pixels on the device. The code snippet below demonstrates a media query that works in all modern browsers for determining the resolution of a device’s screen.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .promo.one { background-image: url(../images/promo_1_2x.jpg); } .promo.two { background-image: url(../images/promo_2_2x.jpg); } .promo.three { background-image: url(../images/promo_3_2x.jpg); } }

If we determine the device is using double—or more—pixels to represent the data on the screen, we can use a higher-resolution graphic in that space.

Learn more about how you can create high-definition graphics and incorporate them into your design in Chapter 12 of my courseCreating a Responsive Web Design.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.