Questy's Learning Area, tutorials and lessons

Building a better web site ...

Questy's, Graphics on the web

Green & Purple line, Questy's Colors!

Graphic Formats

Vector graphics refers to software and hardware that use geometrical formulas to tell a program how to draw the picture on the screen. Vector graphic files are generally very small compared to bitmapped graphics. Vector graphics are usually generated from combinations of simple geometric shapes that are filled with colors. Almost all sophisticated graphics systems, including CADD systems and animation software, use vector graphics. In addition, many printers (PostScript printers, for example) use vector graphics.

Raster graphics refers to an image created by using grid mapped bits, hence it is also called a bitmap graphic. Web graphics are various types of bitmap graphics. Each square is one pixel or dot on the monitor. The dots are small enough so individual pixels are not visible, and the human eye responds to the big picture. The density of the dots, known as the resolution, determines how sharply the image is represented. This is often expressed in dots per inch (dpi). Bitmapped graphic programs like PhotoShop and Paint Shop Pro give the user complete control over the color of every single pixel in the entire picture.

Graphics pertains to any computer device or program that makes a computer capable of displaying and manipulating pictures.

Web Graphics vs. Print

Print graphics is usually based on quality of image, Web graphics size is the major issue.
When you create something on paper you know how it looks and how others will see it, but when you create something for the Web, you're never quite sure what others will see it. Different browsers show colors differently, different screens have different resolutions and color depths.

Using Graphics on the Web

Keep graphics as small as possible. The smaller the graphic, the faster it will appear on a reader's screen. The fewer colors you use, the smaller your graphics will be. Windows computers display 96 dots per inch (dpi). Macintosh computers display 72 dpi. So saving your graphics with a resolution higher than 96 dpi is overkill and will just make your files larger and take longer to download.

Understanding Pixels.

Graphics on your monitor are made up of individual dots of color known as Pixels, short for Picture Element. Graphics monitors display pictures by dividing the display screen into thousands (or millions) of pixels, arranged in rows and columns. The pixels are so close together that they appear connected.

Many people are viewing the Web at a resolution of 640 by 480. Creating graphics wider than 640 pixels or taller than 480 pixels means they won't display completely without the reader having to scroll.

The number of bits used to represent each pixel determines how many colors or shades of gray can be displayed. For example, in 8-bit color mode, the color monitor uses 8 bits for each pixel, making it possible to display 2 to the 8th power (256) different colors or shades of gray.

On color monitors, each pixel is actually composed of three dots -- a red, a blue, and a green one. Ideally, the three dots should all converge at the same point, but all monitors have some convergence error that can make color pixels appear fuzzy.

Image Resolution is an important concept to consider in designing web graphics for one simple reason, regardless of how well you design a graphic, in the end the user's monitor determines the final output of the image. The quality of a display system largely depends on its resolution, how many pixels it can display, and how many bits are used to represent each pixel. VGA systems display 640 by 480, or about 300,000 pixels. In contrast, SVGA systems display 1,024 by 768, or nearly 800,000 pixels. True Color systems use 24 bits per pixel, allowing them to display more than 16 million different colors.

turn the page...Next Page

Welcome to Questy's World

Welcome to the World of Questy

Welcome to the World of Questy -- The World of Questy Sites are currrently undergoing a major overhaul. Stay tuned for updated links and news in 2008!

Unless otherwise credited all photos and graphics are the copyrighted property of Questy aka Tom Peracchio. Unauthorized reproduction of any of the pages of this web site is illegal, not to mention rude.
- Copyright 1990 through 2008 -