The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Web Graphics Tutorials

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines
Example of pixellated bitmap image

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.

Bitmap Image Demonstration

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).


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.


Web Image File Formats ...

+++ Exact Input Required +++
A computer, to print out a fact, will divide, multiply, and subtract. But this output can be no more than debris, if the input was short of exact.

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.

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.


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 ...

Web-Wise-Wizard - Web Graphics Tutorials Web tutorials that explain bitmap images, file formats, image optimization, image preloading, protecting pictures, HTML image maps, advertising banners, displaying pictures, wild animals gallery, etc.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
Post your link NOW!
Featured Bitmap Image Links
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England