Reprinted with permission, Cat Fanciers' Almanac, September 1996
After taking a short summer break (life does get hectic sometimes), we hope that you have all given some consideration to what you want included in your web site about your cattery. By now, you may even have all of the text prepared for your homepage, and are bursting to jazz it up with some pictures and images. Graphics can turn your information into a visual presentation, but should be considered carefully. Think about the image that you want to use, and whether it will contribute anything to the page. You will want to use images only to enhance the information you are presenting, and to add that little extra "something" to the content of the page. Too many images will make a page look cluttered and not attractive to the viewer.
At this point, we're going to turn this column over to Barbara French for a while. Barb is well known on the Internet as the webmaster for the Fanciers Breeder Referral List and she works with images for the web a great deal. Here's her advice:
The quality of your photographic image depends on how you scan and process
it. The speed at which the image loads depends on how you prepare it for
Web display after you've processed the picture.
In general, JPEG is better for complex photographs than GIF format, as it
can handle millions of colors and works best when the colors are graded
subtlely. GIFs are best for pictures that encounter large areas of flat
color, such as illustrations or cartoons. GIFs also only use 256 colors.
That said, you still might want to use GIF for your file format for Web
use. For one thing, many cat pictures do not use millions of colors, but
can be easily reduced to 256 (or less -- more about color reduction later).
GIF also has many advantages for Web use that JPEG does not. GIF images may
be interlaced, meaning that they seem to "fuzz" into focus gradually, which
means they load faster -- or give the appearance of loading faster. You may
also make GIFs transparent, meaning that if you can turn the background of
the cat picture into a single color, you can make the background
transparent and have a picture of your cat seeming to float alone on your
Web page. This is very attractive and there are many good examples of this
on many cattery web pages.
There is a new JPEG format called "progressive JPEG" that will allow
interlacing of JPEG images. However, most browsers do not recognize
progressive JPEG format yet.
To process a great Web photo, follow these tips (explanation to follow):
Scanners vary in how they scan pictures. A scanner is basically a very
fancy photocopy machine that transfers the picture into a digital format
rather than spitting it out on paper. These machines vary widely in the
quality of the scanned results. Most scanned pictures will come out much
darker than the original. To do this, you may have to increase the midpoint
setting on the scanner program. My scanner returns fairly close-to-original
color if I set the midpoint at 20%, but individual scanners will vary. If
your picture is dark, increase the midpoint.
Save the scanned image initially as JPEG (.jpg).
Open the picture in a program designed to view and change JPEGs and GIFs.
The end of this article lists several for DOS, Windows, and Macintosh. I
use Adobe Photoshop, an expensive tool, but the best on the market for this
kind of work.
The first thing you will want to do is crop the picture. Cropping means
getting rid of extraneous background. Many cat photos have as much as an
inch of background with no cat in it. Get rid of it.
Second, decide how large you want the picture to be. You may be tempted to
make the picture as big as possible, but big pictures take forever to load.
A good size is between two and three inches tall. Some programs, such as
GIFConverter for the Macintosh, allow you only to measure this by pixel
height, not by inches. In this case, you may need to keep a ruler near your
monitor and play with the scaling until it's the right size.
Important: Never scale a picture up if you can avoid it. While you lose
relatively little definition and clarity of a picture by reducing its size,
there is nothing that ruins a clear, crisp picture faster than attempting
to increase a scanned image's size. If you must increase a picture, try to
increase it by no more than 10%, and keep the picture's resolution as high
as possible.
Most browsers on the World Wide Web only display 72 dpi resolution. For
this reason, you will need to reduce the resolution of your picture to 72
dpi. Reduce the resolution to 72 dpi only AFTER you have finished cropping
and resizing the picture. Reducing the resolution should be the absolute
last step of picture processing. If you reduce the resolution before you
reduce a picture's size, you will lose a lot of picture definition and
clarity.
There are a number of things you can do to a picture to save load time, or
bandwidth. Pictures that take up less memory load faster, and there are
ways to do that other than by making the picture smaller: JPEG compression
and color reduction.
If you are working with a JPEG image, you can save the JPEG file as one of
four levels of quality: Maximum, High, Medium, and Low. While you would
think that the quality difference between Maximum and Low would be
considerable, with some images there is little visible difference between
the two. If you can, try saving four copies of the image at each quality
level. A picture saved at Maximum quality can take up as much as twice the
memory of a picture saved at Low quality, and a picture that takes up less
memory loads faster. Use the picture with the lowest quality setting that
is still acceptable to save load time.
GIF files can benefit from color reduction. All GIFs are saved at 256
colors, you can often reduce the colors without a noticeable affect on
picture quality. Some programs allow you to define the number of colors.
Try saving it at 150 colors instead and see what happens. You may need to
play with this to see what works for you. Reduced colors translate to
reduced memory allocation and load time.
MACINTOSH programs: JPEGView, GIFConverter, Transparency (all downloadable
from http://www.shareware.com).
DOS:
DVPEG (ftp://sunee.uwaterloo.ca/pub/jpeg/viewers/)
WINDOWS:
Lview Pro (downloadable from http://www.lview.com)
Paint Shop Pro (http://www.digitalworkshop.co.uk/psp.htm)
WinGIF and WinJPEG (downloadable from http://www.shareware.com).
WebImage (http://www.group42.com/webimage.htm) ($39.95)
Processing photographic images for the Web involves two potentially
conflicting issues: you want it to look great and load fast. This can be a
tricky balance to strike. Images with fewer colors that are saved at lower
quality load faster than complex images saved at high quality. However, if
you know some of the truth and tricks of image processing for the Web, you
can often strike this balance very nicely.
Taking photographs with the Web in mind
If you have your cat's photograph taken with the idea of putting the
picture up on the Web, here are a few things to consider:
Summary of the two image types
When processing photos for Web use, you will have a choice of two different
file formats: GIF (graphic interchange interface) and JPEG (Joint
Photographers Expert Group). There are advantages and disadvantages to each
type.
Processing the picture
The first thing you need to do is to transfer your printed photographs to a
digital format. If you have access to a color scanner, great. Some places
that offer copying services offer scanning services. Sometimes you can find
them through camera shops or even at mall kiosks.
Resolution refers to how many dots of color are crammed into an inch of
space. A picture saved at 72 dpi (dots per inch) is not going to look as
crisp and sharp as a picture saved at 300 dpi. Always start with a picture
scanned at higher resolution -- at least 150 dpi. I find that by scanning
in the initial picture at 300 dpi I get a nice image to begin the process.
Save an extra copy of this scanned image in case you mess up in later
processing steps.
Reducing load time
It's important to do what you can to reduce load time of pictures. A
graphic-intensive site can take up to several minutes to load if the
network is slow and you have an older modem. People do not wait for
pictures to load if it takes too long; they stop the loading and leave the
page. If you want people to hang around and look at your page, you need to
pay attention to load time.
A few tools for image processing
Commercial tools such as Adobe Photoshop are the best for this kind of
image processing. You can also use commercial illustration and paint
programs that support these file formats. However, there are many good
tools you can get off the Web that will be much cheaper. These are all
graphics viewers and manipulators unless otherwise specified.
<IMG SRC="photoname.gif"> or <IMG SRC="photoname.jpg">
depending upon the format of the image you intend to use.
This will create an image on the web page that is always located on the left side of the page. To have your text align with the image, you must align the image and the text to a paragraph tag as follows:
<p><IMG SRC="photoname.gif" align="left"> Text will go here .......
The image can be aligned left, center or right depending upon where you want your text to appear. Note that text does not align itself around a centered image. If you want your text to stay in line with the photo and not run on underneath the image if the paragraph is long, try inserting <blockquote> at the beginning of your paragraph and </blockquote> at the end of it. This will also work nicely if you have just a sentence or two that you want to appear centered beside an image.
Remember the advice above on load time? The size of the image is extremely important. Most graphics editing programs will show you the size of an image. Don't forget - the larger the image, the longer the load time for the page. Image size can be specified, but is not necessary as long as your have resized the image to the size you want it to be. Your page will, however, actually load faster in Netscape if the image size is specified. The image size is in pixels and is used as follows:
<IMG SRC="photoname.gif" align="left" width="50" height="100">
One of the most important things you must also do with your image tag is to add an alternative for folks who don't have a web browser, but are accessing your site through a text only browser. Thus your tag would read: <IMG SRC="photoname.gif" align="left" width="50" height="100" alt=" ABY PHOTO"> If you want to get really fancy, you can make the image a link to another page by including the tag <IMG SRC="photoname.gif" align="left" width="50" height="100" alt=" ABY PHOTO">within the <A HREF> </A> tag. This would come in handy, for example, if you wanted to include a photo of a cat and have the photo link to the CFA breed profile page. Here's how to do it.
<A HREF="http://www.cfa.inc.org/breeds/profiles/abyssinian.html><IMG SRC="photoname.gif" align="left" width="50" height="100" alt="ABY PHOTO"<:</A>
And, finally, if you are using an image as a link and are not happy with the border that appears around it, try adding BORDER=0 into the image HTML tag. On the other hand, if you like the border and want it thicker, you can add a numerical value this tag, e.g. BORDER= 6, which will achieve this effect.
LOGOUT:
We know we've recommended before that everyone look at the CFA web site, but are going to suggest it again as we've made some changes - now included are the photos of the 1995-1996 winners, and the new best of breed/division photos are on all the breed profile pages. Check it out at http://www.cfainc.org