Web Graphics Basics
Pixels
Computer based images are comprised of thousands of tiny dots of color called pixels. These are the small dots you see if you put your face too close to your television or computer screen. Each digital image is comprised of thousands or millions of individual pixels, each with its own color. When these groups of pixels are viewed as a whole, we see the entire image. Most computer monitors have display sizes of 800x600 pixels, 1024x768 pixels, or 1280x1024 pixels.
Resolution
Resolution indicates the number of pixels that are displayed per inch for an image (or pixels per centimeter). Most computer monitors display at resolutions of 72 pixels per inch or 96 pixels per inch. If an image is 72 pixels wide, then it will display as 1 inch big on a monitor that is set to a resolution of 72 pixels/inch. It is important to remember that for computer graphics, a higher resolution (pixels/inch) does not mean a higher quality image. What is important is the total size, in pixels, of the image.
Graphics for print and graphics for display on computer monitors use different
resolutions. While monitors are constrained by the 72 or 96 pixel per inch
limitation, standard deskjet printers currently print in the range of 4800x1200
dpi (dots per inch) and pictures in magazines typically print at a resolution
of 150 dpi. Unlike computer graphics, with images for print, a higher resolution
will yield a higher quality image. Therefore, if you intend to print an image,
you want to use a higher resolution than you would for a web graphic to achieve
a higher quality print.
So, if you are scanning an image for use on a web page, what resolution should you use? For display on a computer monitor, scanning an image at a higher resolution will simply yield an image that displays larger on the screen, since more total pixels are captured. For example, a 3 inch by 3 inch picture scanned at a resolution of 72 pixels per inch will be 216 pixels wide and 216 pixels high and display as a 3 inch by 3 inch picture when displayed on the computer monitor. A 3 inch by 3 inch picture scanned at a resolution of 144 pixels per inch will be 432 pixels wide and 432 pixels high and display as a 6 inch by 6 inch picture when displayed on most computer monitors.
Therefore, the answer to the question of what resolution to scan images at really depends on the size of the original picture and how big you want the image to appear on the web page. Think about the total number of pixels you are capturing instead of the pixels per inch. It is important to remember, though, that it never hurts to capture an image onto the computer that is larger than you need it (this is true for digital camera settings as well). You can always use a graphics program to reduce the size of an image or crop it without losing quality. If you try to make it larger using a graphics program, however, the image will lose quality. A smaller image means that the image contains fewer pixels, and a larger image has more pixels. You can always throw away pixels that you have, but you can't add pixels that you don't have!
Graphics and File Size
Web designers are always caught in a constant compromise between image quality and file size. Generally speaking, the higher the quality of the image, the greater the file size will be. Also, the larger the image, the larger the file size will be.
It is important to consider the file size of images when using them on a web
page. Images with large file sizes take longer to load. Long load times can
be an annoyance to your audience and may render pages essentially unusable
for those with slow Internet connections.
Graphic File Types
There are many different file types associated with graphics, however, only a few types are suitable for web use. The most widely supported web image formats are jpeg, gif, and png. The type of image dictates which image format is best to use.
JPEG (Joint Photographic Experts Group) – The jpeg image format
allows up to 16 million colors and is the best choice for image with many
colors or color gradations (especially photographs). Jpeg is a “lossy”
format which means that each time the image is saved and compressed, image
information is lost and quality is degraded. Jpeg images allow for various
levels of compression. Low compression means high image quality, but large
file size. High compression means lower image quality, but smaller file size.
GIF (Graphic Information Format) Gif is a “lossless”
image format, meaning that the quality of the image is not degraded through
compression. The limitation of gif images is that the color palette includes
only 256 colors. Therefore, the gif format is a good choice for simpler graphics
with a smaller number of solid colors. The gif format also allows for transparent
backgrounds, which allows the background color of the web page to show behind
the graphic.
PNG (Progressive Network Graphics) PNG is a newer image format that
provides a combination of many features of both jpeg and gif. The PNG format
allows for use of millions of colors as well as providing the ability to have
transparent backgrounds. The one drawback to PNG’s is that the format
is not supported by all web browsers, particularly older browsers.
Native file formats – Native file formats are the formats
that the graphics editing programs use to save the graphic project files in.
The native file formats are larger in file size and contain all of the information
that allows the image to be edited. Examples of native file formats are .psd
for Photoshop and .png for Fireworks.
Other file formats – Computer graphics may also be present
in a number of other different formats such as .bmp, .tiff, and .eps. These
formats have their particular uses, such as for print graphics, but are not
suitable for display on the web. To use one of these types of files on the
web, open it in your graphics program and then save it as either a jpeg, gif,
or png.