Using Headshots in Your Website Design

In this guide, we’ll be discussing tips on using headshots in your website design.

We’ll be covering the following topics (click on a bullet point to jump to that section):

Let’s dive in!

headshots in website design

Tips on Using Headshots in Your Website Design

In this article, you will learn how to use website headshots that are appropriate for your website.

Using a great headshot in your website design is important because it adds personality to the website.

This will make your website more personable, and it will show that you are someone that is approachable instead of just another website to ignore.

1. Continuity

Continuity is important when using website headshots in your website design.

This means that you want to make sure that the website looks like it is coming from one person.

It is common for website owners to switch out their headshot when they change their website, but this can be very confusing for visitors.

You want people to be able to identify that the content is coming from the same website, so it is important that you keep your website design consistent (true for personally branded websites and not necessarily company websites).

continuity headshot website design

It’s also a plus if you use the same headshot on your website and social media profiles to make everything a cohesive brand.

2. Size Matters

Small website headshots are good for some areas of your website while larger ones are better for other places.

The best size will depend on what is around the photo

For example, website headshots as a background for website text.

In this case, it may be best to use a smaller website photo.

This is because website visitors will want to read the text on the website and not be distracted by a large picture in the background.

Headshots can also look great between paragraphs of website text.

In this case, you may choose to use website headshots that are larger so more of the facial details can be seen by website visitors.

Of course, if you are a headshot photographer and you have a portfolio of your best headshots, then you will want them to be the biggest size and best resolution to show the detail of your work.

3. Headshots are Best Used Dispersed Around Your Website

You do not want to put one website headshot on your website and forget about it.

Visitors will quickly get bored and lose interest if website headshots are not used in different areas of the website.

You want website visitors to see website headshots throughout your website when they browse through various pages.

This will make it seem like website visitors are actually interacting with a real person instead of just a faceless website.

For example, have a personal blog about food?

Then your author bio should have your headshot, your about page should have your headshot, and any conversion page you have (recipe books, eBooks, podcast etc.) should have your headshot.

headshots web page

4. About You, Your Passion, and What You Do

It is important to include website headshots that show website visitors who you are.

This will help website visitors see that the website designer not only knows how to create great website designs but also knows what they are talking about when it comes to website design in general.

For example, if you run a personal food blog, then your headshot should represent the theme of your website:

headshots web page food blog

5. Remember the Keywords When Choosing Website Headshots

Choosing website headshots that have keywords in them is a great way to get website visitors interested and new users to your website via SEO efforts.

This will help website visitors see that the website design matches the website content and that it is something that they can relate to.

For example, website headshots of people looking at or interacting with their computers are perfect for website design that focuses on website marketing.

Once you’ve selected photos that align with the theme of the website, the key part is to title the picture and title the alt-text with a keyword that aligns with the theme.

Here’s an example from the image below, I titled it “headshot website design” and gave the alt text the same name so it could show up better in the search engines when people search for website headshot design:

headshots web page alt text

6. Clothing

When taking a headshot for your website, you want website visitors to see you in a situation that shows who you are and what you do.

What Should I Wear for Website Photos?

Avoid wearing outfits that don’t align with your overall brand.

7. Remember the Crop

If using a headshot in your website, you may need to crop your image.

Because of this, you want to make sure you take headshots in different size dimensions if possible.

For example, you will want a headshot with a lot of spacing from the edges just in case you have to crop it down:

What is a Good Size for a Headshot on a Website?

Good sized for headshots on a website include :

  • 800px by 400px
  • 1024px by 512px

And remember website visitors will see website headshots in thumbnail size. In this case, it is a good idea to have website photos that are around 200px by 150px.

headshot cropping for web page

8. Protecting Your Photos Online

When taking website headshots, you will want to make sure that website visitors cannot download the photo unless you want them to.

Make sure to include a copyright statement somewhere on your website so your headshot photo doesn’t end up becoming a stock photo that random people use on their websites too.

If you want to see all the places your images are being used, you could do a reverse image search.

9. Give Website Headshots Some Time to Breathe!

When choosing website headshots, you want to remember that these are photos and website visitors will want to take them in.

This means that website headshots should not be used in places where website visitors are expected to quickly scroll past the website photo.

Headshots work best when website visitors can see who is talking to them on the website and remember it later, so you need give these photos some time to “breathe”.

For example, many people include a brief author bio box in the sidebar of their blog so you can see it throughout the whole time you are reading an article.

headshot on blog web

10. Make Website Headshots a Big Deal!

It is also a good idea to make website headshots a big deal on your website.

You want website headshots to be the first thing website visitors notice, so you have a few options here (taking into account all the other tips so far).

This adds an extra element of website authenticity because website visitors can see that the website is run by real people.

11. Use Website Headshots to Your Advantage!

Lastly, website headshots are a great way to get website visitors to see you and your website in a different light. 

It is easy for website visitors to look at website design and think that it is the same exact thing as website content, but by putting different website headshots throughout website design, website visitors will see that website content and website design go hand in hand.

Website headshots are a great way to show website visitors that you have website expertise and can be trusted by showing them that you know website design inside and out (and also competency).

You want website visitors to understand your concepts and what your brand stands for, website headshots are a great way to do this.

Final Remarks

We hope you learned something new from this guide on using headshots in your website design.

The guide is a part of our Headshot Photography Resources Hub, so be sure to check that out to learn more headshot photography tips and insights.

close

Copy and paste this code to display the image on your site