• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

How to Choose (and Crop) a Mobile-Friendly Hero Image A guide for clients and designers

January 8, 2017 by Sallie Goetsch 12 Comments

Rule of thirds applied to a 960 x 330 version of the image discussed in this article

Unless you’ve been living under a rock, you know your website has to be mobile-friendly to avoid search penalties. Google laid down the law about this in 2015. Even if you confuse “responsive design” with the current trend for single-column websites with long scrolling home pages and full-width hero images, you’re aware that your website has to work on phones and tablets.

What you may not know is how mobile-friendliness constrains your design choices. One of the reasons that single-column layouts are so popular is that you don’t have to worry about how to stack the columns on smaller screens and how there’s a good chance no one on a phone will see your ads or calls to action if you put them in the sidebar. There are other solutions to the problem of organizing content for multiple screen sizes, but a single-column layout is a good option if you want the visitor to focus on one thing at a time.

Right now that one thing is usually a hero image (or video), usually with a call to action on top of it. For those not familiar with the term, a “hero image” is a full-width (and often full-screen) image designed to catch the visitor’s attention. The term allegedly derives from “hero prop,” which is a filmmaking term that designates a prop that’s meant to have a close-up zoom, and/or plays a major role in the film. Even if you’ve never heard the expression, you’ve seen hero images everywhere.

The Problem with Hero Images

If you choose this type of site layout, you, too, will need hero images. This is where those design constraints come in. To get the full effect of a huge image, you need a huge screen—or at least a screen that’s wider than 800 pixels. So you’re probably going to select your hero images with the desktop version of your website in mind. And that can be a problem, because not every image that looks great in a 16:9 HD ratio is going to look equally good on a device with a pixel width of 320.

If you think about it, it should be obvious that a horizontal image isn’t going to work all that well on a vertical screen, and vice versa. For background images (which most hero images are), there are two basic choices: scaling without cropping and scaling with cropping, achieved by using background-size: contain and background-size: cover in CSS.

If you use background-size: contain to scale that 1920 x 1080 hero image down for your portrait-oriented phone, it’s going to end up at 320 x 180. It will be hard to see detail and your text overlay might not fit on top of it anymore.

If you use background-size: cover to make sure that the image fills the whole height of the container, the image will be cropped so that you only see the center 320 pixels. You may lose some of the top and the bottom, too, though you can position the image so it crops from the top or the bottom instead of the middle.

If your hero image is something like a skyline or a mountain range, this shouldn’t really be a problem. People on mobile devices will see a smaller slice of the skyline or mountain range, but it will still be clear what they’re looking at.

But what if your hero image contains a more specific subject, like a human figure? And what if that figure is not positioned in the center of the image? You could lose the focal point of the image entirely on a phone.

Real-Life Example of a Problematic Hero Image

I received a design for a site with a landscape hero image that actually had two focal points on opposite sides of the image. This one is pretty much impossible, because while you can use media queries and other forms of art direction to ensure that the subject of an asymmetric image stays in the middle of smaller screens, there just isn’t room for two focal points on a 320-pixel screen. Or even a 600-pixel screen. In fact, with this image you’d be pushing it on an 800-pixel screen.

Proposed hero image with opposing focal points

One of those focal points was the client’s logo. The other was a statue of Paul Revere on a galloping horse. The logo was on the far left and the head of Paul Revere’s horse on the far right. From a responsive design perspective, this was a disaster. A center crop at 320 pixels wide cut off the horse’s head and almost the entire logo.

hero image with right and left cropped out for display on a phone

This, obviously, is not going to cut it. Even after persuading the client that the logo really belonged in the header, we were left with the asymmetric image problem. The poor client wrestled with it for entirely too long a time instead of choosing a different image. I actually think it would look okay if we took this crop for desktop screens:

Alternative 16:9 crop for desktop

That would leave us with Paul’s head and lantern still visible on smaller mobile screens:

the result of cropping the second version of the Paul Revere image from center

There were two problems with this possibility, however. The first was that the original version I had of the image wasn’t actually large enough for me to make a 1920-pixel wide crop from any but the original perspective. (I’ve cheated above by only showing you a 960px image.) The second was that the client didn’t like having Paul looking offscreen. (Seems to me he’s looking at his lantern, which he frankly shouldn’t have been if he was riding at that speed, but what the heck, it’s the client’s website.)

For Best Results, Choose an Image with the Subject at the Center

There are actually two approaches to handling an asymmetric image like this, assuming that your original is large enough to crop an appropriate largest size from. (Most stock photos and most photos taken directly from cameras and even late-model phones are going to be plenty big.)

The first is to choose a different image. I didn’t have another image of the specific statue of Paul Revere used in that photo, but the famous Paul Revere monument in Boston has been photographed many times, and it wasn’t difficult to find a promising version on Adobe Stock. Here is that image at its original ratio.

photo of Paul Revere Monument in Boston from Adobe Stock

Next, crop the image to your largest size using rule-of-thirds guides to center the most important part of the image. This ensures that Paul’s face is going to appear at the center on all screens.

Cropping an image using the rule of thirds

Our end result is a desktop version that looks like this, where we see both Paul and his horse…

The image on a desktop screen with text overlay

And a mobile version that looks like this, where we no longer see the horse, but still see Paul himself.

iPhone 5 simulation of new hero image

This is the simplest and least expensive way to ensure that your hero image works across multiple screen sizes–least expensive, because your designer only has to produce one crop of the image and your developer only has to code one set of media queries.

Art Direction: an Alternative Approach to Asymmetric Hero Images

When it comes to responsive web design and responsive images, “art direction” means selecting different crops of an image for different screen sizes and/or orientations. (See the W3C Working Group note on art direction and responsive images.) Smashing Magazine has published several articles about responsive images and art direction, notably on February 8th, September 1st, and September 29th of 2016.

The up side of art direction for your hero images is much greater control. The down side is that someone has to generate those different versions of your hero image and then code them. There are some tools for automatically cropping images based on point of focus, such as imgix, but are you going to pay $10/month forever so you can have art-directed hero images? You’re probably better off paying your designer and developer for the extra time involved for them to do it, unless you’re planning to change hero images frequently.

Eventually, this kind of cropping might be integrated into WordPress and other tools, so that if you have a theme that lets you select backgrounds for hero sections on your home page, they’ll be cropped appropriately, and the CSS generated, when you upload the images through the media uploader. But we aren’t there yet, and it’s likely to be a few years before we get there.

Prevent Problems with Mobile-First Design

Designers and clients alike seem to resist the idea of mobile-first design, but if the initial designs for this particular site had been made for a narrow screen, the problem with the original hero image above would have been entirely avoided. If you are a designer, you need to start insist on providing at least three views (mobile, tablet, desktop) of each proposed layout for a site—and you need to charge accordingly. If you’re a client, you need to ask for those three views of each proposed layout for your site, and be willing to pay accordingly. Anything else sets you up for trouble once the site gets to the build stage. If you can’t afford to do it right, you certainly can’t afford to do it over.

iPhone 5 simulation of new hero image

Related Items

  • The Obvious Argument in Favor of Responsive Design
  • How to Fit Your Screen Size to Your Background Image (Instead of the Other Way Around)
  • How to Configure Your WordPress Site for Mobile Devices (in One Minute)

Share this post:

Share on X (Twitter) Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Design Tagged With: Mobile-Friendly Websites

Reader Interactions

Comments

  1. Gary Box says

    April 9, 2018 at 12:41 pm

    Great article! Designing headers that work across different devices is the thing that challenges me the most and the thing I try and resolve first on any project.

    You’re the first I’ve seen address this in a blog article, I was beginning to wonder if I was the only one who saw it as an issue.

    I’m a WordPress fan personally and I’m amazed at how many premium themes seem to ignore this. There are so many that look great on desktop but awkward on mobile. The rest of the page looks great but it’s like they can’t be bothered to fix the hero image.

    I often cut subjects from backgrounds in photos and place them on transparent background. I then have two column header with text overlay one side and image the other. It looks a little like a hero on desktop but the columns become one on top of the other on mobile.

    Would like some other solutions though, maybe swapping out images so one ideally suited to mobile is used instead. To me it’s like technology is running ahead and not giving adequate solutions to designers. It was the same with retina screens and blurry logo images.

    Reply
    • Sallie Goetsch says

      April 9, 2018 at 1:06 pm

      The solution for logos is usually to use SVGs. But for header and hero images, it’s a little tougher. Some themes and page builders give you a place to add a different image for mobile headers, but mostly, it’s something I do through CSS, at least for headers or things that won’t need changing often.

      One thing I’ve had to do often is translate the images a designer gives me into CSS, if there’s an effect (overlay, filter, etc.) that needs to be in a certain position (under the text, most often) but will be in the wrong place on small screens. It can be quite a bit of work.

      Reply
  2. Inge says

    January 23, 2019 at 7:23 am

    Hola,

    Thanks a bunch for this article. This was exactly what I was looking for. Struggling with this as well for my clients.

    My solution – if really necessary – so far has been, to make one header design for websites/tablet and disable it for mobile. Then I create another header for mobile, which I disable for website/tablet. So far it has been working quite good. I’m curious to hear about your opinion about this, though.

    Is this a smart workaround (doesn’t require any unnecessary/complicated coding)? Or do you consider it an unprofessional workaround? Maybe it has some consequences that I haven’t thought about? Curious to know what you think.

    Thanks a bunch in advance!

    Inge

    Reply
    • Sallie Goetsch says

      January 23, 2019 at 1:38 pm

      You can certainly set up different headers for different screen sizes using media queries; the article is mainly about how to avoid having to do that, in cases where that isn’t in the budget, the theme settings, or the site owner’s skillset.

      Reply
  3. Ken Senter says

    October 29, 2019 at 2:20 pm

    I found that applying the css class Background-Position: X%; example: “background-position: 80% !important;” allows you to shift the image location on mobile.

    Reply
    • Sallie Goetsch says

      October 29, 2019 at 3:47 pm

      I hate using !important tags, because they tend to mess a lot of other things up by essentially breaking the way CSS is supposed to work. Also, even that won’t always work if the background position is determined by JavaScript, which it is in cases where something like Backstretch is being applied. However, if it’s working for you and you haven’t noticed any problems, go ahead on.

      Reply
  4. Flimm says

    July 31, 2020 at 3:20 am

    The cover block that comes with Gutenberg editor allows you to pick a focal point. That way, you don’t have to use an image where the focal point is at the center..

    Reply
    • Sallie Goetsch says

      July 31, 2020 at 10:31 am

      Those focal point settings are a way to set the values of the background-position property. They are helpful, but don’t solve everything. You still have to consider where the text overlay will appear on the image at different screen sizes. (Across the middle of the subject’s face is always an awkward one.)

      Reply
  5. WHMP says

    May 3, 2022 at 4:07 pm

    I’d love to hear more about cropping the hero image when showing on mobile when the image is not centered. Right now it just crops to the center and the image is horrible looking.

    Reply
    • Sallie Goetsch says

      May 17, 2022 at 3:51 pm

      You can choose different images for different size screens by 1) creating the images and 2) using Media Queries in CSS to set the background image. Some themes give you the option to choose backgrounds/hero images for desktop, tablet, and phone. You can also use CSS to modify the background position, so that instead of cropping from the center, it crops from the top left or right (or wherever your subject is). Check the docs for the CSS `background` property.

      Reply
      • GARY BRETT says

        February 25, 2023 at 12:54 am

        Great read, thanks. Using css to change the image on mobile / desktop seems the best option to me, as it should also reduce filesize on mobile. Have you a snippet of code I could try for that? I’ve tried using 2 headers and hiding depending on which device the user is on which does work but overall I’m just increasing page load time I guess? Would the desktop header still get loaded on mobile even if its hidden do you know?

        Reply
        • Sallie Goetsch says

          February 25, 2023 at 12:22 pm

          Hi, Gary. There are so many possibilities these days. (Pity I’ve not had time to blog about them.) For instance, you might choose an inline image instead of a background image, and in that case WordPress will automatically serve smaller images (taken from its auto-generated thumbnails) to mobile and you can adjust with CSS `object-fit`. Otherwise, you’ll want to use either media queries or container queries to select the specific images you want to use on smaller screens.

          Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact