FocusPoint: jQuery Plugin for Responsive Cropping

Have you ever wanted images to perfectly scale regardless of device? FocusPoint is just the tool you have been looking for. The plugin crops images to fill the available space in a frame without cutting out the subject of the photo.

It’s the perfect solution for responsive cropping.

FocusPoint works by asking for you to indicate the most important parts of an image. Then as the frame changes for different devices, FocusPoint uses that part of the image first so that the things you want to be visible are always front and center.

At first glance, this plugin might look a little complicated, but don’t worry it comes with a handy how-to guide and is actually quite easy to use. (You can actually do it with just one click.)

Once you have installed the plugin, you’ll need to markup the image container in your CSS and then fire the plugin. That’s it!

The plugin has a few specific configurations that you can toy with when it comes to how images rend during resizing and what the throttling rate looks like. And one of the best tips for using FocusPoint is thinking about the images on your website and how they should include some negative space for cropping flexibility.