HTML5 24-Hour Trainer

Chapter 10. Working with Images

Images, along with text and links, are one of the three key components of web pages today. Like typography, graphics on the web are limited when compared to print, but the ability to use images as both foreground and background elements goes a long way toward reducing those limitations. In this lesson, you learn which graphic formats are appropriate for the Web as well as the proper code for adding the different types of images to your web designs. Common image techniques — including alignment, text wrapping, and links — are also covered in this lesson.

UNDERSTANDING WEB IMAGES

Images on a web page are separate files that are linked to the HTML source code. Unlike text and CSS styles, you cannot embed an image into a web page; every image is an independent file. This concept is an important one to keep in mind for two reasons. First, you must remember to upload all files — including all images — when posting a web page with graphics online. Second, your images should be optimized for the best possible picture quality at the lowest possible file size. The first step in optimizing your graphics is to choose the proper format for the image.

Graphics on the Web can come in three formats: GIF, JPEG, and PNG. Each format has its own special properties and uses.

A GIF (Graphics Interchange Format) image consists of 256 colors or less and is best used for graphics that have large areas of flat or limited colors, like logos and illustrations. GIF images can also ...