Intelligent image cropping with focal point

12 December 2012

Responsive images are new and there's no actual accepted implementation yet. There are numerous projects that try to fill this void, but the all lack something. Now there is a new project called Focal Point that allows you to intelligently crop images in responsive designs.

What does it do?


The library lets you specify a focal point (via css) in an image. When the image is scaled it crops the image instead of scaling it, focussing on the specified focal point to keep the image as "readable" as possible without losing focus on what matters in the image.



Whut! I want this!


Yeah, try a few demos and download the CSS file here: https://github.com/adamdbradley/focal-point and implement it on your website. It's only 2.98Kb compressed and 723 bytes gzipped.

Whats the catch?


Well, this is not THE solution for all our responsive image problems, but it's a quick win for responsive websites, it doesn't add much load and it degrades gracefully. But there is a catch. A few catches even.

First the grid systems is weird... it devides every image in a 12x12 grid. That's good, but setting the focal point is measured from the center of the image. So, if you'd want the focal point to be on the eyes of our cute seal, you'd need to go... uhm... 2 cells up and 1 to the right? Or maybe 3 right and 5 up... I can't tell by looking at the image... Why didn't they just use a x/y coordinate grid system measured from the top left corner? That's way easier to visualize and guesstimate.
Or maybe a more intuitive option is to use percentages... Just by looking at the image I want to crop I can tell quite precisely where the focal point is in percentages. It is somewhere around 60% right, and 35% down. Or is this just me?

Second catch is that the images aren't really responsive. The scale and crop nicely, but if you load a large image (in filesize) it is still fully loaded on mobile/smaller devices. The whole point of responsive images is not only about scaling/cropping the images, but mostly it's all about file size. If I am using my phone in the small town where I live with terrible mobile internet speeds, I don't want to load a full, one and a half megabyte image just to see a small portion of it.

But, this is another big step towards a solid responsive image solution. If this "intelligent" cropping is combined with serverside image processing and the grid system was a bit more intuitive it would be great!
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

2 comments

  1. Gravatar

    Christopher Allen BRONAUGH

    15 February 2017

    Second put cropping.

  2. Gravatar

    rowilson

    03 November 2015

    first link broken