Retina.js is a JavaScript library that replaces regular images with HD images in devices with retina screens.
Retina.js only works on devices from Apple — iPhones and iPads, and maybe some others with the Retina technology. The library is great for adding detail to your website or app that’s used by iPhone or iPad users.
What’s more, the library uses LESS mix-ins for applying the high resolution images through your stylesheet.
NailThumb is a plugin for resizing thumbnails with just a single line of code.
Additionally, NailThumb can also add a title to the thumbnail; another notable feature is image cropping. Events, proportions, and even animations are available, too.
Although this isn’t a bandwidth-effective way of doing things — the full-size image is used to generate the thumbnail, — NailThumb still seems to be a great fit for portfolios etc.
Foresight.js is a JavaScript library for responsively displaying images.
It detects whether or not the user’s device supports high resolution images.
Additionally, Foresight detects the user’s network connection to show the image most appropriate for the user’s bandwidth.
What’s more, the library only makes a single image request, is dependency free, and works on most browsers, including mobile ones.
Adipoli is a jQuery plugin for quickly creating image hover effects.
Adipoli has over 20 image hover effects, including transition from black to color, overlay fold, and opacity change.
What’s more, the plugin has a number of useful options like changing the animation speed, adding overlay text, and other effects.
Adipoli is a surprisingly comprehensive plugin with an easy markup, and, it is pertinent to note, it weighs a mere 8 kilobytes.
wPaint is a jQuery plugin for creating a basic painting interface.
The plugin can take an image file for the background of the canvas element. wPaint also comes with ‘save’ and ‘load’ functions, and a color picker.
Even if the plugin itself isn’t as interesting, you can learn a lot from the source code.
Websanova, the developers of wPaint, have quite a host of other useful jQuery plugins available at their homepage – do check them out!
polyClip.js is a jQuery plugin for clipping JPEG images in a non-rectangular way.
The script cuts points with a supplied x,y value (there have to be at least three, naturally), and is pretty easy to use with some refreshing. However, for a more precise rendering, using an image map tool such as this one is strongly recommended.
The library weighs 2kb, plus an additional 11kb for IE7,8 which require the excanvas library for proper functioning.
14 April, 2012
By Lauris Veips
