Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

README.md

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 code@nath.co or find me on GitHub @nathco.

About

Extension for serving Hi-Res images on desktop / mobile

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.