What images are for
This page’s goals
By the end of this page, you should:
- Know what an informational 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.
- Understand why every Weber needs to have these skills, not just artists.
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.
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:
The photo contributes to the content, that is, it helps people understand how to make dog biscuits.
Er, won’t everyone know what a whisk is?
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.
Where did you get that photo?
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.
How you can not look at that and go, “Awwww…”
Interface images
Users click, drag, or otherwise interact with interface images. Here are some buttons:
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.
Bullets
Bullets are often used with list items.
Banners
Banners are used for page titles. The ones below are blank. Use a graphics program to add text.
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.
Mood
The mood of each image ought to fit the message. Here’s a photo that fits the text.
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.
Copyright
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.
Why learn this stuff?
A Weber might say, “I’m a PHP programmer. Other people handle those details. Why should I learn this stuff?”
Again, it’s a matter of employability. It’s a matter of how much value you can create with your Weber skills.
Don’t underestimate the importance of images. Take the CoreDogs page on Web page structure, for example. If you look at it, you might guess there are about eight images on it.
There are about 30.
The + and – in the menu, the arrows on the “My notes” field, the backgrounds for the buttons. They’re all images.
Most images on the Web are simple. You can make almost all the images in an entire site with just a few basic skills. But if you don’t have any image skills at all, you’ll need to call on someone else whenever you need an arrow or a button.
That delays your work. It makes you less productive.
It also means that you can’t take on complete projects by yourself. The Web is a great place for entrepreneurs. You can start your own business, just like I started CoreDogs. But entrepreneurs need to know a little about lots of things. Weber entrepreneurs need to know how to do basic image work.
Learn some basic image skills. It will make you more valuable to clients and employers. And it will come in handy when it’s time to start your own business.
Summary
On this page, you learned:
- What an informational image is.
- What a structural image is.
- The attributes of good images.
- What basic image skills you need for Web work.
- Why every Weber needs to have basic image skills.
What now?
Let’s take at look at the three main image formats used on the Web.