Web Graphics Tutorials

Graphics Resources ...

This section includes tutorials that explain bitmap images, file formats, image optimization, image preloading howto, protecting pictures, HTML client-side and server-side image maps, image map coordinates, advertising banners, displaying pictures, displaying an example wild animals photo gallery, etc.

Computer Graphics ...

There are two types of graphic images that can be displayed on a computer screen, bitmap images and vector drawings. Bitmap images are made up of dots (called pixels) and vector drawings are described using mathematical formulae. Although there are exceptions, graphics displayed in web browsers are overwhelmingly bitmap images and the only exception that I know of are specialist CAD (Computer Aided Design) vector drawing files that can be viewed in a web browser, providing the user has installed the correct specialist browser plug-in. Some other examples of vector drawing files are Metafiles or other types of drawing package files (e.g. Adobe Illustrator 'AI' files) but I have never heard of these being displayed directly in a web browser, without first being converting into bitmap image format.

Bitmap Images ...

Because this is a web graphics tutorial we are going to concentrate exclusively on bitmap images from now on. Bitmap images fall into two categories, photographic type images and line art images. Every image displayed on a Web-Wise-Wizard page falls into one of these two categories and an easy way that usually tells them apart is their file type. Photographic type images are typically saved as JPEG (JPG) files and line art images are usually saved as GIF files although like every rule, there are exceptions. If you study the header area of this page you will see five small graphics grouped together, all with transparent backgrounds These are all line art bitmap images saved in GIF format and the giveaway that they are GIF images is the transparent areas around the images. However, if you look at the background image behind the line art images then this is a photographic type bitmap image saved in JPG format. Photographic type bitmap images do not have to be photographs.

As we discussed previously, bitmap images are made up of dots (called pixels) and in simple terms, a bitmap image file contains information about each of the individual pixels that make up the image. The image above and the image following both gives an indication of the structure of the pixels in a bitmap image. The graphic below depicts a bitmap that is 102 pixels wide by 49 pixels high. The x,y coordinates of the top/left pixel are 0,0 and the x,y coordinates of the bottom/right pixel are 101,48.

Color Depths Explained ...

This section explains color depth. Color depth is the number of ways that the color of a pixel can be stored and described. Computer bitmap images range from monochrome which uses a color depth of 1-bit to describe a pixels color (i.e. boolean on/off = 1 color + the default background color) through to True Color which uses a color depth of 32-bits to describe a pixels color (i.e. 16 million different colors).

• 1-bit - 2 color
  Monochrome. An old standard for black and green/amber/white on computer monitors. It is supported by most bitmap image editors as a black and white image format.
• 4-bit - 16 colors
  An old standard that has fallen into disuse on computer monitors. It is still supported by some bitmap image editors as an image format.
• 8-bit - 256 colors
  Falling into disuse on computer monitors. Very widely used as an image format. Examples file types include GIF and PNG-8 which both use an indexable color palette.
• 16-bit - 65,536 colors (64 KB)
  Often referred to as 'high color' or 'thousands of colors'. Not supported by some modern graphics adapters.
• 32-bit - 16,777,216 colors (16 MB)
  Often referred to as 'true color' or 'millions of colors'. Supports the full RGB color range and is supported by all modern graphics adapters.

Common Image Formats ...

This section explains image formats and we have provided example photographs for each format so that you can see the 'pros and cons' of using each of the formats. All conversions were done using Adobe Photoshop and all the images were also optimized using Photoshop. I do have a slight tendency to over optimize images so if you see any slight loss of image quality when comparing the photographs then this may be due to over optimization.

• Monochrome - 1-bit per pixel
  Monochrome relates to an image where the color value of each pixel is stored as a 1-bit value (i.e. boolean on/off). Examples of commonly used monochrome color schemes are black on white, white on black, green on black or orange on black. If we use monochrome white on black as an example, then lighter-grays are achieved by inserting a larger number of white pixels between the black pixels, mid-gray is achieved by inserting an equal number of white pixels between the black pixels and darker-grays are achieved by inserting a lesser number of white pixels between the black pixels. Monochrome is a very efficient way of storing an image but monochrome images are not capable of being dithered. For the majority of us who use a modern computer monitor, this means that a monochrome photograph will not display as well as a grayscale image or a color image. Monochrome images should not be confused with grayscale images.
  

  Converted to 2-color B/W Saved as GIF file Image size 1.83 KB

• 256 Grayscale, up to 8-bits per pixel, indexable
  Grayscale relates to an image where the color value of each pixel is stored as a 256-bit (or less) value and could accurately be described as a subset of the RGB color scheme. This means that each grayscale pixel could be described as black, white or any one of 254 shades of gray and a grayscale image is capable of being dithered. Grayscale images are a less efficient way of storing images than monochrome but because they contain 256 shades of gray or less and are indexable, they can be saved in JPG, PNG-24, PNG-8 or in GIF format, whichever best suits your purpose. One of the lesser realised advantages of using the GIF format is that you can make areas of a photograph or picture transparent.
  

  Converted to grayscale Saved as GIF file Image size 8.12 KB

  Converted to grayscale Saved as transparent GIF Image size 10.8 KB

• 256 Color, up to 8-bits per pixel, indexable
  This mode would normally be used for line art type images not photographic type images which are more efficiently handled as True Color and then saved as a JPG file. Exceptions to this rule are when you want to create a photographic type image with a transparent background or you want to use a photographic type image in an animated GIF file. However, you should always remember that 256 color GIF files are a less efficient way of storing photographic type images than True Color JPG files. Although it is not always noticeable, you also use a lot of color information when converting a photograph from True Color to 256 color GIF.
  

  Converted to 256 colors Saved as GIF file Image size 14.9 KB

  Converted to 256 colors Saved as transparent GIF Image size 12.1 KB

• True Color - up to 32-bits per pixel
  This photograph demonstrates that usually, the most efficient way of storing a photograph for display on a web page is to use the RGB True Color image format and then optimize it for displaying on a web page. For some reason grayscale does not store so efficiently in this format, probably because darker colours, including blacks and shades of gray, do not optimize as well as lighter colors. A feature of the JPG file format is that a darker photograph will always be a larger image size than a lighter photograph.
  

  Loaded as RGB true color Saved as JPG file Image size 7.41 KB

  Converted to grayscale Saved as JPG file Image size 11 KB

Web Image File Formats ...

• GIF (Compuserve Graphics Interchange Format).
  GIF is a compressed, bit-image format that is commonly used to display indexed-colour graphics and images on web pages. GIF files are described as 'lossless' because they do not lose image information when they are optimized. This format is ideal for line art, text images, font images and other simple images that can be displayed using 256 colours or less. GIF images can be animated and can also be created with a transparent background.
• JPG (Joint Photographic Experts Group).
  JPEG is a compressed bit-image format that is commonly used to display photographs or other continuous-tone images on web pages. JPEG files use a 'lossy' compression scheme which means they lose image information when they are optimized. Once an image has been compressed and decompressed, then the compressed image will not be identical to the original image. JPEG uses the RGB colour scheme and can contain up to 16 million colours. JPEG images cannot be animated and they cannot be created with a transparent background.
• PNG (Portable Network Graphics).
  PNG (pronounced 'PING') is an image file format that was developed by a consortium of graphic software developers as a non-proprietary alternative to the GIF image format. PNG format files comes in two primary types, PNG-8 and PNG-24. In broad terms, PNG-8 is intended as a replacement for the GIF format and PNG-24 is intended as a replacement for the JPG format. In spite of support from W3C the PNG format is not being widely used, mainly in my opinion because of poor support in bitmap image editing programs.

Dithering Explained ...

Photographs or other bitmap images often contain more colors than the browser palette, operating system palette or graphics adapter can handle. For example, a true color photograph could in theory, contain up to 16 million different colors whilst some graphics adapters may only support 256 colors. In this fairly extreme example, dithering would be the process of mapping in the 16 million colors contained in the true color image into the 256 colors supported by the system.

In more technical terms, dithering is the process of juxtaposing pixels of two or more colors, to create the visual illusion that a third color is being displayed. In other words, it is the process of combining available colors in complex patterns to create the illusion of displaying a color not available in the color palette. The actual combining of the colors takes place inside the human brain, not on the computer screen or other output device.

Most bitmap images are dithered in a diffusion or randomized pattern to diminish the harsh transition from one color to another. It follows that dithering also reduces the overall sharpness of an image and it can introduce unwanted patterns in the final display. In the extreme example we have used, mapping 16 million colors into a 256 color palette would almost certainly result in a loss of image detail and produce a very poor quality display.

The RGB Color System ...

Many people will tell the world that their computer has 16 million colours. It's a really big number and it sounds very, very impressive, but very few people understand how the number is arrived at or what it means. RGB stands for RED, GREEN and BLUE, and when someone talks about an RGB color they are describing a color that is arrived at by mixing a red color, a blue color and a green color. Each of the prime RGB colors can be numerically described in 256 different ways (0 ... 255), the highest number being 255 which is 100% of the color (e.g. red 255 = 100% red) gradually darkening down to zero which is 100% black in all cases. In the RGB color system 100% white is made up from 100% red (red:255) +100% blue (blue:255) + 100% green (green:255). At the opposite end of the spectrum 100% black is made up from 0% red (red:0) + 0% blue (blue:0) + 0% green (green:0).

So how do we arrive at the 16 million colours figure? It is arrived at by multiplying 256 reds by 256 blues by 256 greens and my calculator calculates the answer as 16,777,216. Very impressive!

My Own Learning Curve ...

Whichever bit image graphics editor you use there is going to be a learning curve while you learn to use the program and grasp the rudiments of manipulating bit image graphics. If you have not used a bit image editor before then you should understand that learning to use this type of program is more complex than for example. learning to use a new word processing program. Bit image manipulation is altogether more technical.

When I started to create graphics for publication on web pages I used an early version of Corel PhotoPaint and it took me some time to start creating acceptable images. The self-learning process was slow and time consuming but I did get a great deal of enjoyment from it and I did start producing some very acceptable line art graphics in GIF format. These line art images optimized well in PhotoPaint and when they were loaded in conjunction with JavaScript image preloading, they helped to created some very efficient web pages.

I also learnt to use Corel PhotoPaint to manipulate photographs and this included resizing, cropping, making lighter or darker, increasing contrast, using filters plus a variety of other operations that are useful when editing photographs for publication on a web page. The only job that I was not able to master well in PhotoPaint was photographic image optimization and it was not until I discovered the WebGraphics Optimizer program that I really conquered this problem. WebGraphics Optimizer is very good at optimizing photographs.

In spite of this proficiency there were various advanced effects that I wanted to achieve and several graphic artists told me that these effects could only be achieved efficiently using Adobe Photoshop. I eventually started to use Photoshop but found self-learning difficult and so I decided to enrol on an online 'Mastering Adobe Photoshop' course. This was an excellent decision and my graphical skills moved ahead at a rapid pace.

Using a serious graphics programs like Adobe Photoshop is more of a skill that you master (the Psychomotor Domain - completing practical tasks) rather than an academic subject that you learn (the Cognitive Domain - academic understanding). I find it comparatively easy to teach myself academic computing subjects (e.g. HTML, CSS, JavaScript, CGI programming, etc.) but I found it far more difficult to teach myself the skill of using a serious graphics program. If you are serious about learning this type of skill then one option is to enrol an appropriate course where you can learn the various techniques in a properly structured manner. I did this and the results can be viewed in the Photoshop section of Web-Wise-Wizard.

• My On-Line Photoshop Course

Bitmap Image Editors ...

The following list describes some of the more popular bitmap image editors that are available to Windows users. They vary from inexpensive to very expensive but whichever you choose, you will have to take time to learn and master the operations of the program. There are other similar programs available, even some freeware and shareware offerings but those listed here are the undoubted market leaders.

• Adobe Photoshop
  The acknowledged leader. A fully featured bitmap graphics editor with first rate optimization facilities for both photographic and line art images. High learning curve and relatively expensive.
• Corel PhotoPaint
  Another fully featured bitmap editor. First rate optimization facilities for line art images but optimization of photographic images is less intuitive. Relatively inexpensive and can be buggy.
• Jasc PaintShop Pro
  Another fully featured bitmap graphics editor. I do not know too much about this program but it does have a good following. Relatively inexpensive.

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

select/copy the link Markup ...