Graphics can be a lot of fun, and make Web pages much more interesting. But there are three things that most beginners forget when working with Web images. If you follow these three tips, you'll have Web pages that will look good, and won't annoy your customers.
Keep Your Images Small
Small images download faster, and the faster your page downloads the more likely people will stay. A good maximum size for any one image on your page is 10KB.
Some ways to keep images small:
- use JPG images for photographs and GIF images for flat color pictures
- crop the pictures to only include the important parts
- with GIF images, use the fewest number of colors
- with JPG images, compress them as small as possible
- read as much as you can about optimizing images for the Web
Resize Images With a Graphics Program (Not the Web Browser)
Here's the scenario: You've taken a photo of your daughter that you'd like to put on your Web page. You took it with your 4 megapixel digital camera, and ended up with a photo that is 3072x2304 pixels in size. Now, even the widest computer monitor isn't going to display that at full size - and most Web browsers are at most 1200 pixels wide. So, you decide to make it smaller. A perfect size for your Web design is 400x400. So you write the following image tag and upload the file to your server:
<img src="daughter.jpg" alt="my daughter" width="400" height="400" />
But the image is still 3072x2304 pixels in size and 3.16MB to download. You've just used the Web browser to resize the image.
When you use the width and height attributes to resize your images, you slow down the time it takes the browser to render the page. The browser has to spend time determining how the display the image, and this is time that many people will simply leave your site. And this is true if you use the CSS width and height properties to resize the image.
When you resize your images with a graphics software program, you're changing the file size as well as the dimensions. This makes the image faster to download, and loses the rendering time required if the browser has to resize it.
Always Include Descriptive Alt Text
Alt text or alternative text is the text that appears in the alt attribute of your image. To write valid XHTML and HTML 4.01, the alt attribute is required on your images.
If your page has a lot of images, the alt text will display first, allowing your readers to know what is coming. Also, the alt text supports people with text browsers and audio browsers. Finally, you can use them to give more information about the image, such as copyright or credits.
How to Write a Good Image Tag
To include an image you use the img tag. For correct HTML there are two required attributes: src and alt. This tells the browser where to find the image. However, to make your pages usable, you should also include the height and width attributes, or use style width and height properties.
A good XHTML image tag looks like this:
<img src="graphic.gif" width="10" height="10" alt="alternate text" />
If you're writing HTML 4.01, remove the trailing slash:
<img src="graphic.gif" width="10" height="10" alt="alternate text">
