weballey logo
 
left Web design - large graphics backnext right
homesearchsite mape-mail
GENERAL

APPROACH

BANDWIDTH

limits
data traffic
text
< graphics >

LAYOUT

GRAPHICS

      Graphics files are very large because they have to determine every pixel's information separately. For every pixel its color will have to be stored. For every pixel its color will be determined in levels of red, green and blue. Graphics are often displayed in 24 bit color, eight bits for every color. These files are known as bit maps.
    You don't have to be a rocket scientist to understand such images will soon grow very large. To fill a standard VGA screen you will need more than 7 megabytes. Several techniques have been applied to reduce the file size of graphics. Most of them use palettes and compression. Palettes allow you to define a color only once, and to refer to that definition. Compression is comparable to ZIP or ARJ archiving.
    If some image information is recurring several times, you can refer to the repeated pattern (GIF - lossless compression). You can go further and refer to a pattern that resembles a previous section in a file (JPEG - lossy compression). You will lose some information, but your file could shrink dramatically. Less than 100 kB can be enough to fill a screen with a photograph.
    Common file formats are GIF and JPEG. GIF was developed by Compuserv. This format is best suited for simple "graphic" images. JPEG is short for Joint Picture Experts Group, an industrial organization. This format is more suitable for photo's. Some older browsers only render GIF images.
    The file size depends very much on the size of the image and the image quality. Never make graphics larger than necessary. Never use more colors than you need. A picture with 16 colors will only be a quarter of a similar 256 color image. Save your JPEG images with different quality settings. Shrink it a bit and see if you still like it. Examine quality and consider the file sizes, then use the smallest acceptable file.
    The IMAGE tag has attributes for WIDTH and HEIGHT. Normally you would fill in the exact size of the image in pixels. Your browser will know how big the image is, and reserves space on your screen. You should always fill in these numbers, your page will render much faster. If you don't, your page will only be rendered after all image sizes are determined by the browser.
    By changing these numbers you can enlarge, shrink or distort the image. This method is used on the web palet page. The graphics displayed are only 16x16 pixels in size and enlarged to 150x150. Shrinking is not very practical, you should consider shrinking the image file itself. Some browsers (like Mosaic) won't accept this, you will see the graphics in their original size.
    Recently animated GIF's have become very popular. The latest GIF standard (gif89a) allows you to include several images in one file. Making it a tiny movie, often repeated endlessly. Properly used, you can achieve great effects. But your file could easily grow to a 100 kB or more. Besides, moving objects attract attention. Applying more than one will soon irritate your visitors. So use them wisely, use them sparse.
bottom  
left Copyright © Gerben Hoekstra - All rights reserved backnext right