Responsive and adaptive images using focus points

Devices and computers come in millions of shapes and sizes it's very hard as a web developer to make your images fit and look good at every size. In this post i'm going to look at a second solution which uses focal points to tell the browser what should be on screen.
Responsive and adaptive images can be implemented in several ways and there are advantages and disadvantages to each method. Here are just a few of those:

• Background image set with css to cover the area (fits to content height)
• Responsive image library such as picturefill
• Replace the image src using css content:src for different media queries (see my previous blog post)

However these solutions don't solve the main problem. How do we ensure the most important part of the photo is always shown in view? regardless of the format/size of the image?

Enter focus point solution!

1. First choose the most important point of the image
2. Work out the coordinates as a percentage of the image width/height e.g. 24% from the left 48% form the top
3. Then add it as a background image to an area of the page and define the background position using the percentages

.image {
    background-image: url('https://i.pinimg.com/736x/17/30/42/17304288adec0f9350546e7a745305c9--antlers-elk.jpg');
    background-position: 28% 89%;
}

Now the image will position itself based upon your focal point, and not the center of the image!

If you are using jQuery already in your page you can use this handy plugin called jQuery Focus Point which will calculate the values for you.

I wanted to use the idea on an AngularJS project, but couldn't find a solution so made my own which you can see working here:
https://jsfiddle.net/kmturley/607swqnh/27/

This solution works really well went integrated with a CMS. You ask the uploader to set one focal point for each image, and the images only need to be outputted in different sizes (no extra crops are needed)