B

Creating Web Graphics (GIF vs JPEG)

When designing your web site you can create your own graphics using a drawing program (e.g., Adobe Illustrator) or you could scan an object. After you have created your graphic you can further manipulate it using a image editor (e.g., Adobe PhotoShop) to add additional effects or to reduce the file size. The following is some general information about scanning, bringing the scanned image into PhotoShop for editing, and compression basics.

Scanning: Read and follow the directions for your scanner to produce high quality scanned reproductions. An important final decision involves which format to save your scanned image in. TIFF and EPS formats are generally used for printing and GIF and JPEG formats for the web. For additional information, see Scanning.

PhotoShop: To bring a scanned image into PhotoShop, do one of the following:

File/Open: to bring in a finished scanned document

File/Import: to scan while you are in PhotoShop — (File/Import: select your source [your scanner]) and bring the scanned image directly into PhotoShop

Graphic Production Summary

  1. Create or scan a graphic
  2. Touch up the graphic in PhotoShop (when creating a new document in PhotoShop, use 72dpi resolution, consider using transparency)
  3. Save the image in Index mode in PhotoShop (Image/Image Mode/Index)
  4. In PhotoShop save the file in GIF format (File/Export/GIF89a Export)
  5. In Front Page 2000: Insert/Picture/From File

 

Compression Basics

This article came from http://www.widearea.co.uk/designer/compress.html.

In order to get graphics to behave themselves on the Web, we first have to compress them to take up as little room as possible, so that it takes as little time as possible for the viewer to download them. Opinions vary, but must people reckon that above 50K is getting too big, particularly if you combine several images on a page.

You've almost certainly used compression before, probably with a product like StuffIt to pack down a graphic to fit on a floppy before sending it off to a bureau. The two main Internet graphics formats, GIF and JPEG, have such compression built in, but there are major differences between the two, as we shall see.

Side note: although GIF and JPEG are dominant there are other Web graphics formats, such as PNG or Lightning Strike compressed images. We'll deal with these in later issues of Creating Web Graphics: for now, we'll assume that GIF and JPEG are universal.

GIF

GIF, which stands for Graphics Interchange Format, is a lossless method of compression. All that means is that when the program that creates a GIF squashes the original image down it takes care not to lose any data. It uses a simple substitution method of compression. If the algorithm comes across several parts of the image that are the same, say a sequence of digits like this, 1 2 3 4 5, 1 2 3 4 5, 1 2 3 4 5, it makes the number 1 stand for the sequence 1 2 3 4 5 so that you could render the same sequence 1 1 1, obviously saving a lot of space. It stores the key to this (1 = 1 2 3 4 5) in a hash table, which is attached to the image so that the decoding program can unscramble it.

The maximum compression available with a GIF therefore depends on the amount of repetition there is in an image. A flat colour will compress well - sometimes even down to one tenth of the original file size - while a complex, non-repetitive image will fare worse, perhaps only saving 20% or so.

There are problems with GIFs. One is that they are limited to a palette of 256 colours or less. Compuserve, which created the GIF, did at one point say it would attempt to produce a 24-bit version of the GIF, but then along came problem number two: Unisys. Unisys discovered that it owned some patents to key parts of the GIF compression technology, and has started demanding fees from every company whose software uses the (freely available) GIF code. This has somewhat stifled development.

There is a 24-bit, license-free GIFalike called the PNG format, but this has yet to take off.

JPEG

JPEG, on the other hand, is a lossy compression method. In other words, to save space it just throws away parts of an image. Obviously you can't just go around discarding any old piece of information so what the JPEG algorithm does is first divide the image into squares (you can see these squares on badly-compressed JPEGs).

Then it uses a piece of mathematics called Discrete Cosine Transformation to turn the square of data into a set of curves, some small, some big, that go together to make up the image. This is where the lossy bit comes in: depending on how much you want to compress the image the algorithm throws away the less significant part of the data (the smaller curves) which adds less to the overall "shape" of the image.

This means that, unlike GIF, you get a say in how much you want to compress an image by. However the lossy compression method can generate artifacts - unwanted effects such as false colour and blockiness - if not used carefully.

WMF

Short for Windows Metafile Format, graphics file format used to exchange graphics information between Microsoft Windows applications. WMF files can hold both vector and bit-mapped images.