Images on the Web

Note: if you're new to screen imagery, and think in terms of CMYK instead of RGB (or if you're new to RGB itself), you might want to read the digital imagery primer first.

Getting images on the web is actually pretty simple; getting images optimized beforehand can be tricky.

To optimize an image is to compress it to an optimal point between file size (smaller files download faster) and quality (more compression generally means less quality). Because every image is different, and the way each image is used will be different, you really just have to use your own eyes and judgment to decide how best to optimize any given image. There are some basic rules of thumb, though.

There are three main file format types for the web, GIFs, JPEGs, and PNGs. GIF (Graphic Interchange Format) is a lossy, 8-bit format; lossy means it tosses out information in order to compress the image: information is lost. 8-bit means that each image can contain only 256 colours; that may seem like a lot, and often it will do nicely, but often it's not enough. JPEG (also JPG) (Joint Photographers' Expert Group) is also lossy, but is 24-bit, meaning that each image can contain up to 16 million colours, which is almost always more than enough. PNG (Portable Network Graphic) combines some of the virtues of both GIFs and JPGs into one image file format, making it quite versatile. Because each format compresses quite differently, though, no one format will work for all images: it really depends on the image and its particular qualities.

You can read more about GIFs, JPGs, and PNGs for specific information on how they work.

Putting images into a web page

1. The <img> tag

   To put an image into a web page, the basic syntax is quite simple:

   <img src="myImage.jpg" alt="Text description of my image">

   First, <img starts describing the image. Next, src, or "source", points to the image file. This is actually the most difficult part of placing an image, because you need to clearly point to where the image is. If, for example, the image is in a folder called "images", you need to include that information:

   <img src="images/myImage.jpg" alt="Text description of my image">

   If the image is nested in yet another folder, perhaps called "portfolio", then you'd need to include that as well:

   <img src="images/portfolio/myImage.jpg" alt="Text description of my image">

   Take the following example:

   

   For the file "billpechet.php" to link to "billpechet-0.jpg", the tag would be:

   <img src="images/billpechet-0.jpg" alt="Bill Pechet">

   But for the file "about.php" to link to "banquet-room-screen-0.jpg", the tag would be:

   <img src="images/projects/athinian/banquet-room-screen-0.jpg" alt="Bill Pechet">

   Lastly, alt is a text-alternative in case the user's browser can't display images (some PDAs, cell phones, and alternative devices for the visually impaired may have images disabled for speed or simply because they can't display images; a text alternative will display instead, so that the web page is still useful. Defining a text alternative will also help search engines which of course can't interpret or understand the images themselves, but can use text to get a rough idea of the image's contents.

   Here's a standard sample web page, with lots of images:

   

   Should the user be unable to see the images, and if there's no alt parameter, this is what they'd see:

   

   With the alt tag, the page is at least navigable:

   

2. Using CSS

   To use CSS to place an image, what you do is set the background-image property of an element, as in:

   <p style="background-image: url(images/sample_photo.jpg)">

   The result will be like this:

    

   Because the shape of a default paragraph doesn't match the shape of the image, we need to add some dimensions to the paragraph:

   <p style="height: 200px; width: 150px ;background-image: url(images/sample_photo.jpg)">

    

So which method is better?

Unsurprisingly, neither method is "better" than the other. It depends on how you want the images to be used, really. For example, try clicking on the left image and dragging it around:

 

Now try dragging on the right. Doesn't work, does it? The left image is placed with the <img> tag, while the right is placed with CSS, but because it's the background to a paragraph, it's not a selectable item per se.

Also, because with CSS the image is the background to something, the paragraph can have a foreground as well, either some text or another image:

Because with CSS the image is the background to something, the paragraph can have a foreground as well, either some text or another image.

Other Fun Tricks

Note: this is more to do with CSS than images, so if you're unfamiliar with CSS (so far), you might want to take a look at them first.

One of the more common uses for images is in building the interface for your web site: the buttons and links that users will click on to navigate their way around. Using images can allow you to base the interface around an established visual and typographic identity, beyond what you might be able to accomplish using just CSS for presentation. An example is www.luzform.com: you simply cannot put text on its side as it is in this site without making an image out of it (whether you should is beside the point).

To make this navigation work, first the ten links are established as they would just as if they were text:

<a href="books.html">books</a>
<a href="provoke.html">provoke</a>
<a href="promotion.html">promotion</a>
<a href="clarify.html">clarify</a>
<a href="identity.html">identity</a>
<a href="vibrate.html">vibrate</a>
<a href="exhibit.html">exhibit</a>
<a href="amplify.html">amplify</a>
<a href="internet.html">internet</a>
<a href="allude.html">allude</a>

This will render something like this:

books provoke promotion clarify identity vibrate exhibit amplify internet allude

Now, we just give each link a unique id, so that we can apply specific styles to each one individually (I'm making up the id values themselves, but it makes things easier to understand if the ids have pretty much the same value as the links they're attached to):

<a href="books.html" id="books">books</a>
<a href="provoke.html" id="provoke">provoke</a>
<a href="promotion.html" id="promotion">promotion</a>
<a href="clarify.html" id="clarify">clarify</a>
<a href="identity.html" id="identity">identity</a>
<a href="vibrate.html" id="vibrate">vibrate</a>
<a href="exhibit.html" id="exhibit">exhibit</a>
<a href="amplify.html" id="amplify">amplify</a>
<a href="internet.html" id="internet">internet</a>
<a href="allude.html" id="allude">allude</a>

This doesn't change the way the links look or work at all:

books provoke promotion clarify identity vibrate exhibit amplify internet allude

But now we can add some images via CSS:

a#books {background-image:url(http://www.luzform.com/images/books_bkg.gif)}

The image itself looks like this:

books provoke promotion clarify identity vibrate exhibit amplify internet allude

In order to make the link conform to the shape of the image, we need to add some formatting properties to the CSS, which I'll do one at a time so you can see the effect. First, make the link display as a block, so it has height and width:

a#books {display:block; background-image:url(http://www.luzform.com/images/books_bkg.gif)}

(Elements can display as either inline, like a word in a sentance; block, like a paragraph on a page, or none, which doesn't show at all. Just as words can't really have individual heights and widths in a sentence, if you want to change the dimensions of something, it needs to be a block, like a paragraph or image.)

books provoke promotion clarify identity vibrate exhibit amplify internet allude

Now that the link is a block, it has a whole line to itself. Now we can add height and width to make it look like the image:

a#books {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/books_bkg.gif)}

books provoke promotion clarify identity vibrate exhibit amplify internet allude

Now I can use the CSS a:hover class, which determines how a link shows when the cursor is hovering over it (rollover, essentially):

a#books:hover {background-image:url(http://www.luzform.com/images/books_bkg.jpg)}

books provoke promotion clarify identity vibrate exhibit amplify internet allude

Almost lastly, to get rid of the text, I set the text-indent property to -9999px, which should put it almost 10,000 pixels off to the left, effectively making it invisible:

a#books {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/books_bkg.gif);
text-indent:-9999px}

books provoke promotion clarify identity vibrate exhibit amplify internet allude

Lastly, to re-align the links, if I add a "float:left" to the style, it will line up the links from the left:

a#books {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/books_bkg.gif);
text-indent:-9999px;
float:left}

books provoke promotion clarify identity vibrate exhibit amplify internet allude

Now I can make the rest of the links look pretty much the same by copying the CSS, and changing only the references to images:

a#books {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/books_bkg.gif);
text-indent:-9999px;
float:left}
a#books:hover {background-image:url(http://www.luzform.com/images/books_bkg.jpg)}

a#provoke {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/provoke_bkg.gif);
text-indent:-9999px;
float:left}
a#provoke:hover {background-image:url(http://www.luzform.com/images/provoke_bkg.jpg)}

a#promotion {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/promotion_bkg.gif);
text-indent:-9999px;
float:left}
a#promotion:hover {background-image:url(http://www.luzform.com/images/promotion_bkg.jpg)}

a#clarify {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/clarify_bkg.gif);
text-indent:-9999px;
float:left}
a#clarify:hover {background-image:url(http://www.luzform.com/images/clarify_bkg.jpg)}

a#identity {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/identity_bkg.gif);
text-indent:-9999px;
float:left}
a#identity:hover {background-image:url(http://www.luzform.com/images/identity_bkg.jpg)}

a#vibrate {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/vibrate_bkg.gif);
text-indent:-9999px;
float:left}
a#vibrate:hover {background-image:url(http://www.luzform.com/images/vibrate_bkg.jpg)}

a#exhibit {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/exhibit_bkg.gif);
text-indent:-9999px;
float:left}
a#exhibit:hover {background-image:url(http://www.luzform.com/images/exhibit_bkg.jpg)}

a#amplify {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/amplify_bkg.gif);
text-indent:-9999px;
float:left}
a#amplify:hover {background-image:url(http://www.luzform.com/images/amplify_bkg.jpg)}

a#internet {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/internet_bkg.gif);
text-indent:-9999px;
float:left}
a#internet:hover {background-image:url(http://www.luzform.com/images/internet_bkg.jpg)}

a#allude {display:block; height:480px; width:24px;
background-image:url(http://www.luzform.com/images/allude_bkg.gif);
text-indent:-9999px;
float:left}
a#allude:hover {background-image:url(http://www.luzform.com/images/allude_bkg.jpg)}

books provoke promotion clarify identity vibrate exhibit amplify internet allude