Contents
Website Basics
How to Register a Domain Name
How to Select a Web Host
How to Plan Your Website
How to Design Your Website
How to Build Web Pages with HTML
Cascading Style Sheets (CSS)
How to Add Images to Your
Web Pages
How to Publish Your Website
|
 |
 |
 |
|
How to Add Images to Your Web Pages
Most web pages contain a mix of text and images, such as photos, illustrations, or artwork. To include images on your pages, you need to:
- Obtain or create your images
- Format your images for publication on the web
- Add images to your web pages using HTML and CSS
How to Obtain Images for Your Web Pages
If you’d like to use a specific image on your web page, you’ll need to use a clip art or stock photography resource or create the image yourself.
Clip Art Resources
Clip art refers to decorative illustrations and graphics typically used to highlight text on a web page, in a print newsletter, or in another similar medium. If you’re starting a website on birdwatching, for example, you can easily find dozens of clip art images of birds and related imagery for use in decorating your pages. To find clip art on the web, search for “clip art” or refer to www.clipart.com or www.clipartconnection.com.
Stock Photography Resources
Stock photography refers to photographs available for public use, either for a licensing fee or for free. Stock photo sites on the web typically have tens of thousands of images you can browse and then buy. To find stock photography on the web, search for “stock photography” or refer to www.veer.com or www.gettyimages.com. Both sites offer some free images.
Creating Your Own Images
Any image that can be converted to a digital format can be published online. To create web-ready digital images, you need a digital camera, which creates digital images on the spot, or a scanner, which digitizes existing print materials such as old photos, newspaper articles, or art.
How to Format Images for Your Web Pages
You’ll need to edit and format any image before publishing it online. The three criteria you’ll need to consider when editing images are:
- Dimension: The height and width of the image are measured in pixels. The maximum dimensions of any image should be 640 × 480 pixels.
- Resolution: The number of dots, or pixels, per inch (dpi) in your image. Use 72 dpi, the resolution at which most monitors will display your image.
- File size: The amount of data in your file, measured in kilobytes (k) or megabytes (megs). Keep your image files under 200k to make your pages load faster. Note that if you’re using a dialup modem to access your site, every 5k of file size you use adds about one second of downloading time.
The most popular digital image editing software is Adobe Photoshop, though you can find less expensive programs by searching for “image editor” at www.download.com. Once you’ve obtained image editing software, you’ll need to resize and save images for optimal online viewing.
Optimize Images for Your Web Pages
You can optimize the dpi, dimensions, and file size of your images by following the instructions below. Though these instructions apply to Photoshop, most other image editing software is similar.
- In the Image menu, select Image Size.
- A dialog box will appear where you can enter new values for the width, height, and resolution (dpi).
- You should also be able to preview what file size your image will have after you’ve saved it.
- Click OK.
Saving Images in the Correct File Format
When you save your image files, you need to choose one of the following formats:
- GIF: Best used for logos or simple graphics with little color variation or shading (pronounced jiff)
- JPEG (or JPG): Best for photographs and other detailed images (pronounced jay-peg)
| Acknowledgments & Disclaimer |
