High DPI Images
Create High DPI/Retina images without using backgound images and without loading large images on non retina devices
First Go get yourself a copy of Modernizr and make sure you tick the box for
Media Queries when you create your download.
Make sure you have jQuery on the page
js/hd-images.js file to the end of your document. (located in source files)
css/hd-images.css file to the page or just add the css to your site's css. (located in source files)
data-hd-src to your image. and the class
img-hd. The value of the
data-hd-src attribute should be the path to the image that is twice the size (in terms of pixels) of the standard image.
<img src="img/my-image.jpg" data-hd-src="img/my-image-hd.jpg" class="img-hd">
Basically, we use modernizer and the added test located in
hd-images.js to determine if the device is a High DPI/Retina device. If it is, we go get all the images with the class
img-hd and change the source to the hd file. Since the image is contained in a box that is around the same size as the smaller image, the new big image is compressed down to fit that same container and you get a higher DPI.