1. Technology

Adding Web Graphics

Tips for Putting Images on Web Pages


Web images are an important part of your web pages. In order to make sure they don't cause your pages more problems there are a few rules of thumb you should be aware of.

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 images is 10K. Plus, search engines prefer sites that load quickly, so keeping your images small is the first step to making them faster.

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

Resize Images with Graphics Software Not the Browser

When you use the width and height attributes to resize your images, you increase the amount of 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. Speed is not just affected by image sizes, and the same rules apply to rendering time. The faster you can get your pages to load, the better.

Always include descriptive alt text

Alt text using the alt attribute is required for valid HTML. But it also makes your pages more accessible. Alt text displays when the image hasn't downloaded yet, or if there is a problem with the download.

How to Add Images to Your Pages

To include an image you use the IMG element. There are two required attributes: alt and src. The alt attribute adds alternative text when there isn't a caption or other visible alternative. The src is the source of the image file. It must be a valid URL that points to a GIF, JPG, or PNG image.

There are also a few attributes to improve the image element: height, width, title, usemap, and ismap. These add more functions to your images and help the browsers render them more quickly by allocating the space in the window right away.

A good image tag looks like:

<img src="graphic.gif" width="10" height="10" alt="alternate text">

Read more about Web Design and HTML in the Most Recent Articles

©2014 About.com. All rights reserved.