jQuery.imgx
Lightweight jQuery extension for serving high-resolution images on desktop and mobile devices. Compatible with @2x, @3x, and @4x image varients, using Appleโs recommended naming convention for high-resolution graphics.
Installation
Include the latest version of jQuery and jQuery.imgx.js in the <head> of your HTML document:
<script src="jQuery.min.js"></script>
<script src="jQuery.imgx.js"></script>How to Use
Reference the imgx() method and include @2x, @3x, or @4x image varients in the same directory as the original source. The script will automatically load the appropriate image(s) based on the displayโs detected pixel density. See the live demo: code.nath.co/imgx
jQuery
$(function() {
// All Images
$('img').imgx();
// Class Only
$('.retina').imgx();
});CSS
img {
display: block;
height: auto;
max-width: 100%;
} Release Notes
jQuery.imgx 1.0
โ Initial Release
jQuery.imgx 1.0.1
โ Added WebP image format, thanks @jarjan
โ Modified structure for performance, thanks @elislade
jQuery.imgx 1.0.2
โ Added screen media type
โ Added support for @4x images
โ Regex is now case-insensitive, thanks @azmenak
Feedback
If you discover any issues or have questions regarding usage, please send a message to [email protected] or find me on GitHub @nathco.