Documents

Documents on a website can be

  • HTML - HyperText Markup Language - can be read by any web browser
  • xhtml - latest standard for HTML - can be read by modern browsers
  • Word (or other Office formats) - needs the right software - big files
  • RTF - Rich Text Format - more widely readable than Office formats
  • PDF - Portable Document Format - needs a free plug-in

HTML web

HTML is the native format for web pages. Other files, including images, can be linked from the HTML. Use HTML (or xhtml) whenever you can - it will always be readable and the user won't have to load special software or wait for a large file to download. A quick way of producing HTML from Office documents is to use the save as HTML option in Microsft word or other documents. Alternatively, paste the document content into the whizzywig editor. Note that pictures (images) on a web page are held as separate files, linked from the HTML.

Word doc, Officexlsppt

Word or other Office file formats (Excel, PowerPoint, OpenOffice, WordPerfect, etc.) should be used if You are sure that your users have the same Office software and you want them to be able to edit the file once they have downloaded it.

Office documents can have pictures embedded into the file, unlike with HTML pages, where the pictures must be held as separate files. This may seem to make them easier to manage but office documents will be a lot larger than HTML pages, making them very slow to download. Also, can you be sure the user will have the right software installed?

RTF rtf

RTF files can be read on most computers without specially installed software - on PCs they can be displayed using WordPad. They will preserve most of the formatting created by a word processor (bold, italics, fonts, bullets), but have a much smaller file size.

RTF files cannot include tables or images.

Office programs like Microsoft Word often have an RTF option in the Save as... dialogue.

PDF pdf

Unlike HTML, PDF files embed the text, layout and images in a single file. This makes PDF good for distributing complicated documents like brochures or newsletters that mix text and pictures and which will always be printed the same way.

PDF files are usually smaller than Office documents.

OpenOffice (an open source alternative to Microsoft Office) can export PDF files, or you can create PDFs with the free program PDFcreator or the commercial program Adobe Acrobat.

For viewing on a screen, PDF is less satisfactory than using HTML. The user needs Adobe Reader installed on their computer and it usually takes Some time to load, so they must wait to see the document.

Some say, PDF:Unfit for Human Consumption.

Images

Pictures can be served in a huge variety of image formats, but only 3 are really useful on a website:

  • JPEG - best for photographs and images with thousands of colors
  • GIF - good for drawings, logos, pictures of text; supports transparency
  • PNG - more recently introduced alternative for GIF

The quickest way to tell which format an image file is in is by looking at the file extension: .gif, .jpg or .png.

You may see other formats produced by digital cameras, scanners or image editing software: .tiff, .psd, .psp, .bmp, and so on, but you'll need to convert from these formats to one of the above for the image to be useful on the web. Why? Because image files need to be in a compressed format or they will take an age to download over the Internet.

You can manipulate all these image formats with free programs like IrfanView or the GIMP, or with commercial software like Adobe Photoshop.

If you are on a budget,  IrfanView is a great program to begin with - it is free, small, fast and can perform most of the operations you will need  for website use.

Remember also to crop pictures to a suitable size for web display - see Small files good, Big files bad.

JPEG picture

JPEG files (names ending .jpg or .jpeg) compress the image using a 'lossy' algorithm. This means that some information is lost during compression. If an image is compressed too much, quality is lost with blotches or 'artifacts' appearing in the picture.

Image editing software like IrfanView or the GIMP lets you choose how much compression to use. Values between about 30 (smaller file, lower quality) and 85 (bigger file, higher quality) give good results on the web. Experiment with the settings to see what works best.

Some images that at first seem best for GIF might be more efficiently saved as JPEG files, especially if they have 'gradients' - slowly changing shades of color.

GIF image

GIF files compress by holding counts of pixels of the same color. GIF compression works best if there are lots of adjacent pixels in the same color and not too many colors in the image. More than 256 is too many, so Gif is not generally good for photographs, which typically have thousands or millions of colours.

You can make GIF files smaller by "decreasing the color depth", or reducing the number of colors in the pallette.

GiF format was invented for Compuserve and for some years was proprietary.

The gif format can support animation by holding different versions of the image in the file and rotating display between them.

PNG image

PNG was invented as a royalty-free replacement for GIF. PNG compression is better than GIF: we converted a large 72k .gif to a 55k .png, saving about 24% on the file size.

PNG has some features that GIF does not support. One of these features is gamma correction, which goes a long way to solving the problem of an image having different brightness when viewed on a Macintosh and a PC.

PNG supports transparency but not animation.