Looking for the lessons? Get started!
Using images in a Web page.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
[T]he Web is a visual medium, and while great writing may keep a particular audience captivated, the saying "a picture tells a thousand words" is as true as it ever was. — Ian Lloyd
Everything in the world has its extremes, and the idea of using images in Web design is no exception. Some designers believe that the Web should be dominated by text, and images should be used only sparingly and when absolutely necessary. Others want to throw graphics (and Flash effects, and video clips, and music, and…) at their users to the point where text becomes almost irrelevant.
Whether you're at one of the two poles, or you're somewhere in the middle, you need to know how to use images — graphics — on the Web.
(This page will not cover making graphics and images, i.e. with Photoshop, Fireworks, Gimp, or even Flash. That's not my area of knowledge, and there are a million sites out there providing tutorials and walkthroughs on just about every aspect of image creation you can imagine.)
The Basics of the IMG Element
Let's take a look at a basic, no-frills img element that we might use to display a single graphic somewhere on our page.
<img src="images/picture.jpg" alt="A description of the picture" title="More info about the picture" height="200" width="45">
Now let's examine the contents of this code string.
The img attribute identifies the code string as containing/identifying an image — some kind of graphic, usually a JPG, PNG, or GIF file. (We're not going to worry about what each kind of file is right now. If you're burning to know the difference between a JPG and a PNG file, Google is your friend.) The img tag is one of the few that don't need a closing tag — in other words, you won't ever write </img>. Don't ask me why, I don't know.
The src attribute identifies the source of the image file, in this case a relative link to the "images" folder and the "picture.jpg" file.
The alt attribute gives an "alt"ernative description of the image's contents, most useful for screen readers and other adaptive technologies for blind users or those who keep images turned off. (When the image fails to load and you get the "broken image" icon, usually a red X, the alt text serves as a description of what the image would look like if it would actually load.) While sighted users may, or may not, make use of the information in the alt tag, it is essential for blind and visually disabled users. Don't leave it out!
Actually, if the image is purely decorative and serves no informational purpose, you should leave it blank — not out, but empty. Like so:
alt=""
with nothing in between the quotes.
The width and height attributes give the browser the width and height of the image in pixels (no need to identify the unit of measurement, the browser goes on the assumption that it's pixels, and you can't use a different unit of measurement anyway). Some designers don't bother to use these because they're not essential (I don't, bad me), but they're useful, especially when the image is slow to load — the browser holds open a properly sized place for the image during the loading process, thus allowing the design to appear properly even if the image isn't loading as quickly as it should. Sometimes slow-loading images force a browser to reload a page two, three, or even more times, as one image after another crawls over the busy Internet lines and loads into the browser. Not good.
You can read up on the uses of the alt tag in an article by the Web Design Group.
Roger Johannson reminds us:
Think carefully before writing alternate texts. Make sure that the text actually provides useful information to anyone not seeing the image, and that it makes sense in the context. … And don't use the
altattribute for text that you want to appear as a tool tip. It's not the way it was meant to be used, and as far as I know, it only works like that in Internet Explorer for Windows and in [obsolete Windows browsers]. No Mac browsers displayalttext as a tool tip.
SEO expert Aaron Wall notes that image alt tags are taken very seriously by Google in ranking your Web page.
Notice that I've included the title attribute also. That's because Internet Explorer handles the alt attribute incorrectly, but also because the title attribute serves a different purpose: giving more information about the image's content. In other words, the alt attribute serves as a tool for disabled users who have problems viewing the image, while the title attribute gives supplemental information about the image. Unlike the alt attribute, the title appears as a tooltip (except with IE, which incorrectly displays the alt attribute content as a tooltip).
Image Formats
There are three main kinds of image formats on the Web:
- JPG,
- GIF, and
- PNG
All the formats use their abbreviation as their file endings:
image.jpg image.gif image.png
Let's take a very brief look at each of the three formats. More information is available on the Web and from any number of printed sources.
JPG
JPG stands for Joint Photographic Experts Group, and is often abbreviated "JPEG". (Some programs abbreviate the file ending as .jpeg, which I find endlessly annoying, as the browser won't read a .jpeg file if the HTML code indicates it is a .jpg.)
Almost all of the photographic illustrations on this site are JPGs.
JPG Advantages
- Ideal for photographs and other highly detailed images that require smooth color transitions and continuous tones
- Supports millions of colors
- Supports image compression, which allows highly detailed images to exist in relatively small files
If you have a digital photograph or similar image you want to use on a Web site, chances are it will display best as a JPG. And, you can use any one of a number of image compression utilities (many are available free online, or as free downloads — see the Web Design Toolbox for some suggestions)
JPG Disadvantages
- Loses resolution as it is compressed
- Does not support color transparency
- Not good for banners, buttons, clipart, cartoons, and the like
The most obvious downside to JPGs has to do with their ability to be compressed. The JPG's support for lossy compression has the image losing "information" (components of the visible image) that, at least for a while, aren't visible to the naked eye. But as compression gets higher, the image becomes more and more visibly degraded (see this page for an example) until it gets, well, ridiculous.
Some designers don't bother compressing their JPGs at all. This can be acceptable in some instances — say, this very site; since I don't generally have more than one JPG per page, it doesn't take very long to download it even at a fairly large file size. (I still use some file compression, but I don't squeeze the living daylights out of them.) But if you have more than a very few JPGs on a single page, it's best to compress them to speed their download time. Even a few seconds a user waits for an image to download can be too much for their patience (or lack thereof).
So how much compression is too much? Well, that's a matter of endless wonky debate among experts and amateurs alike, but I'll defer to Web designer and author Craig Grannell, who writes:
Although it’s tricky to define a cutoff point, it's safe to say that for photographic work where it's important to retain quality and detail, 50 to 60% compression (40 to 50% quality) is the highest you should go for. Higher compression is sometimes OK in specific circumstances, such as for very small image thumbnails, but even then, it's best not to go over 70% compression.
Some programs allow you to save a file as a progressive JPG. As with everything, there's a tradeoff involved. On the plus side, a progressive JPG loads in multiple passes, with the viewer first getting a low-resolution (blurry) image that quickly fills in (comes into focus), giving them something to look at while the page loads. The downside is that a progressive JPG is significantly larger in file size, making it a longer download.
For some relatively intensive discussion of the various aspects of the JPG, I refer you to the tutorial article on Photo.net.
GIF
GIF stands for "Graphical Interchange Format." A GIF is almost the precise opposite of a JPG. What the one does well, the other does poorly, and vice-versa. GIFs support "lossless compression," which means that it can be compressed heavily without losing information and visual quality. On the other hand, they only support 256 colors in a single image palette, which highly restricts the complexity of a GIF.
GIF Advantages
- Lossless compression
- Supports color transparency
- Supports animation
- Supports interlacing
- Excellent for banners, buttons, clipart, cartoons, logos, type, and the like
Many designers create, or use, interlaced GIFs, which are similar to "progressive" JPGs — they first appear as a low-resolution, blurry image and, as the image downloads, sharpens and improves until the full image is displayed.
(This image, illustrating the Adam7 interlacing technique, is available in the public domain from Wikimedia.)
GIF Disadvantages
- Only supports 256 colors
- Poor for photographs and other complex images
Some designers (and even some graphic artists) don't know that while a GIF supports a maximum of 256 colors, different GIFs can support a different selection of colors. In other words, GIFs aren't restricted to the same 256 colors over all the millions of GIFs out there. Grannell explains:
Most graphics applications provide a number of palette options, such as perceptual, selective, and Web. The first of those, perceptual, tends to prioritize colors that the human eye is most sensitive to, thereby providing the best color integrity. Selective works in a similar fashion, but balances its color choices with web-safe colors, thereby creating results more likely to be safe across platforms. Web refers to the 216-color web-safe palette… Additionally, you often have the option to lock colors, which forces your graphics application to use only the colors within the palette you choose.
The related GIF89 format is often used in Web sites because it supports color transparency — a color program such as Photoshop (or even a very basic one such as IrfanView) can designate a color as "transparent," letting whatever is behind the image appear in place of that color. GIFs do not support any kind of progressive "fade;" when you designate a color as transparent, the GIF treats it as if that color has been "snipped out" with scissors. This can cause problems when the transparent area has irregular edges, causing ragged, pixelated edges (see this page for an example). GIF transparency is less and less useful these days, with the more modern "alpha transparency" capability being supported by more and more browsers. (For now, search the Web for more on alpha transparency.)
PNG
PNG stands for "Portable Network Graphic." It was conceived as an alternative to the aging GIF, which was for a time in legal limbo (you probably don't want to know, but if you do, I wrote about it in 2001; since the Unisys patent expired, this is historical information now). PNGs handle compression better than GIFs, support a much larger color palette than GIFs, handle transparency and gamma correction better, you name it. And PNGs, like GIFs, support interlacing. However, older versions of Internet Explorer (if you guessed IE6, give yourself a cookie) don't fully support PNGs, particularly PNG transparency. If you need to display transparent PNGs on IE6, you might consider workarounds such as Drew McClellan's Supersleight JavaScript or Angus Turnbull's method that relies on CSS and a. .htc server file. And unfortunately, PNGs cannot be animated (there is a format, MNG, that is essentially an "animated PNG", but few designers use it and few browsers fully support it)
Now that IE7 and all other modern browsers fully support PNGs, that file format will become more and more ubiquitous on the Internet, especially when IE6's market share drops to a point where most designers don't have to support it any longer.
Other File Formats
You will see plenty of other image formats, especially if you're working with the output from a digital camera. TIFFs, BMPs, RAWs, and other file formats abound. While they have their uses, they are not suited for Web design. Some browsers display them properly; others display the files improperly, require plugins or ask to display the images in other programs. Almost as troublesome, most of these files are much, much larger in size than Web-suitable image formats, and do not provide enough improvement in resolution or detail to make them worth their relatively enormous size.
Common Mistakes in Using Images
Designers, both newbies and veterans, tend to make many of the same mistakes in using images on their Web sites. Let's review some of them, and see how (most of) them can be avoided.
Using Images for Body Copy
It stuns me how many designers make this mistake. Granted, you can make your text look very cool by using an image derived from an unusual font that most people don't have:
However, the disadvantages of using images for your body copy far outweigh the visual impact such "image copy" carries. Usually, those images print poorly. The images cannot be scanned and read by screen readers. The text cannot be copied and pasted. It cannot be resized.
There is a better case for using "image copy" for headers and logos, but images for body copy — absolutely not.
Not Using Original Images
Sometimes we can't avoid this, but whenever possible, we need to use the original images on our sites, not a copy (or worse, a copy of a copy). Images that have been compressed, displayed, copied, compressed again, displayed again, and so forth degrade in quality. If you're making your own images, be they photographs or Photoshop creations, never delete the originals, and always go back to the originals when you use the image again.
Using Busy Background Images
The word "background" applies here. Not to be sarcastic, but your image is supposed to remain in the background, not overwhelm your page's content. Here's an example that one design site considers a really bad example, but believe me, I've seen worse. Just go to any random MySpace page, and within a few clicks you'll see someone's page with a highly obtrusive, overwhelming background image dominating everything else on there. (My personal favorite example is a schoolteacher's page who, for some ungodly reason, chose to use an animated GIF of a biplane swooping towards the user. It was far worse than this example. Viewing that page was like being strafed by a fleet of Sopwith Camels. You can imagine how difficult it was to actually read the page's content.)
Using Images to Control Layout
Back in the day, we employed arrant trickery such as transparent "spacer GIFs" to control layout — adding spaces, even stacking items one atop another. This is beyond obsolete and way off the mark as far as best practices goes. Don't even bother to look it up to see how the old-timers did it.
Lack of Contrast
Black backgrounds and dark gray text. White backgrounds and light gray text. Red backgrounds and pink text, for God's sake. Why? Visitors need to be able to see your site without squinting to discern what's written there. Aycan Gulez of WowWebDesigns gives a detailed examination of the issue, with nifty visual comparisons.
Resizing an Image in HTML
If the image is 50px by 50px, using HTML commands to force it to display as 150px by 150px will "work," but it will massively degrade and "pixelate" the image. Use Photoshop or an image editor to resize the image instead of forcing the browser to do it. Or better yet, use an image in its original size, if you can.
Stealing Images from Other Sites
The television in your house isn't mine to take, even though I may see it when I walk past your living room window. Neither is the image on my site yours to take just because you see it when you visit my site. Restrict yourself to using free images, or ask permission from the site owner to "borrow" their image. If you receive permission to use a graphic, credit the owner and provide a link to the page where the original resides.
Using a Single Background Image
While some designers love to use one enormously large background image for a site, many of them shy away from doing this in their designs, mostly because of the scalability issue. Most background images are either too large for a typical site (resulting in much of the image getting "cropped" and therefore not being viewed), or too small (resulting in much of the site's pages not being covered by the image). There are workarounds, mostly involving setting a background color that matches the bottom and/or side edges of the image, so that when the image runs out, the background color takes over. There are some other methods, including several snazzy methods outlined by designer Nick La.
The simplest method is merely to use a background image, with code something like this:
body {
background: #f2f2f2 url(images/background.jpg) no-repeat;
}
In this bit of code, you've set a background color, a background image, and stopped the background image from repeating. Unfortunately, this doesn't solve the problem of the image being too large or too small for your page as it displays on the various browsers and monitors out there.
There are more sophisticated approaches. Here is a nifty method for using a single background image, and making it scalable. It was developed by a group of Norwegian students who made a site documenting their travels to China, and explicated by Web designer Chris Coyier. I won't rewrite it here, as it's somewhat advanced (using both table layouts and JavaScript), but if you're interested enough to do battle with the idea, I encourage you to give it a shot. Even if it doesn't work for you, you will learn something.
A good web site has some illustrations. A better web site has an appropriate mixture of illustrations that complement one another. — Tim Priebe
"Favicons"
"Favicons" are those nifty images that appear in your browser's address bar and in your browsers bookmarks or favorites beside the URL or site name. (Look up and you'll see this site has one, a tiny eclipse. No, it's not from the movie.) These aren't difficult to implement, but can be tricky for the first-time favicon user.
First, you must create a favicon. The Favicon Generator and Gallery is one of many sites that will convert an image — JPGs, GIFs, and sometimes PNG files — from an image into a favicon. Like other Windows icons, these will have be ICO filetypes. Normally an .ICO file won't display in a browser, but a favicon is an exception.
After you create the favicon, save it to your root directory, the same directory (folder) that your index.html file is located in.
Whatever it's named, rename it favicon.ico.
Next, include the following code in each of your pages' head section:
<link rel="icon" href="http://www.example.com/favicon.ico" type="image/x-icon">
using your own site's URL, of course. (You can use relative links instead of absolute links if you choose, but especially if you have lots of subdirectories on your site, the absolute link is just easier to use. Of course, if your main URL changes, none of your favicons will display!)
So, you make your spiffy new favicon, you follow the directions, and, voila! Nothing happens! This is actually not unexpected. Many browsers have to be refreshed, or sometimes have their caches cleared. Some, like our friend IE6, won't display the favicon unless you've added that page to its Favorites listing. But if you've followed the directions, you'll see it eventually.
A good resource for more information about favicons is at December14. Mac users might take a look at the pages at Macinstruct, and Photoshop Tutorials by Jennifer.
Image Maps
Image maps work by placing linked "hotspots" inside a larger image. You might have seen, say, a map of the United States with fifty separate links, one to a page about each state. These are useful, but becoming more and more outdated, and have serious accessibility issues.
There are sites out there which will walk you through creating an image map. I'm not going to be one of those sites. 99% of the time, you can solve whatever issue you're facing without the use of an image map.
