JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Specifying Size for Speedier Viewing

When a browser gets to the (X)HTML code for an image, it must load the image to see how big it is and how much space must be reserved for it. If you specify the image's dimensions, the browser can fill in the text around the image as the image loads, so that your visitors have something to read while waiting for the images.

You can either use your browser or your image editing program to get the exact dimensions of your image.

To find the size of your image with your browser:

1.
Right-click (in Windows) or Control-click (in Macintosh) the image. A contextual pop-up menu appears (Figure 5.12).

Figure 5.12. Right-click or Control-click the image in the browser to make the contextual pop-up menu appear. Then choose Properties (or Get Image Info).


2.
Choose Properties or Get Image Info (depending on your browser). A box appears that shows the dimensions of your image, in pixels (Figure 5.13).

Figure 5.13. A box appears (its appearance varies depending on the browser you're using) that shows the size of the image in pixels.


To figure out the size of your image with Photoshop or Photoshop Elements:

1.
Open the image in Photoshop or Photoshop Elements.

2.
Make the document window wide enough so that the document info ("Doc") bar is visible in the lower-left border of the window.

3.
Hold down the Option key (or Alt on Windows) and click in the document info bar. A small box appears with information about the image, including its size (Figure 5.14).

Figure 5.14. In Photoshop, Alt or Option Click the document info bar at the bottom of a document window to see the image's properties. (If the document info bar doesn't show, make the window a little wider.)


To specify the size of your image for speedier viewing:

1.
Figure out the size of your image using one of the techniques described on page 92.

2.
Within the img tag, after the src attribute, type width="x" height="y", using the values you jotted down in step 1 to specify the values for x and y (the width and height of your image) in pixels.

Figure 5.15. If you specify the exact height and width in pixels, the browser won't have to spend time doing it and will display the image more quickly.


Tips

  • The width and height attributes don't necessarily have to reflect the actual size of the image. For more details, consult Scaling an Image on page 94.

  • If you have several images that are all the same size, you can set their height and width all at the same time with styles (see page 174).

  • You can also find the size of an image in a browser by opening the image in its own window. The size is shown in the title bar (Figure 5.16).

    Figure 5.16. If you open an image directly in a browser (this is Firefox for Windows), its dimensions are displayed in the title bar.

  • In Photoshop or Photoshop Elements, you can also select the entire image and then view the Info palette for the image's dimensions.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→