Subject Alignment in Responsive Slider Images

I often run into a scenario when working with my web clients where I’ll build a gorgeous responsive slider for them and then when they take over and start making updates themselves, they’re not fully aware of how to position the subjects in their images.

This often results in great photos on a desktop view, but when you view it on a mobile device, the subject gets cropped out of frame. Here’s an example from one of my current clients.

You can see above this is nice image with great dimensions. It’s a perfect fit for a desktop view, clearly showing the subjects on the left hand side with a sign positioned in the background to the left. Looks great!

My heart just breaks. All the time that went into getting that high quality photo and the great editing job the designers did is all for naught. The subjects are now left aligned so much that they’re off the screen.

The main problem here is that we’re trying to fit an image that makes great use of horizontal space into a layout that has limited horizontal space.

At this point, I will usually do some editing of the CSS to fix the issue. I’ll also try to communicate that subject alignment in your images is important when you’re creating image assets to use on your site.

At the end of the day, the image needs to fit the dimensions of the web page, not the other way around. That’s when you end up with the problem above.

Communicating Subject Alignment in Images

I struggle to communicate the importance of subject alignment to my clients and there’s not a handy diagram of what I mean when I say “left aligned,” “right aligned,” and “center aligned.”

Below, I’ve put together a few examples of different alignments for subjects in photos.

Center Aligned Subject in Images

Subject should be dead center aligned in the image frame. On mobile devices for responsive sliders, the subject would still be in view.

Left Aligned Subject in Images

For left alignment, the subject should be lined up in the middle of the left half of the photo. Pretend the image were bisected vertically right down the middle creating two equal halves, left alignment would mean that the subject is right in the middle of that left frame.

Right Aligned Subject in Images

For right aligned subjects in images, the subject should be lined up in the middle of the right half of the photo. Pretend the image were bisected vertically right down the middle creating two equal halves, right alignment would mean that the subject is in the middle of that right frame.

Center-left Aligned Subject in Images

Center-left is a healthy middle ground between center aligned and left aligned. For positioning, pretend the image was bisected vertically twice creating three equal boxes. For center-left alignment, you’ll want the subject to lie on the bisecting line between the middle and left boxes.

Center-right Aligned Subject in Images

Conversely, center-right is a healthy middle ground between center aligned and right aligned. For positioning, pretend the image was bisected vertically twice creating three equal boxes. For center-right alignment, you’ll want the subject to lie on the bisecting line between the middle and right boxes.

Hard Left Aligned Subject in Images

Hard left alignment isn’t really a common use case for most web applications. It doesn’t have a very nice symmetry to it typically, but in some cases when you need it, you’ll want to position the subject in the left 4th quadrant of the image frame.

Hard Right Aligned Subject in Images

Similarly, hard right alignment is the same. You’ll want to position the subject in the right 4th quadrant of the image frame.