You don't have to be a web designer or developer to know that, when used well, imagery has a powerful effect on the way a website makes people feel.
When you only have a matter of seconds to make a strong first impression and connect with your audiences online, it's vital that every decision is backed by strategy, and the imagery you choose to tell your story is no exception. We know that people's eyes are drawn to visuals on a page before they read words, and that image and video leave a more lasting impression on people than copy. For this reason, we almost always recommend including a prominent photo, carousel of photos, or video above the fold on web pages, especially the homepage. We often refer to this as the "hero image" or "hero video".
When we work with clients on web design projects, we're often asked about our recommendations for choosing these hero images for a website. So, I'm here today to demystify some of the most common questions we get here at Speak from our clients about web images:
- How To Choose An Image For Your Website That Will Drive Action
- Image Cropping 101
- Image Compression
How to Choose an Image for Your Website
There are two main questions you should ask yourself when considering what imagery will best represent your organization, its mission, and its values online:
- Who is my target audience, and what do they want to see?
- What kind of emotion am I trying to portray?
Let's talk about why these guiding questions are so crucial.
Who is my target audience, and what do they want to see?
Your target audience should be at the forefront of your decision making when choosing the most compelling imagery for your website.
Take a moment to consider who you're hoping will interact with your site once it's newly designed or redesigned. Keep their customer persona and journey in mind. When they visit your website, what type of image will tell the story they want to hear in order to cue to them in the first few seconds after the page loads that they've come to the right place to get what they're looking for?
Think about who your organization is and what industry you operate in. The answer to the question of what your target audience wants to see will look very different if you're creating a website for, say, a zoo, than if you're telling the story of a law firm.
If you're designing a website for a zoo, your target audience likely includes the following:
- Prospective and returning visitors
- Members and donors
- Animal care and conservation activists
- Families local to and visiting your area
Your main goal is likely to encourage more visitors and supporters of the zoo, so you may want to feature images of:
- Animals portrayed with dignity and beauty within your habitats
- People having fun at the zoo
- Zoo visitors interacting with animals
- Staff interacting with animals and visitors
On the other hand, if you're creating a website for a law firm, you may instead be more focused on portraying the core values people seeking legal aid may look for in a firm:
- Trust and reliability
- Deep knowledge
- Advocacy
- Partnership
To evoke these values, you may opt for images of:
- Lawyers meeting with clients or discussing business
- Symbols of connection and support like shaking hands
- Legal books or paraphernalia that showcase expertise
What kind of emotion am I trying to portray?
Emotions drive action. Tapping into the right emotions from your audiences, then, will help you ensure your website leads to goal completions and conversions.
What is the biggest feeling you want website visitors to come away with when they visit your site for the first time? The answer to this question should guide the sort of emotion you want images on your website to evoke.
If your organization is an animal shelter, for example, you might consider using images that feature animals in need of care in order to create a sense of sympathy and urgency from visitors. Pairing a photo along these lines with a strategically placed call-to-action button to donate or support your organization in some other way will evoke a powerful emotion, then immediately offer users a way to act on that emotion.
On the other hand, if the goal of your website is to promote a study abroad program through a university, for example, you may consider instead using photos of young adults who look confident, happy, and fulfilled in order to instill confidence in users that the outcome of your program is positive.
Take some time to jot down the feelings you would want to have if you were visiting your own site or experiencing your organization for the first time. Use this practice to determine whether an image is the most strategic choice for your website.
Remember, people are far more compelled by original imagery as compared to stock imagery.
If you don't have a real, original image that accomplishes the goals you've just identified, we highly recommend tapping a pro photographer to help you capture the perfect shot, rather than turning to a stock option. Give our team a shout! We have expert photographers and videographers on staff who can help you capture the best web images to meet your goals.
Image Cropping 101
Once you've chosen a photo that will drive action, let's talk about how to determine whether it checks the other boxes it needs to check to work on your site.
Aspect ratios, aspect ratios, aspect ratios. Where the image sits within a specific container and what the code does to position the image is going to affect the way your images are cropped. Let's explore how this works with a visual example:
If you're choosing an image for a zoo or aviary website, you might be thinking, "This image would be perfect for my banner! It's exciting and it features part of our target audience interacting with our animals."
But, while the image itself is great, it unfortunately wouldn't work with most banners.
Here is a wireframe showing what this photo would look like if centered onto a standard banner image of 1920px wide by 750px tall.
Not quite what you had in mind, is it? So, why is this happening?
Image Positioning
Right now, this website is telling the image to center itself inside of the container that we have set. It is all about the aspect ratio of the particular container that we are trying to fill. Because our desired focal point within the image is not in the center of our image, then it is going to be cut out of the container’s visible area.
Here is a look at what the image looks like behind the scenes to better illustrate what is happening with the code:
How Would We Fix This?
If you were to upload an image to your website and see something like what happened above, you would need to crop the image’s height down to a size that will better center within the container or in this case, banner.
There are image editing tools in Photoshop, Wordpress, and even free tools online that you can take advantage of to make these edits.
Here is an example of what the image has the potential to look like if it were to be cropped:
This crop definitely gets us closer to what we're wanting than the previous version. Here is a behind the scenes view of the newly cropped photo and it’s aspect ratio:
As you can see, the root image is still taller than the container, but the centered area is where we want our focus.
We actually recommend that you leave some room on the top and bottom of the image because as your browser scales down, it is going to change the aspect ratio of the container and thus the way the image is cropped.
For example, this is what your image would look like if the user was on a tablet-sized screen:
If you look at desktop and tablet side by side, you will notice that more of the photo is shown on tablet than desktop.
While the width decreases for the tablet banner, the aspect ratio of the image also changes slightly, thus changing which part of the photo is visible. There is no real way to control this, so it is always important to add some margin within your photos for these kinds of changes.
Clearly, despite our best efforts, when cropped so that the main subject of this photo is visible, the other subject, the birds, are still not able to be shown. While this image might be a great choice to feature in another content area on your website, it unfortunately wouldn't be the best choice for a banner image.
For best banner image results, look for a high quality, horizontal image where every part of the photo you want to be featured can be fit within minimal vertical space. An image like this would accomplish the same goal of featuring your target audience and channeling the right emotions, but its size and aspect ration would fit the bill better:
Image Compression
It’s always important to load images that are just big enough for the container that you are using and that have been optimized for the web using image processing tools. If you don’t do this, your website is going to slow down which will end up not only frustrating your users, but also hurting your SEO ranking.
We typically recommend a size of 100kb or less for smaller images and 500kb or less for banner or very large images. The smaller the size of the image the better, so try to find that sweet spot of compressing your image size down but making sure it’s still clear. For example, if you have a container that is only 1000px wide, you wouldn’t need to have a 3000px wide image for that container.
You can use a number of image processing tools to resize your images. If you have Photoshop, we recommend saving the image for web resizing it down to the appropriate size. After this, for even better results, you can run the image through an online processor like Tiny JPG. If you don’t have Photoshop, you can resize your image with this tool, then after you have resized it, run it through Tiny JPG.
Ready to get started?
You should be well equipped to work with images on your website just like the pros. Remember, our team is one e-mail or call away. If you have a question about images, lack bandwidth to load or resize web images, or need a photographer to help you capture the perfect images for your site, we'd love to help!
Let's talk.