Image Resources for website
Wallpapers
rchitectural Ornament—cultural and ornamental pattern backgrounds
AAA Free Backgrounds and Textures
Medical
Vesalius—medical and surgical images
Yale Center for Advanced Instructional Media—anatomical illustrations and case studies
Hardin MD, The University of Iowa, Medical Pictures—links to many medical images, organized by categories; watch for use statements
Public Health Image Library—search for photos, illustrations, and videos
Fotosearch—stock photo libraries for purchase; over 1500 medical images
Historical Anatomies on the Web—from U.S. National Library of Medicine; free to use except those donated privately, which must have express permission to use
Medical Clip Art
DermAtlas—nearly 10,000 dermatology images; also dermatology links and resources
Scientific Posters and Research Posters—have your scientific and conference posters printed from YOUR PowerPoint presentations! Quick, inexpensive, high quality
Health on the Net Foundation—repository of thousands of medical images and videos for non-commercial use with copyright attribution
Special Effects
Magical Moments by Randy Wang
FlamingText—site allows you to create custom images
bellsnwhistles—animated graphics, applets & javascript
Merry Christmas from the Circle
Icons
Celine’s Original .GIFs
4YEO—original graphics, fonts, and animations
Absolute Web Graphics Archive—numerous buttons, balls, phrases, symbols, etc.
GraphxKingdom—general clipart resources
Awesome Clipart for Educators—anything and everything; updated weekly!
Photos
MorgueFile—free image reference materials
FreeFoto—free photographs for non-profit use
GReat Images in NASA (GRIN)—search for thousands of high quality, historic images from NASA
Pics4Learning—copyright-friendly images for education
Botanical Society of America—online image collection for educational uses
Stock.Xchange—free photographs submitted by thousands of “photo addicts”
Others
Steve Aguilera—commercial: on-line gallery; great “Web friend”—tell him I sent you!
Brilliant Button Maker—make your own Web buttons!
Graphic Garden—thousands of cute country graphics; fee but well worth it
Webshots—photos for your desktop
Image Tools
Picasa—a free download utility to help you locate and organize photos on your compute
Sharpcast—synch photos between your computer, web and phone
Phanfare—create online photo albums and slidehshows
Introducing the book—view this video of the “help desk” for the first book
Locating Images
The possibilities for locating images are not endless—but there are quite a few!
If you enjoy the “hunt,” you may choose to surf the Internet for images. You will find that images on the ‘Net range from buttons to personal line art to full color photographs. I have included a “starter” list in the Web by Design Resources for you. If you choose to surf for files, try using a keyword and the word “image.”
For example, to search for images of eagles, I might use Dogpile and the search terms “eagle image.” Google has an Images search option that will allow you to easily search just for images.
If you find an image on a home page that you wish to use, point your mouse cursor to the image. If you are using Windows, right click; if you are using a Mac, point and hold the mouse button. Then choose “Save File as”—Now it’s yours to use!
CAUTION! You MUST be aware of copyright issues when using other people’s work. You will find that some sites clearly explain that their images are for use in home pages. Others will state that you can use the images but must leave (or place) a copyright statement with/on the image. More often than not, however, you are on your own when it comes to retrieving images or other work from the ‘Net. Just because it is easy to get and use, doesn’t mean it is ethical to do so.
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.
