Project IndexBlogInfo / Contacttyler@tylercraft.com

Tyler Craft

Back to Project Index
jQuery Retina Plugin
jQuery Retina Plugin
jQuery Retina Plugin
jQuery Retina Plugin

jQuery Retina Plugin

Challenge:

Images that aren’t retina optimized look blown up and fuzzy on retina devices. At the moment, this is only the new iPad (aka, iPad 3), iPhone 4 and 4S. However, more and more devices will soon be retina enabled; from Android and Windows mobile devices, to OSX and Windows desktops. 

Solution:

Until more desktops have retina displays, this requires a client side solution. Therefore, I created a jQuery plugin that will swap out the image source for an image that is sized for retina displays.

The plugin will check if the device retina enabled, and if so, swap out the image with one that is twice as large.  The plugin I wrote supports a couple options for this:

  1. Check if the image has a data-retina attribute on the img tag.
  2. Add a suffix to the filename (for example, ‘-2x’)
  3. Custom callback so users can dynamically assign the retina file names - this is useful on Wordpress installs where the images file names all get appended with their file size.

While calling the plugin, the user can also specify if they want to check if the file exists or not.

To see an example of this, please view this example page on a retina enabled device:
http://retina.tylercraft.com/

It’s also up on GitHub, so please feel free to let me know about any bugs, or if you want to contribute more features. https://github.com/tylercraft/jQuery-Retina