Styling Web Pages with CSS: Working with Images
- Prepare Images
- Float Images
- Place Images
- Add Background Images
- Extra Bits
This chapter is from the book
This chapter is from the book
This chapter is from the book
Images convey an important amount of the message of your Web site. Indeed, for some sites, images tell virtually the entire story of the site. For our Alpaca Repo site, we’re using images sparingly, to illustrate the text, rather than making images the star of the show.
In this chapter, we’ll first go into a little detail about preparing images for the Web. Then we’ll show you how you use CSS to position images on your Web pages, as with the photo and caption floated to the right on the page shown below. And finally, we’ll go through the rules we created to place the images on our pages.
)
Prepare Images
When you’re working on your sites, you’ll need to have a good image editing program available to prepare your images for the Web. That preparation will take three steps:
- Resampling the image so that it is at the proper resolution for the Web.
- Resizing or cropping the image so it is the right size on your page.
- Saving the image in one of the three Web image formats.
The first step, resampling, is important, because Web graphics are inherently low-resolution, being designed to be viewed on-screen. There’s no need to have photos on your site be more than the resolution of the screen, which will be between 72 and 96 dpi (dots per inch). The extra resolution is wasted, and higher-resolution photos have larger file sizes, which will make your Web page load more slowly. So if you have photos taken by a digital camera, which is usally much higher resolution, you should reduce the resolution with your graphics editor.
Reducing the resolution will usually change the width and height of the picture, depending on your image editor. Many editors allow you to see how resolution changes affect image size.
In this Photoshop dialog, changing the resolution for a digital photograph from its native 180 pixels/inch to 72 pixels/inch proportionally changes its width and height, too.
)
)
Once you have the proper resolution, you should crop or resize the image to show only the important part of the image. Here, we’ve selected the area we want with the crop tool. After reducing the resolution and cropping, the image is the size that we want.
)
Finally, save the image in one of the three Web graphics formats: JPEG, PNG, or GIF. See the extra bits for more details on these formats.