Main?Introduction
A page with just text may be fast loading, but not really fun to look at. When
dealing with images for the web, you want the resolution and file size to be
as small as possible, while still maintaining a crisp and detailed image.
If you don't have a graphics program, you'll most likely have to get your images online. If the owner has granted you written permission to use the graphic, you can right-click on the image (Mac users Hold-Click), and select "Save Image As" or "Save Picture As". You can do the same for an image that tiles in the background. Just right click on the background.
Graphic Specs
Color Mode
When making your graphics, you'll want to set the color mode to "RGB"
(Red, Green, Blue). That's the color mode monitors and television screens work
with.
To do this in Photoshop 6.0, when you start a new graphic, just select "RGB Color" in the "Mode" section. If you already have a graphic open, go to Image > Mode > RGB Color.
Resolution
Resolution is the measure of quality and fineness. Typically, this is measured
in DPI (Dots Per Inch).
Obviously a high resolution will produce a higher quality, but it will also slow down the transfer rate. When creating graphics for the Internet, you should make the resolution "72 DPI". 72 is an accepted standard.
To make the resolution of your images 72 DPI, type "72" and select
"pixels/inch" in the drop down menu next to the resolution section
of the dialog box you see when you start a new image. If you already have an
image open, go to Image > Image Size, and type "72" where it says
Resolution. Make sure it's "pixels/inch".
File Size
To maintain a low file size, make sure you choose the appropriate compression
type, and know ahead of time how many images you will have on your page. The
total size for all of your images on one page should be between 30-60K
Compression
JPEG
JPEG was created for images with lots of colors, different levels of contrast,
and high detail. This file type is ideal for photographs, detailed artwork,
and anything that requires more detail then something simple like clip-art.
JPEG can have up to 16 million different colors.
JPEG's are lossy, which means that they contain less information then the original image.
GIF
GIF works well for images with less then 256 colors, and less detail then a
photograph. This file type is good for cartoons, maps, vector art, navigational
buttons, icons, and other images with less color and detail. GIF also supports
transparency, and animation. Unlike the JPEG, GIF's are lossless, which means
that the image will contain all the original information, but with only 256
colors or less.
PNG-8 and PNG-24
The PNG is a slightly new file type that isn't supported by all browsers. Version
4 and below of most browsers can't handle the PNG. Although I don't recommend
the PNG now, it will most likely become the file format of choice eventually,
and even has the support of the W3C.
PNG-8 is a lossless file type that can contain 256 colors. Transparancy is supported, and for the most part it is just like a GIF, only it doesn't support animation.
PNG-24 is also a lossless file type that can support up to 16 million colors, like the JPEG. It can also support transparancy.
Getting Images
To collect images for your website, you have three options. The first is finding
them on the internet (use only with permission!), use a camera to take your
own pictures (ideal for copyright concerns), or you can scan images found in
your own picture collection.
When taking your own pictures, you'll need to either use a digital camera, scan the photographs, or have the film-developer transfer the photos to a CD-Rom for you.
When you turn the photos and images into digital form, you'll want to start with high resolution like 150-300 DPI, and then reduce the size to 72. This will help transfer the extra details so your final product appears high quality.
When you scan in images, use Photoshop (or whatever graphics program you have) when possible. Go to File > Import, and select your scanner. Photoshop works with scanners compatible with the TWAIN interface standard.