[an error occurred while processing this directive]
Go to Bottom Nav - April 21, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Image Overview

The Image Tag

<img
src="the_path_to_the_image_file"
height="dimension_in_pixels"
width="dimension_in_pixels"
alt="descriptive_text_for_non-graphical_browsers">

(If using xHTML, remember to close this void element with a space forward-slash)

Notice the image tag is a link or reference to an image file; it doesn't have a closing counterpart so it must close itself. The image tag information is all contained within the attributes of the tag.

All of your image tags will contain at minimum of the four attributes listed above; you may add more as needed.

  1. src is the location of the image file, the relative or absolute path.
  2. height is the image height in pixels. You may use a different value than the actual height of the image to constrain it to a certain size. Be cautious; if you change the dimensions of an image too much by this method, it will usually get pixellated or blotchy.
  3. width is the image width in pixels. The same cautions apply as those of the height attribute.
  4. alt or alternative text is used to give web surfers who cannot view images (or choose to turn them off) some information about the content or context of the image. For example, if you are using an image for a navigation or form button, note it in the value of the alt attribute. Illustrating images alt tags will have a description of the image. For images used a pixel shims, use alt="" with nothing between the quotes.

Image File Types

We will be using .jpeg, .gif, and .png files in this class. jpeg and gif have been used the longest, png files are a more recent format.

  • jpeg
    • Use .jpg file type for images that have gradients - photos, gradient filled logos, sunsets...
    • jpegs use 24 Bit color - millions of colors
  • gif
    • Use .gif file type for images with large blocks of color - logos, text graphics...
    • gifs can be transparent, whole or part
    • gifs can be animated
    • gifs use 8 Bit color - 256 colors, so they produce color banding on gradual gradients

  • .png
    • PNG files come in several flavors; for web, use PNG-8bit since PNG-24bit creates a much larger file size. PNG support, especially alpha transparency, has had varying support in Internet Explorer.
    • Unfortunately, Photoshop does not export PNG-8bit with 8-bit alpha transparency, the one PNG file type that has varying levels of transparency (gives a smoother look) and gracefully degrades to 1-bit transparency in Internet Explorer 6. The article listed below has a succinct discussion of PNG files and links to freeware conversion software and freeware file compression software.
    • PNG That Works - A very informative article.
      http://calendar.perfplanet.com/2010/png-that-works/
      ImageAlpha - Mac GUI over some opensource software to convert PNG-24 with alpha transparency to PNG-8 with alpha transparency for much smaller file sizes.
      http://pngmini.com/
      ImageOptim - Mac GUI over a number of opensource compression software applications to compress PNGs, jpegs, gifs, and gif animations. The site has links to the opensource software it uses which are available on other platforms besides the Mac.
      http://imageoptim.pornel.net/

Image Tidbits

  • 72 PPI - Use a resolution of 72 pixels per inch for your images when working in an image editing program such as Photoshop.

  • Use the height and width attributes in the img tag to "carve" out a hole for the image. This will make your pages seem to load faster, the browser knows to leave that space for the image and fills in the rest of the text of the page.

  • Alt attribute - Use the alt attribute in your image tag to give users with text based browsers or graphical browsers with images turned off a chance to know something about the images you are displaying on your page.

  • Images as links - To make an image into a link, surround it with anchor tags just as you would text. If you use images as links, be sure to include text versions of the links to accommodate all browsers. You will often see these links at the bottom of the page in the case of navigation graphics or as a text link adjacent to the image being used as a link.
Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu