Serve high resolution graphics to high density (Retina-like) displays with Sass.
CSS Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
.gitignore Initial commit Oct 26, 2012
CHANGELOG.md Update Changelog with bower instructions May 22, 2013
LICENSE.md Update year in license.md Dec 17, 2013
README.md
_hidpi.scss Fixed a comment to the correct _x2 filename postfix convention Sep 1, 2013
bower.json Retrograde version in bower manifest May 8, 2013

README.md

Retinafy your website with Sass & Compass

hidpi() is a Sass mixin that seamlessly serves high resolution background images to high density (Retina-like) displays. It comes with a debug mode to test Retina graphics on a regular display.

Demonstration

How to Use It

  1. Install with Bower: bower install sass-hidpi
    OR Download _hidpi.scss to your Sass project (preferably with Compass enabled).
  2. Import the partial in your Sass files: @import 'path/to/hidpi';

Perfect, you can now use the mixin in your Sass project.

Passing Content to the Mixin

You can virtually pass anything to the mixin and it will be displayed on high density displays.

In this example, the border color of the #logo element is:

  • blue on regular displays
  • red on HiDPI (Retina-like) displays
#logo {
  background: url('../images/logo.png') no-repeat;
  border: 1px solid blue;

  @include hidpi {
    background-image: url('../images/logo_x2.png');
    background-size: 250px 188px;
    border-color: red;
  }
}

Compiles to:

#logo {
  background: url("../images/logo.png") no-repeat;
  border: 1px solid blue;
}
@media (-webkit-min-device-pixel-ratio: 1.3),
       (min-resolution: 124.8dpi),
       (min-resolution: 1.3dppx) {
  #logo {
    background-image: url("../images/logo_x2.png");
    background-size: 250px 188px;
    border-color: red;
  }
}

Image Only

When passing the name of an image as an argument, hidpi() serves the equivalent high-resolution image on high-definition displays.

Image files should be named as follows, placed in the images folder of your Compass project:

  • image.png: default image
  • image_x2.png: high-resolution image
#logo-auto {
  @include hidpi(logo);
}

Compiles to:

#logo-auto {
  background-image: url('../images/logo.png');
}
@media (-webkit-min-device-pixel-ratio: 1.3),
       (min-resolution: 124.8dpi),
       (min-resolution: 1.3dppx) {
  #logo-auto {
    background-image: url('../images/logo_x2.png');
    background-size: 250px 188px;
  }
}

Note: this feature requires Compass.

Debug Mode

You can force hidpi() to always serve high-resolution graphics and test the rendering on a standard, non-Retina display.

Set the $hidpi-debug variable to true:

#logo-auto-debug {
  $hidpi-debug: true; // Force high-resolution graphics on standard displays
  @include hidpi(logo);
}

Compiles to:

#logo-auto-debug {
  background-image: url('../images/logo_x2.png');
  background-size: 250px 188px;
}

It loads logo_x2.png by default (no @media queries).

Non-PNG images

hidpi(image) is looking by default for images/image.png.

If your image is a JPEG, for example image.jpg, you should specify it as a second argument:

#image-jpeg {
  @include hidpi(image, jpg);
}

Same story with a GIF:

#image-gif {
  @include hidpi(image, gif);
}

Requirements

  • Sass ~> 3.2 (for manual @include hidpi {})
  • Compass ~> 0.12.2 (for auto @include hidpi(image);)

Note: Compass is only needed when passing arguments to hidpi() instead of a content-block.

Also Read

More HiDPI examples and resources