What images are for

See more about:

This page’s goals

By the end of this page, you should:

  • Know what an informational image is.
  • Know what an interface image is.
  • Know what a structural image is.
  • Know the difference between a good image and a bad one.
  • Know what basic image skills you need for Web work.

What are images for?

Images serve three main purposes: informational, interface, and structural. These are not completely separate categories. Some images have multiple functions.

Informational images

Informational images are on a page because they are part of the content of the page. They have meaning, offering information about the page’s topic. If a page is about tractors, an informational image will tell users something about tractors. If a page is about bow ties, an informational image will tell users something about bow ties.

Photographs are the most common informational images. Suppose we’re creating a page about bulldogs. We might add a photo of a bulldog, so users will know what one looks like.

Bulldog

Here’s another example. Let’s say you’re writing a page about making dog biscuits. You have the text:

Quickly stir the mix with a whisk.

You might have a photo to show what a whisk is:

Whisk

The photo contributes to the content, that is, it helps people understand how to make dog biscuits.

CC
CC

Er, won’t everyone know what a whisk is?

Kieran
Kieran

Most people will. But remember two things.

First, some people are new to cooking. Maybe they’re youngsters, just getting started.

Second, people have different names for the same things. Maybe a “whisk” is called something else in Belgium. I don’t know.

Renata
Renata

Where did you get that photo?

Kieran
Kieran

From stock.XCHNG. The photo was posted by the user LittleMan.

Informational images are often photos, but not always. Drawings, maps, screenshots, and other things are informational images as well.

Some informational images convey emotion. Like this.

Awwwww

How you can look at that and not go, “Awwww…”

Interface images

Users click, drag, or otherwise interact with interface images. Here are some buttons:

Button

Button

Button

Button

Structural images

Structural images are part of the visual framework of a Web page. They’re used to separate parts of a page, highlight some areas, and so on.

There are some common types of structural images.

Dividers

Dividers break up sections of a page.

Divider

Divider

Divider

Divider

Bullets

Bullets are often used with list items.

Bullet

Bullet

Bullet

Bullet

Banners

Banners are used for page titles. The ones below are blank. Use a graphics program to add text.

Banner

Banner

Banner

Banner

Are some images better than others?

You need to know what images to use when. Here are some guidelines.

Utility

Informational images should be useful, that is, they should give users information they need. For example, a map that’s too small or too blurry will not help people find your business.

Small map

Mood

The mood of each image ought to fit the message. Here’s a photo that fits the text.

Curious?

Colors

The palette of each image should match the color scheme of your site. We’ll talk more about color later in this chapter.

Screen size

The image shouldn’t be so big that it pushes other page elements out of position. And like the map above, it shouldn’t be so small that it’s useless.

File size

Small is good, as long as you don’t sacrifice too much quality.

People often make mistakes with images from digital cameras. Most images should be shrunk and cropped before they’re shown on a Web page.

This is very important. You, your clients, your employer, could be in Big Trouble if you violate copyright. There are plenty of places where you can get free or low-cost images. If in doubt, find a different image.

Working with images

Every Weber needs to know how to do some basic image tasks.

  • Resize an image.
  • Crop an image.
  • Compress an image.
  • Add text to a photo, with anti-aliasing.
  • Manage an image collection.
  • Create simple drawings.
  • Take screen shots.

We’ll talk about these tasks later.

You should also consider learning how to:

  • Cut out objects from images.
  • Apply filters, like drop shadow and blur.
  • Fix artifacts in photos with dodge and burn.
  • Use layers to combine image objects.
  • Use connectors in drawings.
  • Use a Bézier tool.

Most images on the Web are simple. You can make almost all the images in an entire site with just a few basic skills.

Summary

On this page, you learned:

  • What an informational image is.
  • What an interface image is.
  • What a structural image is.
  • The attributes of good images.
  • What basic image skills you need for Web work.

What now?

Let’s start by exploring how computers show images.


How to...

Lessons

User login

Log in problems? Try here


Dogs