Make It Retina

jquery plugin for retina display

How it works

The plugin runs only when the website is visited by a device with retina display (iPad, iPhone, MacBook Pro Retina etc...).
It does all the necessary to make your site nice on retina displays...
Automatically! No need to restructure the entire website and it is super easy to use.
Just put the high-resolution files in the same folder as the standard image.

How to use

  1. Make sure you have the jQuery library included in your website. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  2. Include the Make It Retina plugin. <script type="text/javascript" src="YOUR_PATH_TO_JS/jquery.makeItRetina.min.js"></script>
  3. Next, call the plugin by entering this instruction where you prefer in the page. <script type="text/javascript"> $.makeItRetina(); </script>
  4. You're done. ...What? No, I'm not kidding! It's that simple!

Banner

Let everyone know that your site is compatible with retina display! Include this banner on your site by copying this code into your site! <a href="http://www.makeitretina.com" target="_blank"><img src="http://www.makeitretina.com/retinareadyIcon.png" alt="Retina website"/></a>

Options documentation

  • 'retinaSuffix'

    String - Default: "_2x"
    The default suffix is "_2x" that was introduced by Apple itself as a formality. For example, if the standard resolution image is named "banner.png", you should put the high resolution file in the same folder and name it "banner_2x.png".

    If you do not like the suffix, you can change it. Here's an example: $.makeItRetina({ 'retinaSuffix':'@2x' }); With the above configuration, the high-resolution version of the image must be called: banner@2x.png
  • 'checkExistenceBefore'

    Boolean - Default: true
    I highly recommend leaving it set to true because it controls the existence of high-resolution version of the file before replacing it into the HTML. If this is not found, the image is not replaced, avoiding unpleasant situations with nonexistent images on the site. But if you're a daredevil, you can change this setting. $.makeItRetina({ 'checkExistenceBefore':false });
  • 'checkifAlreadyRetina'

    Boolean - Default: true
    This setting controls if the processed image is already high resolution. This prevents cases like "banner_2x_2x.png"; $.makeItRetina({ 'checkifAlreadyRetina':true });
  • 'retinaBackgrounds'

    Boolean - Default: true
    When this setting is set to true, the plugin begins to look for high-resolution version of each background. Obviously, you can disable this. The 'retinaBackgroundsTags' option lets you specify which HTML tags that should be sought. $.makeItRetina({ 'retinaBackgrounds':false });
  • 'retinaBackgroundsTags'

    String - Default: '*'
    This is the query that find elements in which you try to replace backgrounds. You can change it with the jQuery syntax that you already know. $.makeItRetina({ 'retinaBackgrounds': true, 'retinaBackgroundsTags':'body div.menu' });
  • 'tryEavenforExternalImages'

    Boolean - Default: false
    It is very unlikely that the image linked from an external website has a retina version. When this option is set to true, the plugin detects that the image belongs to an external website and does not attempt to determine whether there is a retina version of it. $.makeItRetina({ 'tryEavenforExternalImages': true });
  • 'consoleDebugMessages'

    Boolean - Default: false
    To help you transform your website into retina, if you activate this function it will signal in the error console of the browser which high definition image loads not complete successfully. $.makeItRetina({ 'consoleDebugMessages': true });
  • 'makeItRetinaAnyway'

    Boolean - Default: false
    If you're not developing on a retina display, set this to true and it will make the site retina anyway. $.makeItRetina({ 'makeItRetinaAnyway': true });

Release Notes

  • Version: 1.3 - 23/08/2013
    - Fixed a bug that appeared on firefox with backgrounds. Now it works correctly. (thanks to jaminroe)
  • Version: 1.2 - 15/02/2013
    - Fixed a particular bug that occurs when the parent tag of an image was set to display:none. Now the size of the image is correctly set even in these cases instead of width:0 and height:0;
  • Version: 1.1 - 28/07/2012
    - Fixed a bug with backgrounds that already have a background-size attribute specified.
    - Significantly improved the efficiency of the optional control of the retinal images existence before they are replaced.
  • Version: 1.0 - 18/07/2012
    - First release.