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
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 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:
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