|
|
|
Performance Tips
Here are some tips and tricks that you can use to increase the performance of your web graphics.
-
Specify the Width and Height of images in your <IMG> tag.
Example: <IMG ALT="Susquehanna River" WIDTH=72 HEIGHT=50 BORDER=1 SRC="images/examples/base.gif">
There are many ways to determine the width and height of your images. Most graphics programs will let you view the image properties. Possibly the easiest way is to:
- Open your page in Firefox with your images included.
- Right click with your mouse on the image you want to get the width and height for.
- A menu will appear. Click on View Image.
-
Your image will be displayed. The width and height will be displayed in the title bar in the form WIDTHxHEIGHT pixels.
- Put the image width and height into your <IMG> tag and save your file.
- Click the back button on your browser and click reload. Your image will now have a width and height specified.
You can also view image properties in Internet Explorer:
- Open your page in Internet Explorer with your images included.
- Right click with your mouse on the image you want to get the width and height for.
- A menu will appear. Click on Properties.
-
A dialog box will appear. The width and height will be displayed in the dialog box in the form WIDTHxHEIGHT pixels.
- Put the image width and height into your <IMG> tag and save your file.
- Click Cancel to exit the dialog box and click reload. Your image will now have a width and height specified.
-
Reuse images.
A browser caches everything it downloads on the viewers computer, therefore, if the image is already downloaded it will load incredibly fast. This is especially useful for logos, buttons, backgrounds, bars, and bullets.
-
Keep file size small.
- On average, 10-20 Kb is the smallest an image will get, so this is ideal.
- 20-30 Kb is generally a good size.
- 30-50 Kb is acceptable, but not recommended unless it is a photo.
- 50+ Kb is too large unless you have a special purpose in having a large image.
-
Pixel Resolution.
Always set the pixel resolution to 72 dots per inch (DPI) for Web pages. This is the largest DPI that a computer monitor can display. Anything larger than 72 DPI is a waste of space and download time unless you have a specific purpose such as distributing an image for publication.
-
Presenting photo albums.
Use the thumbnail method. Create a small photo for your Web page, usually a GIF, that is then a link to the larger photo. This way the page loads fast and the viewer can then decide which photos they want to see enlarged.
|
|
|
|
