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.
Demo
Your device pixel ratio was seen as and rounded up to . As such, you are seeing the x variation of the above image. The image tag doesn't define data-x attribute, so we are defaulting to src.
If the image doesn't specify any data-nx attributes, retina image paths are constructed by appending a _{ratio}x suffix to the src. For /img/image.jpg 2x retina image would be looked from /img/image_2x.jpg.
Want complete barebone example to fiddle with? We got this basic demo. Complete, working code, collection of the most simplest usage patterns.
Usage
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.
<script src="jquery.min.js"></script>
<script src="dense.min.js"></script>
<script>
$('img').dense();
</script>You may also initialize Dense with its default configuration by adding a dense-retina class to the body element. Dense will target all images present on the page at the document ready event, using the default option values. This allows you to run the plugin without manually initializing it, or having to write tiny bit of JavaScript.
Supports
Web browsers
Dense will run on any modern web browser, and is able to display retina images on browser, device and platform combinations that supports high pixel ratio features. This includes Retina devices with Opera Mobile, Webkit based mobile browsers, like Safari on iOS, and desktop browsers such as Chrome and Safari. The base browser compatibility is basically the same as with the supported jQuery versions.
AMD
In addition to normal browser global use, Dense can be used with RequireJS and other AMD loaders. The plugin registers itself as an anonymous module, if the use of an AMD API is detected.
require(['jquery', 'dense'], function ($) {
$('img').dense();
});With the default RequireJS configuration, the above would load two files, scripts/jquery.js and scripts/dense.js, and then attach the retina functionality to all images on the document at the time.
jQuery
Currently Dense supports jQuery library versions starting from 1.7. This includes versions such as, but not limited to, 1.7.2, 1.8.3, 1.9.1, 1.10.1 and 2.0.2. See tests directory for all versions the project is tested against.
Zepto
In addition to jQuery, the plugin has a limited support for Zepto library. This means you can use it instead of jQuery, if you are feeling adventurous and only need to offer compatibility to set of modern platforms. The plugin should work decently well with Zepto on the most up to date WebKit browsers, but doesn't contain any specific compatibility code for it. How well the plugin works, depends entirely on Zepto's API.
To run Dense with Zepto, you will need the Zepto 1.0.0 framework's default Core, Event and Ajax modules and Simply Deferred plugin. While possible, running Dense on Zepto isn't exactly recommend, especially if you are not (JavaScript) developer yourself. If you wish to use Dense as a AMD module, note that Zepto 1.0.0 itself doesn't come as an AMD module. If you are going use an extra require configuration or wrapper plugin to get Zepto to load as an AMD module, note that Dense references a module named jquery as its dependency.
Docs
License
Dense is released under the MIT license. See the full license file.