Menu Close

The three best types of images for your website

Idris Yusuf

WSI, Frontend Developer
Best images for your website - Windows

Idris Yusuf

WSI, Frontend Developer

In visual storytelling, you’ll generally utilize three different types of pictures: indexical images, iconic images, and symbolic images. There is no one style of image that is ‘best’ suited to web design, each one may be utilized, frequently concurrently on the same project, to obtain the required objectives.

Let’s take a look at the attributes of each type of image, then assess the optimal scenarios of application.

 

1. Indexical Images

Indexical imagery relates meanings between the images’ appearance and their depiction. For example, Images of individuals in 80s outfits elicit feelings of nostalgia.

Indexical images are some of the most regularly encountered images in advertising and design. We tend to shy away from displaying things too literally, frequently because we aim to convey emotion rather than force factual facts down the user’s throat.

Consider these two examples:

  • To inspire happiness, would you choose a picture of someone smiling (literal), or a lovely dog playing on the beach (emotional)?
Image source – Marcela Rogante https://unsplash.com/@marchuri

 

  • For sadness, would you use an image of a person sobbing (literal) or a gloomy, dreary day with rain pouring down and a kid’s bicycle lying unused and soaking in the front yard (emotional)?
Image Source – Jeremy Wong https://unsplash.com/@jwwphotography

These two images are suggestive of emotion, however, the first example in each is more likely to make the user feel something, rather than merely think of the name for the feeling.

Let’s imagine that you want to make people nostalgic when they visit your website. There are a variety of ways to achieve that, but opening with images that convey that sense without shouting ‘NOSTALGIA’ is an excellent place to start. If your target audience is likely to be in their 30s, you may utilize imagery that suggests the 1980s, since it’s the period when your audience was growing up.

You may accomplish the same impact with more abstract visual components like colour palettes. Using a neon colour palette evocative of the late 80s and early ’90s is instantly going to generate a considerably different image than a colour palette of rosy pinks and subdued Aquas that were more prevalent in the 1950s.

 

2. Iconic Images

As outlined in the Visual Storyteller’s Guide to Web Design, iconic pictures are immediately identifiable and firmly connected with a specified topic. They’re also often quite literal visuals, so even someone not acquainted with them may extrapolate a basic meaning. They look like what they imply.

Think about the icons for play and pause in any video player. An arrow-like icon and square box in a video player are fairly easy to interpret, regardless of whether you’d ever seen these images or not, or if their meaning had ever been conveyed to you.

Objects like arrows, wheelchairs, and symbols that are reduced versions of tangible things, also frequently come under iconic imagery. Icon sets (like UXPin’s free icon collection) are typically a fantastic source for iconic pictures since they need to be apparent and simple to read with or without text labels.

Diagrams, charts, and scientific representations are all instances of iconic imagery. They very literally depict information in a manner that is impossible to misread (which is the cornerstone of a memorable picture) (which is the cornerstone of an iconic image).

Symbols you’ll likely see on the web or in an application:

  • house to indicate the homepage
  • checkmark to signal task completion
  • envelopes to represent email
  • trash to suggest deleting something
  • disk to indicate storing something

Regardless of past knowledge of these symbols in a given situation, most users will be able to make an informed estimate about what is triggered by clicking on these icons.

While some icon images may have started out as symbolic (more on symbolic imagery in the following section), many are so well known today that they have become iconic.

As you can see from a handful of the icons accessible in the prototype program UXPin, the folder icon is pretty much universally recognized as a sign to open a file, but the folder itself doesn’t communicate this without its lengthy cultural association.

The same applies to the commonly-seen ‘gear’ icon to access settings, along with the icons for uploading (which generally includes an arrow pointing up) and downloading (includes an arrow pointing down), and many more.

 

3. Symbolic Images

These are more abstract than iconic images and often do more to express an emotion or broad notion than a particular concrete object. This imagery is very commonly found in logos since they reinforce the ideas a brand wants to portray.

For example, the Microsoft Windows logo is an abstract depiction of a window but isn’t a literal interpretation. Someone might perceive it to signify something else, especially if they come from a society where a different form of window is more typical.

Symbolic images often need to have their meanings taught. They are not quickly identifiable, since they are not actual. Until the meaning is understood, they might be broadly open to interpretation.

Which images work best?

All three images have their place in excellent design. As with any design methodology, it all relies on the characteristics of your project.

When you’re creating the basic navigational structure of your site, you’re likely going to want to stick with images that are iconic, or that ride the line between iconic and symbolic. You don’t want your visitors staring at a certain picture and wondering what will happen if they click on it.

For that reason, images like icons used for navigation must be globally identifiable and as near to iconic as you can achieve. There are loads of alternatives out there for icons, whether you want to develop your own or utilize a pre-made collection. Just be sure to choose a set that is simple to comprehend for your visitors, and don’t be afraid to label if it’s not immediately evident.

 

The Best Digital Marketing Insight and Advice

The WSI Digital Marketing Blog is your ideal place to get tips, tricks, and best practices for digital marketing.

Don't stop the learning now!

Here are some other blog posts you may be interested in.

Responsive website design
Why Responsive Website Design is Critical for Digital Marketing Success
As businesses increasingly rely on their online presence to reach customers, having a well designed responsive...
Read Article
Maximizing Website Accessibility
Maximizing Website Accessibility: A Guide for Web Developers
Maximizing Website Accessibility should be a top priority for web developers. As a web developer, your...
Read Article
Create a Landing Page that Converts
How to Create a Landing Page that Converts: A Web Developer's Guide
As a web developer, you understand the importance of creating landing pages that convert visitors into...
Read Article

Oti is a vastly experienced digital media and marketing professional with over 10 years of industry experience. He has worked across Agency, Brand, Publisher and Marketing Technology sides of the industry in various capacities.


Driven by a strong commitment to continuous innovation, Oti has managed so many successful digital projects across Africa and Europe for brands like Coca-Cola, Nestle, Guinness, Kellogg’s, EA Games, Sony Entertainment, etc., and advises senior management of global brands on data-driven marketing and digital transformation.

Consumer insights in marketing: Oti

Oti currently heads Product at Terragon Group, Africa’s leading data aggregation, enrichment, and activation company, where he is responsible for developing innovative data-driven marketing solutions for SMBs and Enterprises across Africa.


Oti is the current President of Association of Digital Marketing Professionals (ADMARP), the foremost professional body for digital marketing practitioners in Nigeria. He is also a communications consultant to the African Union in areas of youth engagement and digital interactions. A known public speaker, teacher and trainer, Oti has facilitated several conferences and digital events, and was recognized by Marketing Edge Magazine as an Outstanding Digital Marketing Personality of the year 2021.