SharedTutor | Tutorials For Everyone

Find your interesting tutorials in Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

Retina Display Ready with Media Query

Apple set a brand new standard in device screen resolution with Retina display. With million of pixels, Retina display delivers more vibrant, more in depth and sharper images on the screen. However, this affects just how on designers and developers deliver the images on these units, as images which are not optimized for high-resolution screen can look less than stellar.

So, in today’s post, we will look into how to deliver specific image which can be optimized for high-resolution screens.

Recommended Reading: Better And Sharper UI Icons With Web Fonts

Using Vector Graphic

First coming from all, if the images do not require realism or possibly a complex color scheme, using Vector graphic might be your best option. Unlike Raster image, Vector graphic is not dependent upon pixels, in order that it will be displayed fine and sharp on any screen resolution.

There are several ways to add Vector Graphic on the Web, we could either use SVG, Fonts, or also Canvas mentioned in:

  • Scalable Vector Graphic Series

  • A Guide To: Better And Sharper UI Icons With Web Fonts

Using Media Query

There is the one other way. We can conditionally deliver optimized graphic for specific screen resolutions using Media Query. The syntax is comparable to Media Query for establishing responsive layout. However, in lieu of specifying the viewport width breakpoint, it specifies the device pixel ratio (dpr) and screen resolution threshold.

 @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi)  /* Style Rules */ 

The Media Query we showed within the above example will assign the styles for screen resolution using a minimum device pixel ratio of 2 or with minimum resolution of 192dpi.

We can retrieve the dpi number by dividing the screen resolution with its diagonal inches.

For example, a 13.3 inches screen with 1280×800 resolution gives us 96(dpi). So, the volume of 196 that we’ve shown inside the above code snippet is merely around double that number (96dpi).

In term of getting the product pixel ratio, it is quite scientific. But, should you be keen on doing the Math, Boris Smush over at HTML5 Rocks will show you how on this page.

Alternatively, we can also query the pixel ratio number through window.devicePixelRatio. In the following example, we return the worth from window.devicePixelRatio having an alert window.

 var dpr = window.devicePixelRatio; alert('Device Pixel Ratio: ' + dpr);

This can give use the following bring about Retina display, like the new MacBook Pro, and iPhone 4.

In non-Retina Display, the quantity will return 1.

In addition, below is really a list of Device Pixel Ratios for popular devices to your reference.

Device Pixel Ratio

iPhone 4, iPhone 4S, iPhone 5, iPod Touch

iPad with Retina Display

Galaxy Nexus, Galaxy Note, Galaxy SIII

Kindle Fire HD

Galaxy S Plus, Galaxy SII

From the table, you can see that there are a few HD screens with 1.5 dpr. So, it is best to set the minimum threshold in Media Query for 1.5 to hide more screen resolutions.

 @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi)  /* style rules */ 

Also, for wider compatibility over the browsers, we can easily also add min-device-pixel-ratio making use of their respective vendor prefixes, like so.

 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi)  /* Style Rules */  


We have formulated a page for demonstration. In this page, we assigned two image formats: a .png image for normal screen resolution as well as an SVG for the HD screen, which will be assigned through Media Query, like so.

 a  background-image: url('img/hongkiatcom.png'); background-size: 100%; background-repeat: no-repeat;  @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi)  a  width: 100%; background-image: url('img/hongkiatcom.svg'); background-size: 100%; background-repeat: no-repeat;   

Now, you can look at the demo in action through normal and Retina display. It will also show the picture name, which is being displayed on the page.

  • View Demo

  • Download Source

Further Resources

Related posts:

  1. Blurry Text on MacBook Pro with Retina Display [QuickFix]

  2. How To Write A Query Letter Professionally

  3. How to Retrieve and Display Battery Status with HTML5

  4. Create Social Media Profile Covers Easily With Social Media Image Maker

No comments

Post a Comment