When constructing a website there are two different types of image: foreground images and background images.
Foreground images usually look something like this in a site’s HTML markup:
[code]<img src="logo.png" alt="Company Name" />[/code]
Background images are usually built into the site’s CSS (cascading stylesheet) and would look like this in the HTML:
[code]<div id="logo">Company Name</div>[/code]
…and then like this in the CSS file:
[code]
#logo {
background-image: url(logo.png);
}
[/code]
The image ALT attribute
Sometimes there can be confusion as to which type of image to use. You’ll notice in the first <img> example above, the logo has an “ALT” attribute. This stands for “alternative text” and is a description of what the image represents. This alternate description is displayed if an image fails to load, or if the user has images turned off in their browser settings.
ALT attributes not only make images more user-friendly, but they’re also good for SEO. One or two of our more tech savvy clients have sometimes asked if a particular background image on their website includes ALT text. The issue here is that background images don’t/can’t feature an ALT attribute, and it becomes important to consider the differences between foreground and background images more closely.
As a rule of thumb:
-
Foreground Image (i.e. <img> tag) = content
-
Background Image (i.e. image specified in CSS) = design
This means if your image represents a piece of content, then it should be a foreground image – that is, an <img> tag. If your image represents a piece of design, then it should be a background image and included in your CSS file.
Still unsure?
If you’re still unsure, ask yourself these questions:
-
Do I want this image to appear on all screen sizes?
-
Do I want this image to appear on all devices?
-
Do I want this image to appear with CSS turned both on and off?
-
Do I want this image to be indexed by Google and Facebook?
-
Do I want this image to display some alternate text if it fails to load?
If the answer is yes to all or any of these questions, then usually the image is “content” and you should use a foreground image.
Next, consider these statements:
-
I want a different image to display at different screen sizes.
-
I want no image to display at all on certain devices or at certain sizes.
-
I’m not bothered about whether this image appears on a print out of the page.
-
I’m not bothered about whether this image appears if CSS is turned off in the user’s browser.
-
There isn’t any appropriate ALT text for this image.
If any or all of the above statements are true then the image is probably “design” and you might consider using a background image in the site’s CSS.