Responsify.js – A jQuery plugin for perfect responsive images

The Problem

For everyone who is building websites is well aware of the issue of achieving the perfect responsive images. When you use images in a responsive container is likely to end up with an image with no object on medium and small screens. This is owed to fact that container can change to any width or height ration without taking in to account the image.

You know the saying “an image is worth a thousand words” but in case of a shot with no object or cut off important part, an image is worth just a few words and such look can be very problematic for site owners whose website rely on visual impact to gain customers’ attention.

The Solution

Fortunately, Responsify.js is a jQuery plugin that solves all issues with responsive images on any screen size.  How is it done?

• It gives you the option to define the focus area by using data-focus-xyz tag;
• It uses the focus area data from the image and calculates the size of the container which helps in resizing and positioning the image accordingly, making sure he focus area is always in the best view and position;

Here is a comparison between having responsive image with and without Responsify.js. Make sure you resize your browser to spot the difference.

How to use it

1. First of all, you may want to use an interactive web app to generate focus are data for the image. To do so, go to http://responsifyjs.space/app/

<img src="image.png" alt=""
data-focus-left=".30" data-focus-top=".12" data-focus-right=".79" data-focus-bottom=".66" />

data-focus-left is the focus area’s left position comparing to the image’s full width, in decimal. For example, if the full width is 300px, the focus area’s left is 90, then the data-focus-left should be 90/300 = 0.3. Same logic applies to other three data attributes.

2. Download and link the Responsify.js in your HTML doc:

<script src="responsify.js"></script>

3. Call responsify function when the window object is loaded:

$(window).load(function() {
$('img').responsify();
});

4. (Optional) Call the responsify function again when the window is being resized

$(window).resize(function(){
$('img').responsify();
});

Following these steps will give beautiful responsive image on your website. Have a look at the demo website to check how Responsify.js works. Download, if you want to give it a go.

DEMO DOWNLOAD