By Creative Bloq Staff
Visual storytelling depends on getting the right images.
In visual storytelling, you'll usually apply three different types of images: iconic images, symbolic images, and indexical images. There is no one type of image that is 'best' suited to web design, each one can be used, often simultaneously on the same project, to achieve the desired results.
Let's take a look at the characteristics of each type of image, then examine the best scenarios of use.
01. Iconic images
As described in the Visual Storyteller's Guide to Web Design (opens in new tab), iconic images are instantly recognizable and strongly associated with a defined concept. They're also generally very literal images, so even someone not familiar with them can deduce a general meaning. They look like what they mean.
Think about the symbols for male and female restrooms. A human figure in either pants or a dress is fairly easy to interpret, regardless of whether you'd ever seen these images or not, or whether their meaning had ever been explained to you.
Things like arrows, wheelchairs, and icons that are simplified forms of physical things, also often fall under iconic imagery. Icon sets (like UXPin's free icon pack (opens in new tab)) are often an excellent source for iconic images, as they need to be obvious and easy to interpret with or without text labels.
Diagrams, charts, and scientific illustrations are all examples of iconic imagery. They very literally represent information in a way that is hard to misinterpret (which is the cornerstone of an iconic image).
Think about the icons you'll likely encounter on the web or in an application:
- envelopes to indicate email
- a trash can to indicate deleting something
- a house to indicate the home page
- a disk to indicate saving something
- a check mark to indicate task completion
Regardless of prior familiarity with these icons in a specific setting, most users will be able to make an educated guess about what gets triggered by clicking on these icons.
While some icon imagery may have started out as symbolic (more about symbolic imagery in the next section), many are so widely recognized now that they have become iconic.
As you can see from a few of the icons available in the prototyping app UXPin (opens in new tab), the folder icon is pretty much universally recognized as a symbol to open a file, but the folder itself doesn't indicate this without its longstanding cultural association.
The same applies to the commonly-seen 'gear' icon to access settings, along with the icons for uploading (which usually includes an arrow pointing up) and downloading (includes an arrow pointing down), and many others.
This is a common result of an image becoming a part of mainstream culture: its meaning can become so fixed that it is universally recognized, even if originally that meaning had to be learned. As described in Web UI Design Best Practices (opens in new tab), you don't need to always break new creative ground: use widely accepted icons to create a baseline understanding, then add creative flourishes as needed.
One thing to keep in mind: not all icons are iconic. Some still need to be explained before they are correctly interpreted (known as an explicit signifier.
Designers sometimes opt to use icons that are customized to their own site's design or theme, but those kinds of icons may need to be labeled for clarity, as they're purely symbolic. At the very least, a label should appear when they're hovered over. In cases where you want users to instantly recognize the meaning of an icon, stick with images that are actually iconic.
02. Symbolic images
Symbolic images are more abstract than iconic images, and often do more to convey a feeling or general idea than a specific concrete object. Symbolic images are very often seen in logos, as they reinforce the feelings a brand wants to convey.
For example, the Microsoft Windows logo is an abstract representation of a window, but isn't a direct interpretation. Someone could interpret it to represent something else, particularly if they come from a culture where a different style of window is more common.
Symbolic images generally need to have their meanings taught. They are not instantly recognizable, because they are not literal. Until the meaning is learned, they can be widely open to interpretation.
Instead, symbolic images use semiotics (opens in new tab) – visual grammar – to convey meaning more than iconic images do. Symbolic images are visual metaphors, and those metaphors often must be learned in order to be interpreted correctly.
Granted, many symbols are recognized on a cultural level, due to their common usage associated with specific things or ideas.
One example would be traffic signs, like stop signs (which are eight sided in most countries, but in Japan, are only three-sided and more closely resemble the US 'yield' sign, and in numerous other countries the sign is a circle with a triangle in it). And if you asked someone from one country what the traffic signs of another country meant, they would likely get a considerable percentage of them incorrect.
This is because these images are symbolic, rather than iconic. Their meanings need to be taught, and are often based on cultural associations rather than universal understandings.
One example in the web design world is the hamburger menu icon. While it does somewhat resemble a menu, the image is too abstract to accurately be called iconic. As a result, one study (opens in new tab) actually found that its interpretation is age-sensitive. In fact, 80 per cent of users between 18-44 understood its meaning, while only 52 per cent of older users understood.
03. Indexical images
Indexical images link meanings between the image's appearance and its representation. For example, a thermometer showing it's below zero indicates that something is cold.
Indexical images are some of the most commonly found images in advertising and design. We tend to shy away from representing things too literally, often because we prefer to evoke an emotion rather than shove literal information down the user's throat.
Consider these two examples:
- For sadness, would you use an image of a person crying (literal), or a dark, cloudy day with rain pouring down and a kid's bicycle sitting unused and soaked in the front yard (emotional)?
- To evoke happiness, would you use an image of someone smiling (literal), or a cute puppy playing in the sand (emotional)?
Both types of images are indicative of an emotion, but the latter example in each is more likely to make the user feel something, rather than just think of the word for the emotion.
Let's say that you want to make people nostalgic when they visit your website. There are a number of ways to do that, but starting with images that evoke that feeling without screaming 'NOSTALGIA' are a good place to start. If your target audience is likely to be in their 30s, you might use imagery that evokes the 1980s, as that's the time when your audience was growing up.
You can achieve the same effect with more abstract visual elements like color palettes. Using a neon color palette reminiscent of the late 80s and early '90s is immediately going to create a much different impression than a color palette of rosy pinks and muted aquas that were more common in the 1950s.
Which works best?
All three images have their place in good design. As with all design techniques, it all depends on the parameters of your project. But that doesn't mean there aren't some good ground rules.
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 looking at a particular image and wondering what will happen if they click on it.
For that reason, graphics like icons used for navigation must be universally recognizable and as close to iconic as you can manage. There are tons of options out there for icons, whether you want to design your own or use a pre-made set. Just be sure to find a set that is easy to interpret for your visitors, and don't be afraid to label if it's not immediately clear.
To a large extent, finding the iconic images you want to use on your site is a no-brainer. There are only so many things that literally represent what you want to convey. The hardest part is finding images that are the correct style to fit with your overall design.
For other visual elements of your site, though, and particularly the visuals accompanying content, you can exercise more creative freedom. You can use more abstract images, which are made clear through the context created by other images and other types of content on your site.
Your decision to use a more symbolic image or a more abstract indexical image depends on both your site's overall style and content, as well as your target audience.
One way to find indexical images when you're unsure of exactly how you want to convey an idea is to use keyword searches on photo sharing sites like Flickr or stock photo sites(be sure to use images with an appropriate license (opens in new tab) if you actually use them in your design, rather than just using the search as inspiration).
For example, if you search for 'love' on Flickr, you get a host of images that can represent love: hearts, flowers (particularly roses), the Eiffel Tower, happy couples, a disturbing number of images of bugs mating, as well as a few that directly depict the word 'love' in various media. This provides a good jumping-off point for finding or creating the exact images you might want to use in my design.
Another example would be to search for something like 'fear'. You get images of horror movie villains, heights, violence, people who appear to be afraid, various animals, and similar imagery. It's clear to see what types of images are likely to evoke fear in a visitor's mind.
This type of research is important in determining what types of images you should avoid in your visual storytelling. You might not associate a particular image with a particular idea, but a little research might find that a significant portion of the population does make a correlation.
Make a game plan
Do some free association with those concepts and the types of images you might use. Search for images based on those concept keywords, too, and start brainstorming on what might best work together, as well as things you definitely want to leave out.
If you'd like more visual design techniques, check out the free e-book The Visual Storyteller's Guide to Web UI Design (opens in new tab). Plenty of tips are provided through analyzing 29 examples from companies like Tesla, Fitbit, Microsoft, Squarespace, Foursquare, and others.
Words: Jerry Cao
Jerry Cao is a content strategist at UXPin (opens in new tab) – the wireframing and prototyping app – where he develops in-app and online content for the wireframing and prototyping platform.
Like this? Read these!
- 3 free photo search tools that make finding images easy (opens in new tab)
- How to prepare your images for web use (opens in new tab)
- Speed up your website by blurring images (opens in new tab)
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Get Weekly Tips and Inspiration
Sign up below to get the latest from Creative Bloq, plus exclusive special offers, direct to your inbox!
Creative Bloq Staff
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.
- The best iPhone 14 cases in January 2023
- How to download Adobe XD free or with Creative Cloud
- 6 web design trends to watch in 2023
- The best ultrawide monitor in 2023
What are the 3 types of image? ›
- JPEG or JPG. A JPEG, or JPG, is a compressed image file wherein the quality of the image decreases when the file size decreases. ...
- PNG. PNGs are image file types often found in web projects and web design. ...
- GIF. ...
- TIFF. ...
- PSD. ...
- PDF. ...
- EPS. ...
JPG format is the standard file format of digital cameras and is the most common image format used on the web because of its compression and universal support.What are different types of images used in web designing? ›
There are three file formats for graphics used on the web: JPG, GIF, and PNG. Each of these file formats are designed with a specific purpose in mind, so it is important to understand the differences when we use them in our websites.What are the 3 tips in editing images for your website? ›
- Choose the right file format. The first thing you need to know about image optimization is how to choose the right file type for your image. ...
- Reduce image dimensions. To do this, you will need to work with an image editor. ...
- Image compression.
Some of the most important are your ability to capture the right light, the right composition, and the right moment—the three elements of a great image.What is the best image type? ›
Raw image formats are the highest quality but have unreasonably large file sizes of up to hundreds of megabytes. For web images, the WebP file format offers 25-35% smaller file sizes than JPEG for the same quality photos, meaning you can upload higher quality images for the same disk space and speed up your site.Is JPEG or PNG better for web? ›
And while the graphics and the images with letters are usually better-looking in the . png file, with the regular photos, JPG is a better choice for the web because if the smaller size. If you decide to use PNGs only, they will slow your website which can lead to frustrated users.
If you want a fast loading compressed image, choose a JPG format. If you are looking for a high quality, clear image, choose a PNG. What kind of file type should I use for my website logo? PNGs support transparency, and it is the best option for website logos that need to appear on various color backgrounds.Which is best for web PNG or JPG? ›
The general rule is to use JPGs for photographs, images that don't have a transparent background, and other memory intensive files. And to choose PNGs for graphics, files with transparent backgrounds, and other images where clarity and color vibrancy are important.What are the 3 common file type of an image file? ›
The PNG, JPEG, and GIF formats are most often used to display images on the Internet. Some of these graphic formats are listed and briefly described below, separated into the two main families of graphics: raster and vector.
What are the three main types of editing? ›
Developmental, substantive, or content editing. Structural editing. Copy editing.What are the top three features of a good website? ›
- Well Designed and Functional. Your site reflects your company, your products, your services and ultimately your brand. ...
- Easy to Use. ...
- Optimized for Mobile. ...
- Fresh, Quality Content. ...
- Readily accessible contact and location. ...
- Clear calls to action. ...
- Optimized for Search and the Social Web.
- 1 Navigation. The website design should be easy to navigate and the menu items should easily accessible from any page. ...
- 2 Visual Design. ...
- 3 Content. ...
- 4 Web Friendly. ...
- 5 Interaction. ...
- 6 Information Accessibility. ...
- 7 Intuitiveness. ...
- 8 Branding.
|Image quality||File size|
|JPEG||Fine||Large (for JPEG images)|
|Normal||Medium (for JPEG images)|
|Basic||Small (for JPEG images)|
There are three stages involved, namely image creation/acquisition, image processing/enhancement, and image reproduction. In order for color management to work, it will need to be integrated into the same workflow.What makes a good image? ›
There are many elements in photography that come together to make an image be considered “good”. Some of these elements include, but are not limited to lighting, the rule of thirds, lines, shapes, texture, patterns, and color. All of these things play an important role when it comes to photography.What is the most useful image format? ›
The PNG file format is optimized for digital use, making it the most commonly used image format. It also supports more colors than the GIF format – PNG can handle up to 16 million colors, while GIF only supports 256 colors.What are different types of images? ›
- TIFF (. tif, . tiff) ...
- GIF (. gif) GIF or Graphics Interchange Format files are widely used for web graphics, because they are limited to only 256 colors, can allow for transparency, and can be animated. ...
- PNG (. png) ...
- EPS (. eps) ...
- RAW Image Files (. raw, .
JPEG: This is an ideal image format for all types of photographs. PNG: This format is perfect for screenshots and other types of imagery where there's not a lot of color data. GIF: If you want to show off animated graphics on your site, this is the best image format for you.Is TIFF or JPEG better for web? ›
A TIFF will enable you to store richer, more detailed images. It's good practice to save your original (or source) photos as TIFF files. JPEGs, meanwhile, might be a better choice for exporting your finished edits because they're easier to share and print.
Can PNG be used for web? ›
Portable Network Graphics files (PNGs) are compressible and like JPEGS, can handle 16 million colors. They're mostly used for web graphics, logos, charts, and illustrations, rather than high-quality photographs, because they take up more storage space than JPEGs.Is PNG better for web or print? ›
Like the GIF, PNGs use a lossless compression, allowing for easy storage, sharing and are ideal for use on the web. PNGs are low in resolution and not suitable for print (unless you know a lovely design agency who will convert to another format for you).Are PNG or JPG better quality? ›
The biggest advantage of PNG over JPEG is that the compression is lossless, meaning there is no loss in quality each time it is opened and saved again. PNG also handles detailed, high-contrast images well.Is JPEG used for web or print? ›
JPG files can be used for Web or print, but it matters whether they are RGB or CMYK and also what their resolution is. It is important to know that JPG is also a “lossy” compression system, which means that the more you compress it, the more image quality it loses—permanently.What is PNG best used for? ›
PNG is ideal for all types of graphics containing sharp edges and solid colours. PNG is also a good choice when you need to create screenshots or convert vector graphics into raster formats for systems that cannot display vector graphics. The alpha channel allows you to create transparent areas in an image.Which is better JPEG or PNG or TIFF? ›
PNGs can be easier to manage between programs because they're smaller files. They may be smaller than TIFFs, but they're still larger than JPEGs. Ultimately, this is one of the main reasons why JPEGs remain a more popular file type for online photos.Should I use SVG or PNG on my website? ›
PNGs and SVGs support transparency — so they're both excellent choices for online logos and graphics. It's worth noting that PNGs are one of the best choices for a raster-based transparent file. If you're working with pixels and transparency, PNGs are a better option than SVGs.What are 3 file types? ›
The types of files recognized by the system are either regular, directory, or special. However, the operating system uses many variations of these basic types. All file types recognized by the system fall into one of these categories.What are the three popular image formats in HTML? ›
There are three image formats in constant use on the net — GIF, JPG and PNG. Each is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Saving and exporting into these formats will require a decent image editor.What are the 3 types of file structure? ›
File Structures: Pile, Sequential, Indexed Sequential, Direct access, Inverted files; Indexing structures- B-tree and its variations.
What are the 3 visual design principles? ›
To best communicate visually, the three main principles of design to consider are typography, hierarchy and color.What are the 3ps in graphic design? ›
The 3 P's are Preliminary, Production and Promotional. towards production and promotional drawings. The second of the P's is the Production Drawings which consist of all drawings enabling the manufacture of the product being designed.What are the two main types of images? ›
All digital image files fall into one of two categories: vector or raster.What are the 3 color models of an image? ›
This article first discussed three types of color models: RGB, CMY/CMYK, and HSI.What are the main types of images? ›
- JPEG (or JPG) - Joint Photographic Experts Group.
- PNG - Portable Network Graphics.
- GIF - Graphics Interchange Format.
- TIFF - Tagged Image File.
- PSD - Photoshop Document.
- PDF - Portable Document Format.
- EPS - Encapsulated Postscript.
- AI - Adobe Illustrator Document.
There are 19 actual '3s' you can spot if you look closely enough (see below). But some argue that this is not the correct answer as there are two more '3s', in the top left corner where the signal strength of the phone shows three bars being used. The puzzle has been shared thousands of times on Facebook and Twitter.How many types of image are there? ›
The 5 Types of Digital Image Files: TIFF, JPEG, GIF, PNG, and Raw Image Files, and When to Use Each One. There are 5 main formats in which to store images.What are the three popular image formats quizlet? ›
Most common types of images released on the web are: GIF, JPEG and PNG.What is the most common image format? ›
JPG The most popular format for camera or web images. JPG always uses lossy JPG compression, but its degree is selectable, for higher quality but larger files, or lower quality but smaller files. JPG is for photo images, and is not the best choice for most graphics or text document data.What is a set of three photos called? ›
A photographic triptych is a common style used in modern commercial artwork. The photographs are usually arranged with a plain border between them. The work may consist of separate images that are variants on a theme, or may be one larger image split into three.
How do 3D pictures work? ›
The dimensionality that humans perceive in their vision comes from the brain combining disparate images into a whole – a phenomenon called parallax. Two lenses are used in every 3D shot – each captures an image slightly offset from the other. As a result, 3D images contain twice as much information as 2D ones.How many thirds are there in 3? ›
1/3 1 2 3 Page 4 Whole Number Divided by a Unit Fraction (2 of 2) Example: 3 ÷ 1/3 1/3 1 There are 9 one-thirds in 3 wholes so, 3 ÷ 1/3 = 9.Which one is better PNG or JPEG? ›
Because of their different compression processes, JPEGs contain less data than PNGs — and therefore, are usually smaller in size. Unlike JPEGs, PNGs support transparent backgrounds, making them preferred for graphic design.What is image and its types? ›
An image is a visual representation of something, while a digital image is a binary representation of visual data. These images can take the form of photographs, graphics and individual video frames. For this purpose, an image is a picture that was created or copied and stored in electronic form.What does JPG stand for? ›
What is a JPG? The JPG image file type, typically pronounced jay-peg, was developed by the Joint Photographic Experts Group (JPEG) in 1992. The group realized a need to make large photographic files smaller, so that they could be more easily shared.How many images are on the Internet? ›
750 billion images are on the internet, which is only 6% of the total photos that were ever taken since most of the photos we take are never shared. 92.5% of photos are taken with smartphones and only 7% with cameras. There are 136 billion images on Google Images.