Slides badge

Types of website graphics

Learning Intentions

  • Understand how graphics are used on website

  • Be able to identify where graphics could be used on a website

Success Criteria

  • I can provide example of how graphics can be used on websites
  • I can use graphics on websites in different ways

Images and the web

  • Websites often include a huge number of graphics across different pages
  • The most common uses of graphics on a website are:
    • Logos
    • Banners
    • Corporate identity
    • Visual interest
    • Promoting products and services
    • Sprites/glyphs
    • Galleries and slideshows


  • The most obvious use for a graphic is with logos.
  • A logo gives a website its own unique brand and is used to represent a company through a visual image that can easily recognised.
  • On a website, logos normally appear towards the top or top-left of the website.

Banner images

  • A banner image is an image that rolls across the whole width of the website viewport, or at least across the content section of the viewport.
  • These are often used to draw attention to that part of the website straight away.

Corporate identity

  • Corporate identity is very important across a website
  • Graphics can help to reinforce this identity alongside other design elements such as colour and theme.

Visual interest

  • A visual interest is something that draws attention to something.
  • In terms of a website and graphics on a website, this is sometimes a large picture that draws the users attention over to something else.
  • For example, clicking on these images will take the user to a page with more information about the products.


  • In a similar fashion to the way that images can be used as a visual interest, they can be used to promote products.
  • Often the images will showcase the actual product but in interesting ways, such as a person using it or, as Apple does it, in a way which shows off their devices (such as showing the slimness of their devices)


  • A sprite is a collection of images put into one image and they are used to make navigating a website easier by giving visual clues as to what the user requires.
  • These are often very simple and straight to the point.

Photo galleries

  • Photo galleries show off many pictures in one compact form, allowing many images to show in one go.
  • As well as standard, static photo galleries, some websites employ a dynamic photo slideshow.
  1. Identify and describe four different uses for graphics
  2. Find examples of each of the four different types of graphics that you provided for 1. on current websites

Graphics on websites

Presentation Overview
NPA Web Design :: Website Graphics :: Types of website graphics
© J Balfour
20:16 | 30-05-2023
Slideshow Outline
Save progress Show presenter mode Toggle whiteboard
Dark Mode Bold Text Accessibility
Random Number Generator Timer Binary & decimal converter Show Python editor Show Knox 90
Provide feedback Help
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍

      Apply a filter:

      All slide files