Home » Articles & Inspirations » Supply High Resolution Image For Retina Display Device

Supply High Resolution Image For Retina Display Device

Supply High Resolution Image For Retina Display Device

  • Stumble it!
  • Share

Introduction

There are wide range of screen pixel density of devices available in the market today. Some devices such as iPhone 5, iPad, MacBook Pro features very high resolution displays, while others straggle behind. As a professional web designer or web developer, we have to ensure our website or web application looks good on these high pixel density devices.

To avoid blurry images on high pixel density devices, we need to supply higher resolution of images on our website or web app using the latest Webkit’s CSS function called – “Image Set“. Using the Image Set function, browser can figures out the pixel density of user’s device and displays the suitable version of images for the user.

Usage of CSS Image Set

Here is the example usage of CSS Image Set:

.myImage {
    background: -webkit-image-set( url(images/bg.jpg) 1x, url(images/bg_2.jpg) 2x);
    height: 300px;
    width: 300px;
}

As you can see above, we apply Image Set function to the background property. In the Image Set function, 1x is equals to standard version of image; 2x is equals to high resolution image. This tells browser to pick and serve high resolution image as background, if user’s device has high pixels density, else a standard version of image will be served.

Please bear in mind that, the values of height and width of the CSS class must match the standard density image’s dimensions, because CSS pixels are not the same as device pixels, which means that 1 CSS pixel corresponds to 1 device pixel on standard density devices; However, on high density devices, there are 4 device pixels inside every CSS pixel.

CSS pixels are not the same as device pixels

Supported Browser

The Image Set CSS function is currently only support by Safari 6 and Chrome 21 using the webkit prefix. The Image Set function is currently discussed only, not part of the CSS4 spec. It may change at any moment.


  • Choosing A Best Web Host For Your Websites
  • Showcase Of 10 Awesome HTML5 Canvas Games
  • Showcase of Creative Product Page Design Series 1

  • mohan

    nice tute

Android, iOS Development Tutorials