Smart cropping using css

Mon, 27 Oct 2014 00:00:00 +0000

Photo credit: Philipp Rümmele

Introduction

At lunch today there was a discussion on using responsive images in web projects and some challenges of wanting to display in a nice edge-to-edge manner which leaves the aspect ratio of the image area outside our control.

The question I got that inspired this post was:

Is there any good library or such that'll let me decide the weighting of the featured photo so it'll scale towards the important part?

I actually didn't have a response to this at once, but I was determined to find it since the issue intrigued me.

Let's use this photo of a stunning view with a our beloved Eddie (this dude definitely needed a name) looking out over the mountains as an example of a image that'd we'd like to feature.

Basics

We can achieve a responsive, awesomely moody full screen background using the following code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Smart cropping</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="coverImage">
  </div>
</body>
</html>

CSS

body {
  margin: 0px; /* Remove the extra margins */
}

.coverImage {
  background: url(coverPhoto.jpg); /* Set our background photo */
  min-width: 100vw; /* 100% of viewport width */
  min-height: 100vh; /* 100% of viewport height */
  background-size: cover; /* cover sizing is what helps us adapt the photo to the div size */
}

See demo here

However, if you play around with the fiddle above, you'll discover that if the area available to display the image strays from the original aspect ratio we are likely to run into two problems. Either the man looking out over the view won't be visible and we'll lose alot of the point of the photo, or even worse, the man and the closest mountaintop both will be outside the field of view and we'll also lose depth in the photo as illustrated below.

In comes Smart cropping

The idea of smart cropping in responsive design is the ability to have a image adapt and follow a main focal point. this is a concern in responsive design where the area we aim to cover with an image can change in both size and aspect ratio.

Awesome, how do we save Eddie?

I had a look around on the Internet for some kind of project that was looking to accomplish this and found that a project named Focal Point was getting alot of attention. Focal Point is a CSS library that provides smart cropping, it is however focused on providing this for legacy browsers and thus it does have alot of bloat if you aren't in need of an option that will work prior to Internet Explorer 9

Another interesting project is Focus Point (No chance for mixing these two up eh?). focus Point solves smart cropping with a js library requiring jQuery, so again there is the issue of some bloat, but if you want some nice fancy transitions and stuff this might interest you. (To his credit he does mention the method I'm suggesting as well and has done some analysis on how his methods weighting differs.)

A clean and minimalist solution.

Being a fan of the simple, I do feel that people tend to over-complicate this issue that can in fact be solved with one line of CSS.

Returning to the sample image, if we look at where we'd like to weight the focus when scaling this image it'd be on Eddie himself. I'd say we'd like to focus in the chest to waist area to make sure we'd get some cliff in the shot as well.

So we get the coordinates from this point and use them to calculate the percentage from the left and top edge.

For width: 437 / 640 = 0.68 which gives us a weighting point 68% from the left edge of the photo.

For height: 289 / 427 = 0.68 again, meaning our weighting point is 68% from the top of the photo.

So, building on our above example, if we add the following line of CSS the image will automatically weight itself towards our target, without adding any bloat to our site.

CSS

background-position: 68% 68%;

See demo (with some tweaking of the weighting) here

Conclusion

So this turned out to be a long post about a simple solution. The point here though, is that it was a valid question and one that illustrates the power of CSS3 and how things that we think may be very complex to achieve. I also am a big fan of the simple solutions when you find them and think they are worth the same attention that a complex one would have gotten. The third takeaway would be to feature the hard work of the two mentioned GitHub projects that have clearly gone way further in depth with this than I have and seem to have solved this decently for legacy software which to me is impressive. Right?

Building something new

Sun, 26 Oct 2014 00:00:00 +0000

Gathering dust

For some time I've had the feeling that time had outgrown the hosting model I was using for my personal website. Today this notion was brought to the light again when I received an email from my hosting provider with the annual bill for the coming 12 months of service.

I remember having the same thoughts a year ago, but the combination of me wanting to put focus on other projects and that I received a very good deal for the hosting plan I was on made me decide to put off the upgrade and stay with my provider for another year. During this time it became very apparent that for me, the whole web hosting thing felt like a thing of the past and I wasn't at all motivated to spend any considerable amounts of time on something that felt obsolete to being with.

Something obviously had to change. I gave some consideration to where I wanted to go with this and what I actually wanted to get out of having some kind of public on-line presence which resulted in several insights. The main one being that I needed something that would let me hit the ground running, to be able to start building and adding content along the process of evolving the site itself.

Simplifying things

The first step of achieving this would be to have something up and running in no-time. This would mean moving into a much simpler setup, which was something I liked, having started out in the era of simple text editors creating websites. I looked around on the net and found Jekyll (which I realize that I likely found so fast since my brother had spoken to me about it a few months earlier) a static site generator that works well with GitHub Pages. After reading about Jekyll's pro's and con's I decided that this was a good place to start. Resetting and going back to a more simplistic solution would refocus on content and getting things done.

Here's to the start of a new adventure on a clean slate where only the first block has been placed.

David Stenbeck