How to Use Photos In Your Website

Table of Contents

    [Updated September 1, 2021)]

    Over the years, web design and social media have increasingly become visual mediums. In the beginning, as web developers and web designers, we were limited to text that we would try to manipulate to resemble an image. When we found we could include pictures, we rejoiced. Then we went a little haywire with all kinds of flash animation, and now we see parallax design (that image you see as you scroll through a page). Then the hard part of finding stock photos and searching for pictures that best represent our companies. (More on not using stock photos here)

    Now, it has become even more critical that we build websites with the right kind of visuals. You need photos that make sense and have a purpose.

    The problem becomes deciding how and what photos to use.

    1. How do I choose the best photos?
    2. Where do I find nice pictures?
    3. My budget did not include professional photography.
    4. Our business isn’t that exciting for photos.
    5. I don’t my face on the website.

    What Type of Images Should You Use?

    We’ve got eight categories of images that can help your users engage with your content, help them understand your concept, and appeal emotionally to your message.

    Jakob Nielsen, a well-regarded usability researcher, conducted eye-tracking studies which “documented a dramatic gap in how users approach website images.”

    1. Use images that direct attention.

    Pictures that can lead the attention of your users are helpful and guide the user’s eye. Having a photo with a face turned toward a call to action or button leverages your user’s subconscious and makes it so they look toward your key products or call-to-action.

    images facing a form

    2. Use clear, sharp images.

    With today’s HD monitors and high-resolution mobile devices, images that show your company in the best light is important. Having product photos that are clear and sharp give the impression that you offer high quality and give a damn about your product. I get that sometimes it’s not always possible due to budget and accessibility, but I recommend adding a photography session to your marketing budget. You’ll be happy you did.

    But, then again, you need to be careful of how the photo affects the performance of your website. Compressing it as much as you can and showing a lower resolution version of your photo on mobile helps your users, not to mention Google likes it too. (Hint, hint – SEO)

    images for websites

    3.  Have a clear purpose. 

    Each photo should have a clear purpose. Some of the photos that you might include might be purely decorative. Stay clear of photos that do not show exactly what it is you do.

    If you own a spa, I don’t recommend showing the front of your building. It’s boring. It’s not specific. It does not express the warmth and calmness of your services. Why not photos of the spa indoors. I recommend giving your audience a better indication of what to expect when they arrive. If all you have to show of your spa is the front of your building, then you have bigger problems.

    If all you have to show of your spa is the front of your building, then you have bigger problems. Click To Tweet
    image that evokes boring

    4. Images that show not tell. 

    Screenshots are an example of showing versus telling. Sometimes it is best to show a complex idea by presenting it using a screenshot. It adds authenticity to your post as well as help explain. 

    Need to create screenshots quickly? These are some of my favorite screenshots and annotation tools

    screenshot examples

    5. Images convey emotion. 

    Research shows that people are innately attracted toward faces, and will react to faces on a Web page, faster than anything else on the page. And photos of faces looking directly at the camera will have the greatest emotional impact on visitors.

    emotion photos

    6. Charts and graphs.

    Visuals can help explain a complex statistical report or data. Users pay attention to information-carrying images that show content that’s relevant to the subject. Then we also remember images better than words.

    example of graph images

    7. Company Photos. 

    Your company photos are best when trying to convey culture. It can help you connect with your audience on a deeper level. According to the Nielsen/Norman study, it’s best practice “that users associate real people with an otherwise faceless corporation.” 

    Using real people that actually work at the company encourages trust and authority.  Click To Tweet

    Your About Us page is usually the first place people thing to add staff photos. In the same study it revealed that users tended to spend more time looking at these photos while ignoring the standard corporate, stock photos of random people.

    examples of community images

    8. Performance photos. 

    If you are going to discuss plumbing or oil and gas production, try to use images that portray it in the best light. For example, if you are going to talk about how you perform a specific type of drilling, do not pick any random drilling photo, try to use one that best represents your company’s process. If you can, a photo that shows a successful installation and not one that shows an unorganized, messy work site.

    The example below (left) shows the production as messy and disorganized. While the second shows an organized, partially complete project. Which 

    good vs. bad images


    Invest in good photography or photoshoots. A great photographer can add a fortune to your website’s business value.


    Nielsen/Norman Group Research
    Oil/Gas Photographer
    iStock Photography

    8 types of images for your website

    Blog Categories

    Posted in

    Christina Hawkins

    Since 1999, Christina has been designing and building exceptional websites partnering with small businesses to help them grow and increase revenue. With many years of experience in creating thousands of websites, she understands the need for continuing education in her field and, therefore, is constantly learning and teaching others about internet marketing and digital processes. In addition to her ability as a digital marketer, Christina serves as a coach and mentor with Agency Mavericks to other digital marketing freelancers, helping them grow their businesses. She is a sponsor and co-leader of Houston's WordPress Meetup. Recently, she spearheaded the next Houston WordCamp 2020 as its coordinator after a 10 year hiatus. She is currently President of the Houston Interactive Marketing Association.

    Leave a Comment