Responsive Images Made Easy with ResponsifyJS

By Jake Rocheleau. in Toolkit. Updated on July 13, 2022.

The modern web should be 100% responsive and newer libraries are making this increasingly possible.

With free plugins, such as ResponsifyJS, it’s even easier to get your websites working on all devices. This free jQuery plugin takes a container of images and dynamically rearranges them based on varying screen sizes.

Since different containers hold images differently, they can resize in very strange ways. Sometimes, you’ll have photos of people and their faces can get cut off when resized on mobile.

The Responsify plugin was created to solve this exact problem. It can work automatically but the true magic lies in defining your own focus area on the picture.

It uses an internal system of decimal descriptions to find where the focus of the image should be. For example, you can define positions such as data-focus-top which “blocks in” a certain segment of the image.

This data needs to be passed in the form of decimals, for instance a .5 decimal targets 50% of the image (left/right or top/bottom). Naturally, this is pretty confusing to do by yourself. But, there’s a free Responsify app that lets you calculate the positions dynamically in your browser.

Just upload a picture, define the focus area, then copy/paste the image code into your website. The Responsify plugin will have all the data it needs to properly resize the image on smaller screens.

You can find quite a few live demo links in the GitHub repo, including code snippets to copy/paste into your site.

This plugin is not the perfect solution for every project. Sometimes, you’ll want images to resize without fixed focus areas. But, if you’re using masonry grids with jQuery it doesn’t hurt to add ResponsifyJS to your stack.

To learn more, visit the plugin homepage for a live demo, a download link, and a full setup guide.