Placing images

When you insert an image into a MS-Word document, the image is actually stored in the .doc file. But with web pages, you put a tag into the web page to tell a browser the address (URL) of the image file that you want to display.

Readings

• pp. 103-114 or pp. 90-100; But ignore Castro's instructions about re-sizing images with width= and height=. For this course you should only ever re-size images using an image editor like Photoshop (except for the special spacer image).
• Lynch & Horton, 182-190: HTML and Graphics and Accessibility

The <img> tag

<img src="some-graphic.gif"
   align="left | right | top | bottom | middle | absmiddle  ...."
     alt="description of the function of the image"
   title="anything else you want to say about the image"
  border="0"
   width="200"  
  height="100"
  hspace="10"
  vspace="10"
/>

All the crossed-out attributes have been "deprecated" by the W3C in favor of CSS ways of doing what these used to do.

src [Required!]

src acts just like href does in links to point to the location of an image file.

alt [Required!]

...an alternative, text description of the image, is important for handicapped accessibility: Blind folks can use screen readers to interact with the Web. The text specified in the alt attribute will be read out loud.

So, particularly if the image is necessary in your navigation scheme like this:

Your alt text should describe the function of the image: e.g. alt="go to the previous page", and not "a yellow arrow pointing left".

Secondary uses of this text:

• ...as a "tool tip" by IE (but not Firefox) browsers that pops up when the mouse lingers on an image
• ...as a description of an image that lets robots like Google's figure out what your image is about, and make it searchable.

title

May be used in a similar way to how it's used in the <a> tag: Text here functions as a description of the image (though not for handicapped accessibility). Will often show up as a tooltip.

width and height

• These used to be practically mandatory, but no longer: If these are not specified, older browsers have to wait to shown anything on a web page until the image arrives from across the Internet so that they know how much space on the screen to allocate. But modern browsers just go ahead and layout the page, and then just re-adjust the layout once the image arrives as needed.
• Dreamweaver will typically insert height and width for you when you insert an image.
• These attributes can be used to re-scale an image: to specify a different height and width than the native size of an image, but this is a bad, bad idea .
• Well, rescaling is always a bad idea, except for the cute little spacer image trick.

Spacer image

<img src="/g/t.gif" alt="" height="1" width="50" />

• t.gif is actually a 1x1 transparent image.
• Use it to insert arbitraryspace where you need to by re-sizing height and width.
• Set the alt explicitly to nothing (as above).

Find the pixel dimensions of an image

...by Right-clicking on an image and

• choosing view image. The dimensions (width x height) will appear in Firefox' window bar. Or,
• choosing properties to find out the pixel dimensions of an image, as well as its filesize.

Useful CSS styles to use with images

Here are some of the useful CSS attributes for working with images. For example, if you were to set these style rules to affect all the img tags on your page...

img {
  float: left;     /* image goes left, and everything else 'wraps' to the right. */
  border: 1px solid #999999;   /* light gray border */
  padding: 2px;    /* 2 pixels of space between the image and the border */
  margin: 10px;    /* 10 pixels of space outside the border */
}

Your images would look like this one. The effect of float: left is to make the image "float" to the left, and the text (or whatever else comes next on the page) "wraps" to the right. This word wrapping goes on to affect everything that comes next in the "flow" of your document, until you explicitly turn off word wrapping (see below).

Here's how a "non-floating" image aligns next to some text it's been inserted in front of.

Turning off word-wrap

Sometimes you want to turn off word-wrap, so that things will start to display below the image instead of beside it. Do it with one of the three possible values for the clear attribute of the line break tag:

<br clear="left | right | all" />

Or, for example, this style for paragraphs assures that word wrap is turned off before the contents of any paragraph tag set are rendered:

p {
  clear: all
}