How to Choose Images for Your Website: A Service Professional’s Guide

This is a long post telling you how to choose images for your website. But the rules are simple.

• All of the images you use should help the reader make their buying decision.
• Use photos of you and your staff. NOT stock images.
• If you can, show photos of the end product. Screenshots of a website you designed. Photos of a room you redecorated.
• If it’s an intangible product, such as coaching, show photos of you and clients working together happily.
• Only use images, if the reader can instantly understand what the image is, and why it’s relevant at that point in your message.
• You do not need a lot of images on a service business website. So there’s no need to include filler, fluff or eye-candy images.

Always think of your ideal client when you choose images for your website. What images would convince her that you’re competent, trustworthy and good to work with?

Introduce Yourself

And say what you do, using a Media & Text block. You could even add a button, if you wanted to.

Button

These rules will help you get started…

1. Focus on your reader: ask yourself, what matters the most to your ideal client. Above all, think about the information is your reader hoping to find. This will tell you what page elements you need and what information needs highlighting. Focussing on the reader will help you choose images for your website.
2. Quality first: do not try find an image for every page section. Concentrate on taking or making very good quality, well thought out images for the page sections that really need photos or images.
3. Second-rate icons and second-rate images make you look like a second-rate and unprofessional business. Likewise second-rate images make you personally look like an amateur. If an image looks unprofessional, and does not serve a useful purpose, leave it out.
4. Make sure that every image you do include is useful to the reader, well thought out and good quality.
5. Make sure all images are easy to decipher. The reader should instantly understand what the image is, and they should benefit from seeing it. Every image should help them make their buying decision.
6. List all freebies, downloads, sign up boxes and calls to action. And where necessary, make “what will my goodies look like” images. These graphics help the reader understand what they get if they click the sign up button or click the download link.
7. Place images where they belong, make the images obviously match the surrounding text. For instance, put a photo of your staff near your meet the team headline.

Image Sizes

If you’re not sure of the image sizes for your WordPress theme you could use some standard sizes. For instance, 1920×1080 pixels for hero headers and 1024×1024 pixels for square images.

WordPress lets you choose a smaller version of the image as you incert it.

Now decide what images you’re going to use. But please note, when you choose images for your website…

Before You Choose Images for Your Website Always Ask Yourself, What Image Would Make the Most Sense Here?

Here are some suggestions for images on your homepage…

• Hero header: if you’re a freelancer, use a head and shoulders shot of yourself.
• Services: think of images that show the end product, or show you delivering your service.
• Contact Us: show your salesperson on the phone.
• Portfolio, case studies or clients you’ve helped: A web designer could show screenshots of sites they’ve designed. A fitness coach could show photos of themselves working with clients. A builder could show a house they’ve remodeled.
• Pricing: You could show a screenshot of your pricing table. A drawing of a credit card, check or cash. Or a weighing scale with quality on one side and price on the other. But remember, you don’t need images for every section of your page. Only include images if you think your reader needs to see them.
• FAQs: You could use an image of a question mark, or a photo of someone looking confused.

The important point to remember, when you choose images for your website, is to make sure the images you use…

• are unique to you and easy for the reader to decipher.
• do not make the reader spend time or energy working out what your images mean.
• and make sure the image is easily understandable to someone who can not read your language.

A Web Designer Could Display Screenshots of Sites She’s Designed

Drawing Your Own Icons and Background Images

You might want to draw your own graphics and use them to draw attention to PDF downloads you give away or add background images to call to action and email signup boxes.

First find the sizes and aspect ratios used by your theme or page builder. Atomic Blocks, for instance, or Beaver Builder. Or use a generic size such as 1920×1080 pixels for call to action boxes. Depending on how large you want to display square images you could make them 1024×1024 pixels. For small icons you’d make much smaller images.

Then, if you’re good with a graphics package such as Serif Affinity Designer or Adobe, draw images to represent and draw attention to your freebies.

For instance, if you give away a free eBook, draw a book cover to dislay at the side of that download link.

CTA background images. By adding an attractive background image to a call to action box, or an email signup box, you’ll draw attention to that page section.

But make background images subtle. Make sure the reader notices the text. Not it’s background image.

Hero Header and Getting to Know You Images

You might want to place a photo at the top of the home page, of a service business website.

If you’re a freelancer, use a photo of yourself. I’d recommend that you look straight at the camera. Some people like to look at, or point to the text that will display at the side of their photo. This draws attention to the text. But, pointing at the text can look manipulative.

If you run a larger business you could put a group photo of your team members or key employees at the top of the home page.

People like to know who the’re dealing with. Your homepage hero image can show them.

Be Consistent With…

• photos
• icons and drawn graphics
• colors, shades and overlay colors
• and when applying blurring to background images

When you choose images for your website…

Drawings You Could Make

Some times a drawing is better than a photo. For instance, if you want to draw attention your freebies, downloads, newsletter sign up boxes and call to action backgrounds.

If you do want to draw attention to a section of your page, and you add a photo or drawn graphic. Make sure the image is easy to decipher. It should be obvious to the reader what the image is and why you put that image there.

These are some of the graphics you might choose to make…

• e book covers
• whitepaper or pamphlet covers
• very simple explainer images
• checklist graphics
• background images, for call to action boxes

You can use these drawn graphics to highlight and draw attention to the most important parts of your message. You might also want to place a background image behind a Call to Action box for the same reason.

If an image is a representation of something downloadable, such as an eBook cover or a downloadable checklist. Make sure the image is instantly recognizable as an eBook or checklist.

If You Give Away Friebies, Make a Graphic to Promote Them

Peripheral Vision, What Is It and Why Does It Matter?

Readers scan your web page very quickly. Within a second or two they’ve decided to stay and read more, or to click the back button.

You might think they’d look at your images first, then look at the text. They don’t. They read your main page headline and then quickly scan the rest of the page.

Eye Tracking Software and User Testing

There is a whole industry based around discovering what readers actually look at when reading your web pages. And the results can be heartbreaking.

If you’re lucky, the average reader will read twenty percent or less of your page.

As far as images are concerned, the important point is that…

For instance, if the reader reads a headline. And at the side of that headline is a photo or graphic. They see the image out of the corner of their eye, but the won’t look at it yet.

They make a subconscious decision about how complex the image is. If they suspect that the image will be hard to decipher. Or they think the image is a filler image, fluff or eye-candy, they’ll avoid it.

Avoiding Images Wastes the Readers Time and Uses up Their Energy

Readers allocate a fixed amount of time and energy to reading your web page. Avoiding and skirting around irrelevant and filler images takes some of that time and energy.

So every image that doesn’t help your reader, hurts you. Because the reader had to scan, reject then skirt round the image. That has taken some of their precious time. They had allocated a fixed amount of time to reading your message. And some of it has now been wasted.

Boil It down to the Basics

With images you need to get your message across with one glance, out of the corner of the reader’s eye.

So, don’t make the reader think hard, or spend time deciphering your image. Make your images as obvious and easy to understand as you can.

For instance, if you use a photo above your contact us section. Show a photo of your salesman on the phone. Not a picture of E.T. or the moon landing.

If you have a meet the team section show a photo of your staff, not the local football team.

Filler, Fluff and Hard to Decipher Images

If your photos or images are in any way confusing or hard to decipher, go back to the drawing board. If you can’t find an image that helps the reader understand your message more easily. Then don’t include an image at that point.

These Are Some Suggestions of Photos That You Might like to Use

• you
• your staff
• your premises or sign written van
• you in action delivering your service
• photos of people who give you testimonials
• the businesses and people that you write about in your case studies
• the end product you deliver, what will the customer get?
• windows you have fitted
• roofs you’ve repaired
• screenshots of websites you’ve designed
• screenshots of improved Google rankings you’ve achieved for clients
• you with happy customers, big hitters or business leaders
• you at conferences or in group photos at networking events etc
• behind the scenes photos, you doing your job
• you having meetings
• photos or sketches showing details of work you’ve carried out

Use close ups, long shots or group photos etc.

And remember. If a photo does not add something useful to the page, leave it out.

Make the Reader Feel Part of the Action

When you choose images for your website try include photos that enable the reader to imagine what it’s like to be part of the action. Help them understand your workflow and your processes etc.

Show photos that explain what it’s like to be a part of one of your discovery meetings and what is it like, for the client, when they work with you. Show them what results they’ll get.

I used the gallery above to give you some idea of how you can use images if you have an intangible product, such as coaching. Show pictures of you and your team working happily with clients.

Make sure you look professional but approachable. And give the reader an idea of what it’s like to work with you.

These images came from Unsplash. But you should use your own photos of your staff and happy clients. And always get permission before using any photos of anyone. Or you might get. Sued.

Promote and Reinforce Your Trustworthiness

Do you have any photos of yourself with business leaders or industry experts. These can make customers think of you as more trustworthy.

Have you worked with some one who isn’t famous, but is known, liked and trusted by your prospective client? A photo or testimonial from this person could really help you promote and reinforce your trustworthiness, in the eyes of prospective clients.

Showcase Your Business and Your Service, Not Your Web Design Skills

Concentrate on drawing attention to…

• your service
• the end product you deliver
• the benefits your clients gain from hiring you
• and your most important calls to action.

A website that effectively sells your services does not need to be fancy. The important point is to focus the reader’s attention on your message, your content. Fascinate them with your offer and the benefits they’ll get from employing you. Then build their desire to sign up for your newsletter or click your buy now button.

When You Choose Images for Your website, as a Service Business Owner

Concentrate on showcasing your business and your service.

Take your own photos of you, your clients and the end product you deliver. Use these photos in your case studies and portfolio. These are 100 times more valuable to your readers than Font Awesome icons or stock images.

Clients want to know…

• what they’ll get out of this
• what will it cost
• can they trust you
• how does it work
• what do they have to do to get it

If you deliver an intangible service such as coaching, show photos of you working with, or coaching clients etc.

ALWAYS GET PERMISSION TO USE PHOTOS FIRST!

Did a client or your boss ever say…

“Can You Jazz It up a Bit Please?”

There are ways to add a bit of extra pizzazz to your page without making it look like a dog’s dinner. Moderation is the key.

Background images are one way to do this.

The WordPress 5 post editor (Gutenberg) lets you add a photo background to headlines. You might also be using the Atomic Blocks plugin. This gives you even more options for adding background images.

You can get even more control over the design and layout of your page using a page builder. Beaver Builder and Elementor are page builders.

Using Background Images in Your Web Page Design

If you use a full color photo as the background image for a headline or call to action. It can make reading the text difficult. Brightly colored images can also distract the reader from the text you want them to read.

Care and discretion is needed when you choose images for your website.

This Call to Action Box Has an Image Background

Adding a brightly colored background image can attract the readers eye. But don’t over do it. You want the reader to read your text, not get side tracked by the background image.

Button

Monochrome images

One way to use background images without distracting the reader too much is to make the background image monochrome (black and white). Then add a single color overlay to the image. Instead of a full color photo, you get a photo with a blue tint, for instance.

This makes the text, on top of the background image easier to read. But also jazzes up the page a bit.

You can do the same thing with patterned background images.

The trick is to keep it simple.

If you use photos to do this, use photos that…

• show your clients something they need to know
• are unique to you and showcase your business or service.

In fact, you should always use images that are relevant to your clients and unique to you and your business or service.

This is less of an issue if you use simple patterned background images.

For the overlay color, try using a shade or tint of the most bold color in your WordPress theme or design.

Don’t over Do It, Good Design Is Clean and Simple

Clean and simple almost always looks professional. There’s a good reason why minimalist design is so popular among service businesses.

The biggest and most successful websites focus on…

• good content
• that’s formatted for easy scanning
• organised into logical categories
• with well thought out navigation
• prioritizing simplicity and ease of use

Readers Want Relevant Content That Is Easy to Find, Easy to Read and Easy to Navigate

It’s important that your site looks professional. But then, making it more beautiful is unlikely to improve your conversion rate. In fact jazzing up your site too much will harm your conversion rate.

What About Drawn Graphics, Icons and Vector Images?

The two main types of still images used on websites are photos and vector graphics. Icons and line drawings are vectors.

Vector drawings can look great. Especially if they’re drawn well and are unique to your business and your website.

But simple icons don’t convey as much information as a photo.

For instance, if you’re looking for an image to go with your about us section. You could use a simple drawing showing the outline of three people. But wouldn’t a photo of your staff convey more information to the reader?

I’ve seen websites that look great, and only use drawn graphics. But they’re the exception to the rule. Unless you know what you’re dong, use your own photos and just a sprinkling of icons and drawn graphics.

Can You Justify a Professional Photo Shoot?

You build trust by using photos that are unique to you and your business. Photos of you and your team build trust especially well.

You can quickly destroy trust in your business by using stock photos. Especially if they’re high five, or cheesy smiley business people, photos.

If you have an established business that’s making good money. A professional photo shoot can be an excellent investment. Pick a photographer who’s done a good job for other businesses like yours.

This is a big investment, do your due diligence before hiring a photographer.

If you’re a freelancer or a start up, ask around your friends. You might know someone is a good amateur photographer. The photos don’t have to be perfect, but make sure they’re crisp and clear.

When You Choose Images for Your Website, You Want to Look…

• professional
• pleasant and easy to work with
• competent
• approachable
• be photographed with people who are like the reader
• convince the reader you understand their problem and can relate to their situation

These Are Some of the Pages You’ll Need to Gather Photos For

• home
• services
• portfolio
• case studies
• pricing
• FAQs Frequently Asked Questions
• about us
• free stuff

Avoid Using Complex Images, When You Choose Images for Your Website

Keep your images as simple as you can, while still getting your message across.

Sometimes you might need to use a complex image to explain how something works. Or how the parts fit together etc. Info graphics are a typical example of this.

But I wouldn’t put complex info graphics etc. on the front page of your website. Unless you just can’t avoid it. Large and complex images can confuse and overwhelm the reader.

If you do need a complex info graphic, to explain something. Put it on an inner page.

If you need to, you could make a much simpler version of the image with a short description, to show on the front page. Then link to the larger and more complex image, with a full description, on an inner page.

Will the reader benefit from seeing that image?

There is a fad for using large, complex vector graphics that deliver no real value to the reader. Website owners might think these images make them look sophisticated. But the reader wastes time trying to decipher and understand the image. Only to realize the image is of no use. This makes the reader confused and annoyed.

So, don’t use large, meaningless graphics.

If the Reader Can Not Instantly Decipher and Understand an Image It Will…

• slow the reader down
• annoy them
• make them question your professionalism
• reduce their desire to hire you
• and possibly make them click the back button

Can You Use Your Client’s Logos?

On the website homepage of service businesses, you’ll often see a row of client logos. This is especially useful if prospective clients recognize those logos.

These rows of logos can tell the reader…

• we’ve worked with people like you
• and solved problems like yours

Always get permission before displaying client logos. Some businesses, especially the big ones, can be reluctant to let you do this. Be ware!

Have You Worked with a Big Hitter?

Would your biggest client give you a recommendation or endorsement that you could put on your home page? This could really boost your credibility, especially if you can get a photo of the two of you together.