Photos as Web Content in 2024

Read Time:5 Minute, 18 Second

Photos as Web Content in 2024

In a world inundated with visual stimuli, users have developed a keen eye for images that offer pertinent information. They appreciate visuals that add value to their online experience. However, the era of fluff-filled pictures merely meant to embellish web pages is waning. To truly capture the attention of your audience, focus on visuals that not only captivate but also convey meaningful content. In doing so, you’ll ensure that your images don’t just adorn the page but actively engage and resonate with your users, leaving a lasting impression.

Some types of pictures are completely ignored. This is typically the case for big feel-good images that are purely decorative.
Other types of pictures are treated as important content and scrutinized. Photos of products and real people (as opposed to stock photos of models) often fall into this category.

Numerous columns have been dedicated to critiquing the first category of images, those self-indulgent visuals that prioritize showcasing over substance. Regrettably, many websites remain fixated on flaunting aesthetics rather than delivering concise messaging. The persistence of visual bloat continues to irk users. Despite the prevalence of high-speed internet connections and sub-second download times, users still gravitate towards websites that prioritize presenting the information they seek without unnecessary embellishments. It’s time to shift the focus from mere showmanship to providing a seamless and information-centric online experience.

In ecommerce, product photos help users understand products and differentiate between similar items.
On personal websites, users want to see the person behind the site;

To illustrate further, let’s look at a few examples from an eye tracking study we ran earlier this year.

People Photos = Good (If They’re Real People)

It’s long been a guideline for presenting a company’s image online to include portraits of the executive team so that users associate real people with an otherwise faceless corporation. FreshBooks.com takes this guideline one step further and presents photos of its entire team:

Photo as web content — This is actually one looong page that I cut into 3 segments to fit this space. The original page was 9,335 pixels tall and our test user scrolled almost to the bottom. As this example shows, people sometimes do scroll down long pages, but they typically allocate less and less attention further down the page.

Here, the user spent 10% more time viewing the portrait photos than reading the biographies, even though the bios consumed 316% more space. It’s obvious from the gaze plot that the user was in a hurry and just wanted to get a quick overview of the FreshBooks team, and looking at photos is indeed faster than reading full paragraphs.

The key point is that these are real people who actually work at the company.

In contrast, users ignore stock photos of generic people:

Gaze plot of user viewing Web page about a university's application process — My guess is that this photo from the Yale School of Management actually shows real students; stock photos would rarely be this poorly cropped or show models slouching (as with the guy in the blue shirt).

Still, on this particular page, the photo is pure filler. Users are here to understand the school’s application process, not to judge the degree of student slouch.

Most likely, the dean or other manager asked designers to “jazz up” the page so the university would look more exciting and thus attract more applications.

The way to excite customers is to offer an engaging experience, which means focusing on meeting their needs. This lesson holds equally for non-profit organizations and universities, even if they don’t refer to their target audience as “customers.”

Product Details = Good

Compare these two examples of ecommerce category pages (gallery listings of products by category) from Pottery Barn and Amazon.com:

The difference between these two screenshots is obvious: the TV photos are of no help in deciding between the products. A guy in a canoe vs. a football player? What, because I watch more football than watersports, I’ll buy the TV showing a football player?

This is a good example of why it’s not always good to copy the biggest sites’ designs. Because Amazon hawks a monstrously wide product range, they use a standardized gallery layout that sort of works for many different category pages, without being optimized for any individual category. In contrast, Pottery Barn is optimized for its narrower range of products, so its category pages have more detailed photos.

Big Photos = Good (When Requested)

In our testing of product pages with detailed information about individual products, users paid even more attention to the product photos. People often liked alternate views and clicked the links to download enlarged photos.

Way back in 2005, “Inadequate photo enlargement” was #10 on my list of top-10 web design mistakes (Look it up here Pixel Art). That is, when users click the link to a bigger photo, they’re rewarded with one that’s maybe 20% larger. It should be at least twice as big, preferably more. Sadly, this mistake is still rampant 5 years after I featured it on the top-10 list.

Yes, users dislike huge photos that get in the way of their tasks. (The Yale example above shows what not to do.) But when users request an enlargement, it’s a different story:

Information-Carrying Images = Good

The commonality across all of these examples (and thousands more in our other studies) is that users pay attention to information-carrying images that show content that’s relevant to the task at hand. And users ignore purely decorative images that don’t add real content to the page. So much fluff — of which there’s too much already on the web.

Invest in good photo shoots: a great photographer can add a fortune to your website’s business value.