People often ask how to create effective graphics images
using a scanner. There are a number of things to consider, and
the following suggests one method of doing this to minimize
network traffic and effectively present your images.
If you have a hand scanner (usually capable of 4 inch wide scans),
or a page scanner (usually a full page at a time), you should
be able to put it to work for you. The web is a unique publishing
medium and in order to keep it user friendly, it is to your
advantage to keep many images small (byte count) and to the point.
There are many techniques, and depending on your experience level
and available software, you may take a different approach. What I've
documented here is a method that allows you to work through a large
number of photographic images and maintain consistent results
with web pages that may contain a lot of separate graphics images.
NOTE: I suggest saving the image you are working on frequently
in between important steps. It is easy to mess up an image
that you just spent 30 minutes on. Having a recent version
of the image to return to will save you time and frustration
in the long run.
General image processing technique
- Scan at around 150 to 200 dpi at 24 bit color.
- Crop the image to show the specific item that you want to present.
- Save this as a file (GIF only saves 256 colors, so save as
BMP, TIFF or JPEG if you want to preserve the colors).
- Lighten the picture and enhance the contrast - most pictures
scan too darkly - this is all quite subjective, but
images tend to be too dark and lack good contrast directly from the scanner.
- Once the image is lightened/altered to your liking, save it again.
- If you have streaks or spots on the image, use the 'clone' facility
of your photo editing software to clean this up. Find another area on
the image with the same color/texture to use to overwrite the problem area..
- Once the photo is presentable, save it again.
At this point you want to have a version of the image that is small
enough (in bytes) that it shows the detail that you need, but at the
same time does not require an excessive amount of time to download
to an average user with a 14,400 baud modem. Flashy graphics are nice,
but many people don't bother to wait for lots of graphics to download
and just abort the page and go elsewhere. The goal is to get a good
balance of detail and small size (in bytes).
If you scanned at 150 to 200 dpi, I suggest that you reduce the
image size by 50% or more, and see what it looks like.
If it is not presentable or needs to be reduced again by a different
amount, use your image editors 'undo' feature or reload the
JPEG (JPG) files compress quite small but are 'lossy' in that some
of the resolution is lost as a result of the format. GIF files do
not have this problem, but they do tend to take up more disk space
(in bytes). If possible, save the image as a JPEG (JPG) file.
You want your resulting file to occupy between 3,000 and 20,000 bytes
of disk space - this should result in reasonable download times for
web browser users running on 14,400 baud modems.
Once done, save the smaller image with a different name (ie. if
the original image was called table.jpg, save the smaller image
as table1.jpg). This is the image that you will be uploading using
FTP, or attaching to an Email message to send to the Web Page
Typically, web browsers can only display GIF or JPEG
(JPG) files. Don't give people TIFF, PS, EPS, or any other file
format - odds are good they won't be able to view them from their
Image files are binary data. If you FTP them to another system,
make sure that you transfer them as Binary data (moving them as
ASCII data will render them useless).
GIF files can only save images at 256 colors. Most people running on
MS Windows PC's will be running at this resolution.
JPG files tend to lose resolution as they compress the data. This
saves greatly on disk space, but affects the image quality. Verify
that the image looks good frequently while working on this file type.
Also, if you run your video display at higher than 256 color
resolution, you should test to see what your final image looks like
at 256 colors - it may look very poor. Now is the time to fix
it. You may benefit from converting the image to GIF format
and working from there.
It's always best to have a high resolution picture to work from. You
can always reduce the resolution to make the image smaller, but
you can't take a low resolution image and make it look better than
it already does. This is why I suggest scanning at 150 to 200 dpi,
even though your end result will probably be used at 50 to 100 dpi.
You'll maintain both the higher resolution image and smaller/lower resolution
version of the image. You can use either as necessary.
Why would you want the lower resolution image?
You want people to visit your site and see what is there. The faster it loads
the better. Printers can benefit from high resolution, but most PC monitors
show only 75 dots per inch - Unless you are putting up portraits for people
to copy, you don't really benefit from the added detail.
I have lines on my scanned image that weren't on my picture.
You probably have dust on your hand scanner's scan window. This can be quite
irritating and seems to only get worse in the winter (when it the air
is dryer). Use a soft cotton cloth to brush the dust off the plastic
scan window before your scans. Do not scratch the plastic scan
window! A scratched scan window will need to be replaced - good
luck on finding a source of these clear plastic covers.
There are numerous photographic dust brushes available at photo supply
stores (and department stores that have photographic supplies). These
are safe to use.
I made a cotton bag to put my hand scanner in when I wasn't using it. This
keeps it clean and protects it from all the things that seem to get dropped
on it all the time.
If you find streaks on the images when using a flatbed scanner, make
sure the glass is free of dust and dirt. Clean it as recommended by
Where do I get Image Manipulation Software?
Usually, when you buy a scanner, you get some software that allows you
to alter images. Common programs that come bundled with scanners are:
Adobe Photoshop LE (Reduced functionality Adobe Photoshop)
Ulead Image Tools
If you have a scanner, you probably have software that can manipulate
the images. Learning to use this sort of software takes time and
patience. You can usually work miracles if you spend the time to learn
how to use the tools effectively. It often takes me hours to merge photos
in from other sources. For example, adding a person to a picture who was
never really there - fun to do & all the tabloids do this for their covers
to show aliens shaking hands with politicians (If I was an alien, I'd object
to this), as well as grafting the head of a person onto an alligator body
(yes, The 'Star' had this on a cover recently).
It's often useful to be able to remove things that clutter up a photo,
like a parked car or a spot on the photo that you scanned in. The 'clone'
function (it could be called something else in your software) is handy
for this purpose. Cloning is the act of duplicating some other part of the
picture over top of another part of the picture. Usually you set a
transparency factor so that you don't copy the area exactly, but you
gradually add the other part of the picture somewhere else - this way it
blends in better. I have often removed distracting things from a picture
to bring out the things that were important by cloning another part of the
picture over top of the distraction. Its also nice to be able to remove
inappropriate T-Shirt messages from pictures (and maybe replace it with
one of your choosing).
If you learn nothing else about your Image Manipulation Software, learn how to:
- Scan the image.
- Lighten/darken the image.
- Alter the image contrast.
- Crop the image (remove the areas that are not important).
- Resize the image.
- Save the image in different formats (GIF, JPG, BMP, TIFF, etc.).
- How to clean up the image (Clone functions).
Knowing how to do these things will help you create professional
looking images for the Internet.
Many image processing professionals and graphics artists use Adobe
Photoshop. This is a very expensive product but also capable of many
advanced processing functions. It is unlikely that the average person
who is simply scanning in images to be used on a web page
will ever effectively use the added facilities that you are paying
for in Adobe Photoshop. If you don't already have it, consider
trying some the the shareware listed below first.
You will find that no matter what tools you end up using,
you'll always need a few different image manipulation programs. Why?
You will find that each seems to do a few things better that any other
image manipulation program. Try out the shareware programs listed below,
While I do use Adobe Photoshop, I couldn't live without LView Pro and
Paint Shop Pro.
Shareware Image Manipulation Software
See www.jumbo.com for lots of
shareware. Graphics applications are in the Desktop Publishing
areas. This site has software for MS Windows, Macintosh and Unix.
Some very useful MS Windows based tools are:
- LView Pro (Available for Windows 3.1/95/NT) - Image manipulation software.
Great for converting graphics formats, altering colors, lighten/darken. Does
not offer drawing capabilities. You can also find the software at the
LView Pro Home Page.
- Paint Shop Pro (Available for Windows 3.1/95/NT) - Similar capabilities
image manipulation capabilities as Lview Pro, and includes line drawing and
text functions that allow you to draw on images. Very powerful software,
not quite Adobe PhotoShop, but at 1/15th the cost, who can complain. You
can also find the software at JASC.
- PKZIP - You may need this to unzip shareware files after you download them.
Sources of inexpensive color scanners
If you don't mind bidding for your hardware, you can often find
exceptional deals at UBid or
EBay online auction houses.
We are not affiliated with www.onsale.com in any way, however we strive
to keep people's costs to an absolute minimum and this may be a
desirable way for you to do it. There are other online auction services
available as well. See what you can find - here are a few hundred
to get you started. Use a search engine to help you find out about
some of the others that are out there! The computer industry is fast paced
and often what was state-of-the-art 6 months ago is being closed
out somewhere for 20% of its original cost - there are many auctions
on the Internet that deal with these. I've bought some items through
www.onsale.com and have found them good to work with. Everything
worked as promised.
I prefer to buy new scanners so that I have a warranty, but you can
also look in the papers for people who have used ones for sale. For used
ones, Look for scratches on the scanner window (it may be missing) and
inconsistent illumination levels on the light bars - either problem will
make your scanning efforts miserable.
I like my hand held scanner, but it really only works for
snapshots (4 inches wide - 100 mm - or less). If you need larger
photos to be scanned in, then look at a flatbed scanner (also listed
a 'Full Page'). You can always convert
a color image to black and white, but going the other way is not so
easy. You need to decide what works best for you. If you only occasionally
need a larger photo, consider taking the larger picture to your local copy
or office supply store to be scanned. You might also find someone who
can do this for you locally. Alternately, we will be glad
to scan your images if you can't find another source. We charge $5.00US
per image, plus postage.
This information is provided by the COLOMAR Group to assist you in getting
effective graphics images onto your web pages. Other options exist
and these suggestions may not solve all of your needs. If you would
like additional assistance or want us to scan your images for
you, please contact
to discuss our consulting services.