Dense.js – A jQuery Plugin To Serve Retina-ready and High Pixel Ratio Images


Dense is a jQuery plugin that offers an easy way to serve device pixel ratio aware images, bringing in retina support to your website. Clear the blurry, images be crisp.

Your device pixel ratio was seen as and rounded up to 1. As such, you are seeing the 1x variation of the above image. The image tag doesn’t define data-1x attribute, so we are defaulting to src.


The above responsive, retina-ready image is implemented by simply including the jQuery plugin on the page and calling its $.fn.dense() initializer method. The initializer method is set to target those img elements that should serve retina-ready images when needed. The plugin can be included and invoked by using either browser globals or AMD.