Home : Tutorial Eleven

Tutorial Eleven: Images

Images and File Structure
Image Attributes
The Clear Attribute
Vector vs Bitmap
Bandwidth Considerations
Resolution
Bit-Depth and Dithering
GIF
JPEG
PNG
Tutorial Conclusion

And now for the fun part. One of the main reasons the web has become so popular in such a short space of time has been interface - images in fact. Humans are visual beings - eyecandy attracts, inspires and creates a mood or impression. Just as a company will carefully consider a corporate brochure or presentation, so should you contemplate the overall visual appearance of your website. If you think using graphics means merely inserting a nice picture - think again. Graphics are used as illustrations, photographs, as backgrounds, navigational aids, bullets, headings, image maps, horizontal or vertical lines, or invisible layout element.

Images And File Structure

As mentioned in Tutorial 2 it is important to develop a simple file structure - for images as well as html files. Unlike wordprocessing packages, images are not embedded into an html file. They are a seperate element that is linked to the document via the <img src> tag. It is easy to manage images if you place them in an image folder and keep to a set naming convention. We have already discussed file structure comprehensively in Tutorial 2 - remember to use either lower or uppercase and not both, keep name length to a sensible limit, and do not introduce other characters into the file names: an underscore or hyphen is allowable but no other punctuation marks or spaces as some servers will not understand these.

Image Attributes

The <img> tag supports a number of attributes but does not require a closing tag as it is not a container.

• src - the location, or URL, of the image within the site (a relative link), or elsewhere (an absolute link). Must be stated and remember to use the correct case.
  
  
• width - the width, in pixels, of the image
  
  
• height - the height, in pixels, of the image.
  
  Both width and height should always be specified as browsers calculate the space required before an image downloads. Providing the correct dimensions allows text to be rendered correctly before images appear and visitors may begin reading should they have a slow connection. This is one trick web designers use to create the impression of a site downloading faster than it actually is. If no image size it set, text displays on the page and is then 'shunted' out of the way by graphics as they arrive.
  
  Although an image will always be cached at its original file size, a browser can be forced to display it at any size you specify by applying the dimension tags. This is not normally recommended as the image becomes distorted to fit the specified space: if, instead, you used a smaller version of the image there would be a saving in file size. An example:
  
  

  	The original image size 52 x 52 pixels (2k)
  	Image the same file size (2k) but forced to display 20 x 20 pixels. Acceptable in appearance but no saving in file size.
  	The image forced at 70 x 70 - some distortion is occuring.

  
  
  
• alt - alternate text. Many browsers will display a 'tool tip' containing this text when a mouse is over an image.
  
  This image has alt text. Can you read it?
  
  As software for the visually impaired can 'read' this hidden text it is necessary that it reflects the subject of the image. There is some talk in the US regarding the alt tag and it's non-use as being 'discriminatory' and therefore could possibly be made a legal requirement in the future! Search Engines can also 'read' alt text and utilise it as part of your site content. Alt is useful for those using text only browsers or who have 'turned off' graphics in preferences. If the image is particularly large the alt description can provide information about the download size or about the image itself to encourage the user to wait.
  
  
• border - this determines the width of the image border, in pixels, if it is being used as a graphical link. Border="0" removes the border completely.
  
  
• align - top, middle, bottom, left and right: all relate to text that may be alongside an image
  • top - aligns text to the top of the image
  • middle - aligns text to the middle of the image
  • bottom - aligns text to the bottom of the image (the default)
  • left - aligns the image to the left and subsequent text to the right of the image
  • right - aligns the image to the right and subsequent text to the left of the image

  
  <img src="images/sun.gif" align="top">
  
  <img src="images/sun.gif" align="middle">
  
  <img src="images/sun.gif" align="bottom">
  
  If none of these options appear to produce the desired result you may wish to try using tables which give more control over element alignment. To centre an image it must be contained within either a table,
  
  a paragraph container:
  
  <p align="center> image </p>
  
  a center container:
  
  <center> image </center>
  
  or a div container:
  
  <div align="center"> image </div>.

• hspace and vspace - adds extra space around an image, either on the horizontal axis (hspace) or the vertical axis (vspace) in pixels. This can very useful in buffering the image from surrounding text, but remember that space is added on both sides of the image, left and right or top and bottom, or all four if the tags are combined:
  
  

  Text will sit snugly next to an image unless some spaced is added around the image itself. It looks a little too bunched up.

  By adding 5 pixels vspace and hspace the text is pushed away by this amount both vertically and horizontally, creating a more pleasing appearance.

In general, all or most of these attributes are used in combination such as in the following example:

<img src="images/flower.gif" alt="a sunflower" width="50" height="50"
border="0" vspace="5" hspace="10" align="middle">

The Clear Attribute

The clear attribute of the linebreak <br> tag was discussed briefly in a previous tutorial but can be demonstrated more clearly in the context of this topic. Strictly speaking this is not an HTML 4.0 element but may be used in place of CSS. Clear is only used when an image alignment is set to align="left" or align="right", in which case text normally wraps around it:

Vector Vs Bitmap

If we simplified the graphics world we could talk about two major graphic types - bitmap (or raster) and vector. Most of the images on the web today are bitmap - created for the screen and not for print - however it is useful to be aware of the differences between both formats. Vector images are being introduced in new web media such as Macromedia Flash, a reasonably specialised field which will not be touched on in these tutorials.

A vector image is created in an illustration program such as Adobe Illustrator, CorelDraw or Macromedia Freehand. Vector art relies on the ability of the computer to mathematically track each point of an image in relation to all other points. The benefits of this image creation method are:

• Manipulation - the image can be resized larger or smaller, rotated or changed in any way with no resulting distortion. The program recalculates and redraws each point and it's related points with every change resulting in crisp lines. The image can be manipulated at any time in its native format.
• File size - vector files are much smaller than bitmap files - hence the growth of Flash on the web.
• Vector artwork can be exported into bitmap programs to be rendered 'web ready'. This is common with text, which requires clarity and fine-tuning.

A bitmap image is created in an image (or photo) editing program such as Adobe Photoshop, Corel Photopaint or JASC PaintShop Pro and is tracked by means of pixels rather than mathematical points - each pixels information is constantly stored, hence the larger file size. Graphics on computer screens are bitmaps because the screen is composed of pixels. Bitmaps can also be scanned into these programs as photographs or other artwork, captured from video or computer screens, or prepared from clipart.

• Cannot be successfully transformed as the program does not recalculate while redrawing the image - rather the image information about each pixel is stretched across many pixels:
  
  

  	Our original bullet created in a bitmap program - fairly crisp and looks like a nice shiny bauble (2k)
  	The bullet resized in a bitmap program to twice its size. Note how the image has become distorted and 'jaggies' or jagged pixels begin to appear. (3k)
  	Now resized to 3 times its original size, and not looking particularly nice at all - just a fuzzy blob. Bitmap images must be created at the size they will be displayed for this very reason. (5k)

  
  
• Excellent for manipulating photographic images and creating special editing effects
  
• Most bitmap software has an inbuilt browsersafe palette and other web-specific options, such as being able to preview images at different compression rates and at different bit depths

Bandwidth Considerations

With any of these programs web artwork should be saved in either gif or jpeg format - platform independent file formats which compress images to a manageable size. Web graphics must be compressed due to bandwidth considerations.

Creating a website on your own computer can lead to misconceptions regarding download time. Once complete, every component that makes up a site is stored on the hard drive - it is already cached. Sounds, images, video and text all appear on screen quite quickly but this is not a true indication of what your audience will experience when they visit the website online. It is easy to neglect to check the overall file size of each page. At Monash, the internet connection is fast and reliable: if you are expecting outsiders to visit the page you must take into consideration the fact that they are unlikely to enjoy a similar circumstance. They may have slow modems, older browsers, slow connections or the net may be experiencing a slow down.

As a general 'normal user - normal net traffic' rule of thumb it is reasonable to apply the 1 second/1k theory. Most web designers will deem it reasonable to expect visitors to wait around 30 seconds for a page to download completely - meaning a limit of 30k. That's 30k for all graphics and html on each page. Granted, this is often difficult to adhere to, nonetheless it is a good yardstick.

For a simple test, upload your website to the webserver. Clear your browser cache:

Internet Explorer: View > Internet Options > General > Delete Temporary Internet Files
Netscape Navigator: Edit > Preferences > Advanced > Cache > Clear Caches

This will force your browser to download the entire web page into its cache, or temporary storage area, as though it had never visited the site before. Try this approach from other systems outside the University, and ask others to 'test drive' the site from home and work.

Resolution

Preparing images for the web is very unlike preparing them for print, which requires high quality, high resolution. Resolution refers to the number of colored dots squeezed into 1 inch, or dpi (dots per inch). High end printers are capable of outputting at 1200dpi while the average home printer 300-600dpi. Web graphics are designed for screen resolution and therefore should be saved at the same resolution as standard monitors - 72dpi. If they are saved at higher resolutions they will appear much larger than intended, as well as increasing in file size.

Bit-Depth and Dithering

Bit-depth is one of the most important concepts in web building - in particular in relation to the GIF compression format which will be discussed next. Bit-Depth refers to the number of colors in an image, or indeed the number of colors a monitor is able to display.

1-bit	2 colors
2-bit	4 colors
3-bit	8 colors
4-bit	16 colors
5-bit	32 colors
6-bit	64 colors
7-bit	128 colors
8-bit	256 colors
16-bit	65.5 thousand colors
24-bit	16.7 million colors

Most new monitors are set to thousands or millions of colors but there are many users still operating systems under a 256 color limitation. Images created in millions of colors will not look the same on these monitors due to dithering - the computers attempt to match colors it is not capable of displaying. Sometimes it makes a good guess and sometimes not, often resulting in an image that appears dotty, the odd spots being guessed substitute colors. The limited or indexed palette of 256 colors required by the GIF format goes some way to addressing this problem, however there is still some variation across platforms, browsers and monitors which requires web art to be further indexed to 216 colors guaranteed not to dither - the websafe palette mentioned in Tutorial 4.

The light blue in this email button was not indexed to the web safe palette in this instance. On a 256 display setting the monitor has compensated for the color it cannot display by making a guess replacement - unfortunately it was not a good guess and the image now has the measles ... it has dithered.

GIF (Graphic Interchange Format)

• Designed specifically for online delivery
  
  
• Best for flat areas of color, particularly flat in a horizontal direction - each time the gif compression process encounters a vertical change of color, the file size increases. ie a vertically striped gif will be larger than a horizontally striped gif of the exact same dimensions. Ideal for logos and flat illustrations.
  
  

  2 color gif horizontal 93 bytes

  2 color gif horizontal 124 bytes

  
  
  
• The compression method (LZW) is lossless in that no image detail is lost in the process - part of the gifs ability to drop file size rests in its restriction to only 256 colors (8-bits) or less if possible. Bitdepth refers to the number of colors
  
  
• Gif is more versatile than JPEG due to it's support of transparency and animation as well as interlacing - this is referred to as the GIF89a format.
  
  Transparency: Computer artwork cannot be created in an irregular shape - it must be held within a rectangular boundary. It is desirable however, to achieve floating objects on webpages, appearing as irregularly shaped with no rectangular boundary, just like our bullet example above:
  
  

  	An image with a typical rectangular boundary, which we would like to appear only as the arrow shape. The background color is too obvious.
  	This time the image has been saved as a transparent gif - the yellow background has been selected as the color we want browsers to ignore. A faint ring of yellow is still visible around the border of the image.
  	Much better! The background was chosen to match the background of the page - and made transparent for good measure. A drop shadow was created to increase the floating illusion. The same methods are applied in most GIF artwork on the web.

  
  
  Animation: Animation on the web has it's detractors and yes, it can be overused and quite annoying. However, subtle animations can add a little interest if used wisely. Gifs can be saved as an animation - each frame is contained within the file. They also support transparency and interlacing, and can be set to animate at different speeds or only once. Here we have used the simple arrow above, in four frames, each one rotated 90 degrees:
  
  
  
  Interlacing: Graphics are unravelled by browsers in strict order from left to right, top to bottom. This is fine for small images as it probably happens quickly enough not to be noticed. With larger files however this can appear unwieldy and the user is kept waiting to see what will eventually arrive. A better solution for larger files is to save them as interlaced Gifs - image data is gathered in chunks in alternate rows and displays gradually, initially appearing pixelated and undefined.
  
  

JPEG (Joint Photographic Experts Group)

The name alone provides a clue as to the purpose of JPEGs - photographs. The JPEG format does not work well with flat colored images. On the other hand it does not reduce to a limited color palette, offering 24-bit or 16.7 million color instead: there is no need to use a web-safe palette because enough colors stay in the image to not cause any problems with dithering.

This is a compression format that does result in some loss of detail - data is taken out of the image according to the percentage of compression introduced. This is one reason it is important for your graphics program to offer a preview of some sort allowing you to 'play around' until a suitable result is achieved. Web designers tread a fine line in trying to reduce file size without causing traumatic image distortion. Never save a JPEG again as a JPEG - everytime you do so more information is removed from the image, resulting in an unfavourable outcome. Keep your original image and it can be saved in any format as many times as necessary.

Progressive JPEGS employ a concept similar to GIF interlacing whereby the image decompresses in the browser gradually (GIFS do not require decompression however).

There are times when making the decision to use either GIF or JPEG is difficult. It is a matter of determining the best visual outcome with the smallest file size.

	This sunflower is a JPEG (5k)
	This sunflower is a GIF - it does not appear much different except that the file size doubles to 10k!
	The email button saved as a GIF - the correct format for a flat color image such as this.
	The email button has been saved as a JPEG - the compression method introduces artifacts into flat colored images, blurring the crisp edges and often increasing file size. JPEG is unsuitable for this type of image.

PNG (Portable Network Graphic)

Conclusion

This is the final Tutorial in this series. You should now have enough information to confidently create or enhance your own web page. Recapping the main point in many of the tutorials, the best advice that can be given to anyone attempting to create a website is to test, test and test again. Design web pages with the audience in mind, resist the urge to flaunt every color and font known to man, and make sure the message you are trying to convey is clear and concise. And good luck!

Home : r.e.t.r.o.c.i.t.y Main Page

This tutorial series was authored by Wendy Phillips It is copyrighted which means you may not pinch any of it