Images:
Jpeg Thumbnails:
|
|
| |
|
|
The JPEG images at the links above were designed to fit within a monitor resolution of 800 x 600. This means that they will comfortably fit within a screen that displays 800 pixels across and 600 pixels down. The base pixel format is one of 640 x 480. This yields 96 pixels per squareinch for PCs and 72 for Macs. By increasing the number of pixels from 640 x 480 to 800 x 600 I have also increased the pixel per sq. inch density; the result being a sharper image or higher resolution. This increase in picture quality is visually pleasing but has the disadvantage of using more RAM to load and display. Nonetheless, most of today's computers should not have much difficulty displaying these images. For example my computerhas only 32 megabytes of RAM but displays these images quickly and with good quality. The JPEG images above are also functioning as Thumbnails, smaller versions of a much larger image. The purpose of creating a thumbnail is to allow the viewer to select only the images that they wish to see enlarged, thereby avoiding the slowness of loading an entire set of full size image on the home page. Thumbnails are often saved as GIFs. However, I elected to save the above images as JPEGs for the sake of contrast withthe GIF images below and the accompanying tutorial. |
Animated Transparent Gifs:
|
Unlike the JPEG format, which is best suited to photographic images due to their numerous color variations, GIF format is well suited for cartoon and animated images which tend to exhibit solid colors and much less color variation. In addition GIF files tend to be smaller than JPEG's and have the added advantage of allowing transparency and the resulting three dimensional appearance that accompanies it. Without the application of transparency GIF images would look flat and, because the background could not show through, always appear within a white box. (notice how the choice of colored backgrounds for the GIFs above demonstrate the 'look' of transparency)
As hinted at earlier, GIF images tend not to display the same wide variety of colors as JPEG's. A photograph saved as a JPEG, for example, is likely to have a bit depth of at least 16 bits and more often these days a depth of 24 bits. This translates into millions of possible colors which can be displayed within each photograph. ( 2 to the 16th power=65,536 colors and 2 to the 24th power= 16.7 million colors) Obviously so many colors are going to increase the size of the image file. GIF images on the other hand do not need to display so many colors. The animated GIFs above were saved at a bit depth of 8 so they avoid dithering or appear smooth but still take up only a little file space. The scanned comic strip below was also saved with a bit depth of 8 |
|
Scanned images, such as the one below, are quite easy to make and can be manipulated with a imaging program like 'Adobe Photoshop' or 'Graphic Converter' and uploaded to your web site. |
|
The comic above is also interlaced . This means that the image loads in layers rather than all at once.(Notice how the image quality gradually improved). The advantage of interlacing is that it allows the viewer to get an idea of what the image looks like before it actually fully loads. If they don't like what they see they can stop the download. You can easily make an interlaced image with your Photoshop program by selecting interlace while saving. |
Another way to allow viewers to get some information about an image before it loads is with an alternative label . Alternative labels (alt labels) appear as little yellow tags over the image with the title or a description of the image on it. These are quite useful for those users who surf with images off. |
Citations:
