Creating Images
One of the most time-consuming, but personal, solutions is to create a digital image using a graphics application. There are many possibilities if you choose this route: PhotoShop®, Illustrator®, Freehand®, Painter®, Paintbrush®, MacDraw Pro®, etc.
If the artist in you (or in someone else you know) is better suited to paper, pen and ink or some other medium (such as photographs or slides), you may use a scanner to scan your image into a digital format that can be used on your home page.
With flatbed and slide scanners for both Macs and PCs, you can preview your scans, zoom and do other simple manipulations before choosing the final scan and saving the image in the desired graphic format.
Once your image is in a digital format, you may choose to manipulate the image. Suppose, for example, that you find an old photograph of your childhood pets, Dog and Cat. Unfortunately, Bossie the Cow is also in the photograph and your home page is only about dogs and cats. By using a graphics application, you can erase Bossie from the picture, paint the barn a brighter red, and erase the clouds on the horizon!
Inserting Images
Many users quickly become uninterested in your page if it takes too long to load, and images are the primary culprits. Images should be kept small unless you have a special one (and for something that needs to be large in order for detail to display, there are techniques such as creating a thumbnail—a click-able smaller photo that will link to the larger one, that will still enable your page to load quickly). It is useful to specify within the HTML document the size of the image (in pixels) that you want it to display. By including the size parameters, the browser knows “ahead of time” the amount of space it will need to retain in order to correctly display the image; therefore, the page loads faster.
NOTE: Although this is a way to “re-size” an image within the HTML document, rather than physically resizing images within a graphics package, keep in mind that the physical file size is still the same and it will take, therefore, the same amount of time to download and display as if you had left the display size large.
NOTE: If you use a large image on a page, Web courtesy dictates that you identify both the graphic type and the size so that the user can decide whether he or she wishes to view it!
To insert an image in your document, use the <IMG> tag. The file must be located in the same directory as the HTML file that is calling it or you must include coding for the path to locate the image file. You may also simply point to someone else’s image.
For example, if you have a file “picture.gif” in the same directory as your HTML file, to show the photograph, include the tag:
<IMG WIDTH=75 HEIGHT=125 SRC=”picture.gif”>
This example shows the <IMG> tag with options WIDTH, HEIGHT, and SRC (source, the file name). Options may be placed within the tag in any order.
If the photograph belongs to me and resides in my directory, then you might consider simply pointing to my existing image file. To do this, rather than supplying the file name alone, you supply the URL where the file resides. Your tag would read:
<IMG WIDTH=75 HEIGHT=125 SRC=”http://tutorial.webaccessories.org/photos/picture.jpg”>
Keep in mind that this option will involve the browser “going to” the location where this file resides in order to display the image; the result is increased load time of your page.
Remember, the “upside” is: if the image is modified, your page will automatically be updated. Ironically, that is also the “downside.”
Many users use text-based browsers such as Lynx, turn off the automatic loading of images, or use text readers due to physical impairments. In any of these instances, images can not be displayed, resulting in a placeholder being displayed or the text reader attempting to interpret the image. To avoid these problems, you should specify an alternate text explanation of the image. To do so, include the option ALT within the IMG tag (the text alternate should be enclosed in quotes):
<IMG SRC=”http://tutorial.webaccessories.org/photos/picture.jpg” WIDTH=89 HEIGHT=90 ALT=”This is a picture of a Holstein cow”>
About Images
Most of you will want to add at least an image or two to enhance your Web page. Images can cause your page to load more slowly, so you should take special care to choose them carefully so that they enhance and explain your textual information rather than just adding special effects to your page, and are ideally formatted and created for use on the Web.
Images used on the Web must be in “.jpg,” “.gif,” or “.png” format (This tutorial will focus on the gif and jpg formats). Each of the two graphics formats has its own special use—.gif formats are used with line art, images with large blocks of the same color, and black and white non-blended images; .jpg formats are used for four-color photographic images or those images with shades of gradient (such as a black and white or sepia photograph). Both formats compress your image into a smaller size, but it’s important to use the one best suited for the image type. Because of the way the compression occurs, using the .gif compression, for example, to compress a photograph will actually INCREASE, rather than decrease, the file size.
The toughest part of using graphics is deciding exactly what type of image you want to include in your page.
The more time you spend with pencil and paper in designing the look and feel of your home page, the faster and more accurate the actual creation/finding of your graphic images will be. You should read through your text and decide where you would like to place images AND WHY. Just because you CAN use images in your home pages, doesn’t mean that you necessarily SHOULD. Make sure that images enhance and supplement your text and are not just there because it’s possible.
