Photo for 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

Add the js/hd-images.js file to the end of your document. (located in source files)

Add the css/hd-images.css file to the page or just add the css to your site's css. (located in source files)

Add the 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">


What's Happening?

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.

About The Author

James Olson

James is a graduate of the University of Colorado with a degree in business management. After college, he worked for a small advertising company that focused on the Real Estate Industry where his main focus was on web advertising and email campaigns.

In 2008, James joined booj as a member of the Deployment team and quickly moved through the ranks to become the lead front-end developer. In 2012, he was named the Director of Research & Development where he continues to push the envelope of new web technologies.

Similar Posts

Photo for Bootstrap 3 Grid Columns Clearing

Bootstrap 3 Grid Columns Clearing

Source Files #Bootstrap 3 Grid Columns Clearing By adding the `js/ie-row-fix.js` file and ei...