Retinize

Swap for Retina Displays

Retinize is small plugin that checks whether a device is retina enabled, if so, it will swap out images in the page for retina sized images. If no retina equivalent exists, it will default to the originally specified image. Also, choose whether retina swaps should occur on mobile devices or not, whether all images should be swaped or only specified images.


Resource Files

Retinize Images requires the following resource files:

Js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tm.retinize.js"></script>

Img Tag

Original Image
@2x Image

Background Image

Original Image
@2x Image

Data Attributes

Retinize comes with a few data attributes for selectively swaping, exluding or forcing retina images on mobile.

Attribute Values Description
data-2x none Instead of applying retinize to all images in the page, use data-2x to apply selectively. Added directly on the img tag or wrapper on which a background image is set.
data-no-retina none Useful when retinize is used on all img tags in the page and some elements require exclusion i.e. svgs. Added directly on the img tag or wrapper on which a background image is set.
data-retina-mobile none Selectively retinize images for mobile devices. Added directly on the img tag or wrapper on which a background image is set.

Retinize Usage

To call the Retinize Images plugin on one or multiple elements the following call should be added before the closing body tag on document ready.

Example
$( document ).ready( function(){
$( 'img' ).retinizeImages()
});
Attribute Values Default Description
retinaSupportMobile false boolean Whether the plugin should swap images on mobile retina enabled devices. Set to false by default to save bandwidth usage on mobile devices.
retinaSuffix string '@2x' Suffix added to image urls. Example: ../images/myImage.jpg becomes ../images/myImage@2x.jpg.
Theme Mountain

Current Version