Smashing Html5

Chapter 9: Images

One of the most exciting features of HTML5 is the ability to use Scalable Vector Graphics (.svg) files. Artists who use programs like Adobe Illustrator that create vector graphics can save their files as .svg files and put them right into their Web pages. Because .svg files contain vector graphics, images can be made larger or smaller without losing their resolution as bitmapped graphics do. However, you still can use your favorite bitmapped graphics in .jpg, .gif, or .png format for static display.

This chapter seeks to clarify using graphics on the Web in terms of the main types of images that are likely to be used, how to place them where you want on your Web page, and how to optimize them for Web use. Much of this chapter, out of necessity, must use graphic applications that you may not have. These applications include Adobe Illustrator, Adobe Photoshop, and Adobe Fireworks. However, you can substitute other applications you may own, such as Microsoft Paint or Corel Draw. Finally, for drawn graphics and photographs, you’re going to have to rely on your own skills, both in terms of artistic abilities and ability to use graphic drawing programs. (In a pinch, you can download public-domain image files from the Web in the file type you need.)

The Basics of HTML5 Image Files

A fundamental truth about graphic files on the Web is that they have weight. Weight, in the context of an HTML5 page, refers to file size measured in terms of the number of pixels stored ...