Nearly all Web pages will contain images to make the page more visually appealing. We see corporate logos, banner images, and navigational icons, as well as images in the body of the document to convey information and to add visual appeal.
It is common to see images used on Web pages as horizontal lines, dividing a page into different sections to group related topics. Images are also frequently used instead of solid black bullets to call attention to an ordered list. An image can be used as a background for text. An image can serve as the background for an entire Web page.
Images can increase the weight (total file size) of the Web page, making pages load slower. Therefore, we need to be very careful to only use images if they will enhance the page appearance or convey useful information. It is also important that we are mindful of image file sizes.
As we create a page layout, it is important to strike a balance between the amount of screen space used for text and that used for images. Also, balance the layout of the Web page so that images are not all at the top, or all at the bottom. In order to make the text around images easy to ready, we want to leave margin space between images and the surrounding text. In order to avoid a crowded look, plan areas of white space on the screen.
Image File Formats
The three most common file formats for images on the Web are:
- Graphic Interchange Format (.gif) - (pronounced GIFF with a hard g, or JIFF with a j sound), uses file compression to use fewer bits and reduce file size. Drawings, referred to as line art or clip art, are best suited for the GIF format since they result in a smaller file size and better clarity. Since GIF files support animation, we frequently see animated GIF images on the Web.
- Joint Photographic Experts Group (.jpg or .jpeg) - (pronounced jay peg), used to store photographs with millions of colors. Although we can convert from GIF to JPEG and from JPEG to GIF, since GIFs only have up to 256 colors, the conversion may not be desirable.
- Portable Network Graphics (.png) - (pronounced ping), used for line art. Since PNG files can contain more than 256 colors and often provide better image quality in a small file size. The PNG image file formats uses the best file compression. PNG files do not support animation.
You're probably familiar with Windows Bitmap, standard Windows graphic files which have the extension .bmp, and Tagged Image File Format, standard graphic image files often used by scanners and digital cameras which have the .tff extension. Because these files tend to be very large, we should avoid using these types of images on our Web pages.
Where to Obtain Images
Many Websites offer free clip art and photos in .gif and .jpg formats. However, free images often have copyright restrictions regarding commercial use. We can buy images and clip art from image services, or find them in Office suites such as Microsoft Office. We can create our own images with a digital camera, or use the digital camera on cell phones. Digital cameras these days create very large files and we must resize these pictures before we use them on the Web. Expression Web makes resizing these images very easy.