• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 3. Adding Images, Media, and Scripts > Adding width and height Values

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 image—here, 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 dimensions—in this case, 250 pixels wide by 188 pixels high—you 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.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint