Imaging for the Web
For those who are not graphic artists or computer experts, it may seem intimidating to consider including a photograph on your Web page. You may ask: "How do I save my picture on my hard drive? Is it the right size? Is it saved at the proper resolution? How do I get it on my Web page?" This introduction to imaging will answer your basic questions and start you on your way to creating interesting and impressive Web pages.The Digitizing Process
Let's say you have a photograph of your dog, Sparky, and you'd like to include it on your Web page. You would need to first "digitize" itthat is, convert the hardcopy photograph into digital ones and zeroes. The typical way to achieve this is through the use of a piece of hardware called a scanner. The majority of scanners are of the flatbed variety. These look like a flattened desktop photocopier with a hinged lid on the top covering a glass surface. Each scanner is connected to a computer via the parallel port or other high-speed interface. Flatbed scanners range greatly in price, from under $100 on up, depending on resolution (density of the pixels, which are picture elements or dots), quality, and features. Scanning software usually comes with the scanner itself, and other programs can be purchased that will help to increase the usefulness of the scanner. Most of these scanners are meant for pictures and documents up through legal-size papers.
Flatbed scanners are available for use in the ITS PC and Mac Labs on the UH Manoa campus. Faculty who need the use of a scanner may also visit the Digital Media Center (DMC). The DMC also has a slide scanner that can convert your 35mm slides into digital format. Assistants in each of the labs can help with the basics of scanning your picture.
In general, you need to place your photograph face down on the glass, close the cover, then run the scanner's software. There are different imaging options which you can specify. If you want to go straight to the Web, you can set the scan resolution for 72 or 96 dots per inch (dpi). If you want to do some digital editing before putting it on the Web, scan your photo at a higher resolution, such as 150 or 300 dpi. Note that the higher the resolution, the more disk space the digital file will take up. Some scans at higher resolution may end up being multi-Megabyte files far too big for a typical Web page and therefore they must be manipulated and re-saved for optimum size before putting it on the Web.
A popular option to scanning a photo is to use a digital camera to take the original picture. These cameras can also range in price from under $100 to several thousands of dollars. Those in the $500-$1000 range have the best price/performance ratio. Resolution (often compared in the Megapixel range) can vary greatly. In theory the higher the resolution, the better the output. Mid-range digital cameras are typically in the 1.3 to 2.1 Megapixel range, while the better ones currently sport a 3.3 to 4 Megapixel resolution. Resolution is not the only factor to be considered when choosing a digital camera be sure to compare such things as how well the colors are reproduced, how many pictures can be stored in the camera's memory, and features like zoom lenses, LCD displays, and battery life. In a pinch, a digital camera or Web camera with macro (close-up) capability may be used to take a digital snapshot of your photo, though the flatbed scanner will produce better results since it is designed for two-dimensional scanning.
When you are done scanning your picture, save the original file on your hard drive in a format such as TIFF (Tagged Image File Format) or PICT (Picture Format). Again, as the original scans will be fairly large files, be sure to have a lot of space on your hard disk. If you use a digital camera, simply upload the snapshots from the camera to your computer per the instructions in the user's manual.Adjustments
You can make adjustments to your scanned picture to get the best image for your Web page. You may want to fix any irregularities, adjust the brightness and color, crop for content, or resize the picture. Your scanning software should have the tools to perform most of these functions. Much of the tweaking is initially trial-and-error, but once you find a configuration that works for you, you shouldn't have to change the procedure much the next time.
There are shareware and freeware applications with some basic features that are able to do a fair job of tweaking your scanned picture. Take a look at shareware.cnet.com and search for "imaging" or visit your favorite download sites to locate some shareware and demo applications. If you have a license for Microsoft Office Professional 97 (or Office Professional 2000), an image editor called Microsoft Photo Editor comes with the suite of programs. It's not installed automatically with the typical installation. You will need to do a Custom Installation, select the Office Tools section, and highlight the Microsoft Photo Editor package in order to have the application loaded.
If you're serious about the look of your Web page, you might consider investing in a full-featured imaging program such as Adobe Photoshop. It is a fantastic tool for manipulating images. However, it is fairly expensive and can be very complicated. The UH Manoa Outreach College offers courses on Adobe Photoshop periodically.
Resizing an image for the Web is fairly straightforward: A typical computer monitor's resolution is from 72-96 dpi. If your display's resolution is set for 72 dpi, an image 216 pixels across would equal three inches. Please note that although you can specify a size for your image in HTML, it does not change the actual amount of data that is transferred over the network. For example, assume you have a large JPEG file (called "sparky.jpg") that is about 90KB and measures 500x700 pixels. You could display the file in your Web browser as a thumbnail (miniature) 80 pixels across and 100 pixels high using HTML code:
<IMG SRC="sparky.jpg" HEIGHT=100 WIDTH=80>
However, because sparky.jpg is actually 500x700 pixels in size, the entire 90KB file is still downloaded and it is your browser that resizes and displays the image in the smaller size. If you resize the original image to 80x100 pixels using your image editing software, the file size will drop significantly, saving much download time, especially for those browsing with a modem. You can always make the thumbnail clickable if you want others to bring up the full-sized image for more detail. For example, if you created a thumbnail version of your picture and called it sparky.small.jpg, you could have others click on it to bring up the larger file using something like this:
<A HREF="sparky.jpg"><IMG SRC="sparky.small.jpg" HEIGHT=100 WIDTH=80></A>
It was mentioned above that original scan files should be stored in .TIFF or .PICT format, and that these files may be very large. Pictures to be put on the Web are usually stored in JPEG or GIF format. These two formats help to create smaller files sizes. With a smaller file, less data is required to be sent over the network, transfer time is reduced, and the picture loads faster in your browser.
JPEG (pronounced "JAY-peg"), a standard created by the Joint Photography Experts' Group, was created to compress digital photographs and can handle millions of colors. To save space, it uses a "lossy" compression scheme that disregards pixels that are imperceptible to the average person's eye. There are different levels of compression. As a rule, the higher the compression, the smaller the resulting file, but the quality of the image begins to suffer as a result. How much compression can be tolerated depends on the quality of the photo itself and how much you want to sacrifice in terms of quality of the final image. JPEG images are usually saved with a suffix of ".jpg," for example, a picture of your dog might be saved as "sparky.jpg" on your hard drive.
A GIF (Graphics Interchange Format) image is denoted by the ".gif" suffix. While the JPEG format is usually better for photographs, the GIF format is good for graphics with large areas of a single solid color, such as a logo or cartoon clip art. GIF (pronounced either "GIFF" or "JIFF") images are limited to 256 colors and may require an image to be "dithered" (where colors are approximated by introducing dots of different colors so from a distance the colors appear correct) in order to look natural. However, dithering a GIF image makes a file's size larger so to keep the file size as small as possible, you must try to use areas of solid color. Also, although there is the option of using different "palettes" of color (where a sample of colors used in the image are stored), for the best quality image on any computer a "Web-safe" palette should be used. An article about whether it is still necessary to worry about this can be found at the WebTools Site. The interesting thing about GIF images is the ability to produce "animated GIFs" which work like a simple animation book where you flip the pages to see things move. However, animation also increases the file size significantly.
Hint: Because of JPEG's lossy compression scheme, making changes to a JPEG file will result in poorer and poorer quality with each subsequent save. The best way to combat this is to always start with the original scan (or some intermediary step saved as TIFF or PICT or other "lossless" format) then only save as JPEG as the very last step. GIF is less prone to this problem, but the same hint applies.Copyrighted Material
Lastly, a word of caution: It is very important to understand that unless the owner gives you explicit permission, it is illegal to scan and use copyrighted material as your own. Anything on the Web that is an original work is to be considered copyrighted, whether or not it is explicitly stated on the page.
Good luck with adding some sparkle to your Web page!
Maintained by: firstname.lastname@example.org
©2001 University of Hawaii
Updated: April 06, 2001