Responsify.js – A jQuery plugin for perfect responsive images

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

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;
Related post:  Simple CSS3 Paper Cards Accordion Inspired by Google Material Design

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

Responsive image without Responsify.js Responsive image with Responsify.js
View image | Try it yourself View image | Try it yourself

 

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


Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close