|
Tech Review #4 |
Images! Optimizing Images for the Web
Compressing data enables hardware devices to transmit the same amount of data in fewer bits. Compression is a method of optimization. Images are compressed or optimized for the Web for a couple of really good reasons, the main reason is that the larger the image the longer it takes to display in the browser. The other reason is that smaller files and images take up less space on the network while in transport and when the network is busy, user performance suffers. There are many methods by which data for images is stored and/or compressed. These methods are evident by the extensions used in the file name.
Let's start by talking about the bitmap itself. The bitmap, or BMP file extension, is the basic uncompressed image format for use within Windows. Some of the most commonly used or well-known compressed image file formats are: TIF; GIF; and, JPG. The BMP or bitmap file is an image file consisting of rows and columns of dots and the color value of each dot is stored within bits of the file. The density of the dots is known as resolution which is usually expressed by numbers such as 640 by 480. The higher the resolution, the clearer the picture. The common bitmap is the least preferable graphical display method for use on the Web, because it is not optimized and takes the most storage space of all of the other methods. Also, the bitmap file is a raster graphic as opposed to a vector graphic. Raster graphics to not scale well and when they are enlarged the edges display as jagged lines.
GIF - GIF is pronounced "jiff" and stands for "graphics interchange format". The popular GIF file was created by Compuserve and is often used on the Web being more preferrable than the bitmap because of its compression and scalability. The GIF compression method is called "lossless". Lossless substitues an algorithm for parts of the image which are the same, thus "squashing" areas into a smaller storage space. The key to the algorithms is stored in a hash table which is kept with the image and the programs that read GIF files must decode the hash table to display the image. With this method you can see that the compression rates of various GIF files depend on how much like color there is in the image, thus, the more complex the image is the lower the compression rate. One downside to the GIF file is that it is limited to a color palette of 256 colors or less.
JPEG - JPEG stands for "joint photographic experts group" and is pronounced "jay-peg". JPEG uses a lossy compression method to reduce file sizes to about 5% of their original bitmap impage size. The lossy method throws away parts of the image to save space. The JPEG algorithm first divides the image into squares. Then it uses "discrete cosine transformation" to record the data's shapes and sizes. It is possible to externally control the amount of compression and, thus the amount of info thrown away. The more compression requested or the more data thrown away, the more blocky the picture can become when displayed.
Hyperlinks for Further Research:
JPEG and GIF compression basics:
http://www.widearea.co.uk/designer/compress.html.
Describes compression basics for GIF and JPEG Web images, along with related links and examples.
http://www.pcmag.com/issues/1512/pcmg0015.htm.
PC Magazine Online article, from June 1996, describing GIF and JPEG formats, compression methods, and managing the number of colors. This is a good article for anyone new to creating graphics for the Web.
http://webreference.com/dev/graphics/.
Webreference.com article on how to minimize file size and dithering for Web graphics. Includes sections on the color palette, color reduction, compression, tools and techniques, and several online references.
http://www.swan.ac.uk/ebms/docs/graphics.htm.
This overview provides descriptions of various graphics file formats, as well as information about facilities for converting files from one format to another.
Page last updated on 05/30/2000.