HTML and CSS —

Adding width and height Values

The next thing you'll want to do for your image is add width and height values. This actually assists browsers in rendering images more efficiently, so it's always a good idea to add this information.

You can find the image's width and height in a couple ways. The first way is that you can look for it in your imaging editor (see Figure 3-2).

Figure 3-2. Look for the width and height in pixels for your imagehere, Photoshop displays the width and height at the top of the Image Size dialog box.

Another way to find width and height is to open the image itself in your browser.

Figure 3-3 depicts the image itself (not the HTML file), and you can see in the title bar that the width and height are displayed.

Figure 3-3. I opened the image in my browser, and the image width and height appear within the browser's title bar.

NOTE

Not all browsers have this feature, but most common ones do.


When you've got the image dimensionsin this case, 250 pixels wide by 188 pixels highyou can place it into your image markup:

<img src="photo.jpg" width="250" height="188" />

NOTE

You should always include the correct width and height. If the width and height values are larger than the actual image, the browser will stretch the image to make it fit. If you note smaller values, the browser will squeeze the image into the smaller size, scrunching it up.