Using images in your webpages.

One of your best design elements may be a few carefully chosen, high quality and royalty-free stock photos.

  The right photos can add a touch of class to your webpages and give your visitor a visual "center of interest" on an otherwise plain webpage.

  Don't just get pictures of models in business suits. Decide what you want to project and use your imagination. You can create a sense of energy and enthusiasm with a few sports themed photos... inspire confidence with a photo of a doctor speaking to a patient... it all depends on the impression you want your visitors to get.

  Then run a google search for photos you can license and use on your website. it does not have to be expensive, just find one (or a few) high quality and royalty-free photos.

  Some types of websites can benefit from a few professional photos of the person (not an actor) who runs the business and/or photos that illustrate the benefit of your product. Real people, a real company, providing a real service... it inspires confidence and increases sales.

  Pages that take forever to load are the bane of web surfers the world over. One of the main design elements that effect loading time is the size and number of images on a page.

  This remainder of this page is primarily concerned with different things a webmaster can do to effectively speed loading times by manipulating image files.

  First, and most effective: Remove unnecessary images.
  Cool graphics, funny animations, assorted mouse-over effects.... they all eat up bandwidth and take time to load. If an image has no direct bearing on your product or service, if it does not enhance the visitors experience, then you can probably get rid of it.
  If you use a template with a lot of graphics, and your webpages load slowly even without your content, then consider changing to a leaner template.

  It does not matter how great your website looks, if only 30 or 40 percent of the people who surf in stay long enough to see it.

  Secondly, reduce the file size of the remaining images.
  You can shrink the size of your images without sacrificing much quality. Your website will load faster and you will use less bandwidth... Spinwave has a free online cruncher that can reduce .gif and .jpeg image file sizes up to 30%. You can reduce even more if you subscribe, but most images will suffer quality if reduced too much.
  If you have a lot of images to reduce, it may be worthwhile to subscribe.

  If you have a good image editing program, you may be able to take an image and reduce the total number of colors it uses, then re-save it... you may be surprised at how much you can get out of a program that isn't even designed to be a 'file size reducer'.

  Use the correct image file-type for the job. These are the most common on the web:

  GIF - Best for line-drawings, cartoons, animations and other simple images that only require (at most) 256 colors. Most GIF images can be saved with 16, 8 (or even 2) colors. This will dramatically reduce the file size. GIF is also the only file-type that supports a 'transparent' color and animations.
  If you make your own animated GIFs - reduce the number of frames and don't copy the background in every frame. Make the first frame a background without any objects that move, and put all animation in separate frames with transparent backgrounds.

  JPEG or JPG - Best for images that require fine details and millions of colors, like photographs. JPEG can be saved with different compression-percentages. A high compression results in a smaller file size but also reduces quality. Test several compressions for each JPEG image you want to use.

  BMP - these file types are sometimes huge - don't use them. Re-save in GIF or JPEG and reduce from there.

  PSP - Paint Shop Pro image. Fairly common in professional templates.

  One more thing - save your images with a resolution of 72ppi or they may display wrong on different monitors.

  Re-use the same images on different pages.
  This website has 12 images that are used over and over again, but the browsers only have to 'read' them once. After that, every time it displays an image, it just 'remembers' it and the image loads faster.

  Always use the Height and Width parameters in the image tags.
  The typical image tag looks like this:
  <img src="example.gif" width="64" height="64" alt="example" border="0" align="left">
  The height and width parameters tell the browser how much space to allocate to the image. That speeds loading time for the other elements in the page because the browser can position the image and the page elements that surround it before the image even finishes downloading.

  Use the smallest possible background images, or none at all.
  Look around the web... you'll notice that many popular websites don't even use a background image. Of those that do, most of them use an image that has been reduced as far as possible and it is probably around 100px high by 100px wide - at the most.

  If you use a pre-made template:
  Always check the template images... they may not have been run through a file-size reducer of any kind.
  Check the code to verify the use of height and width parameters too.

  One other thing:
  Your website looks great on your monitor, but with all the possible browser/system configurations there's no guarantee that it looks the same anywhere else... and it might not display right at all on some systems.
  Check your website on as many different systems as you can and enlist the help of other webmasters - you will find that most will give you the straight answers you need.