|
Topics on this page:
- The width and height attributes
- Determining width and height
The width and height attributes
It's not an absolute requirement to include the width and height attributes. In their absence,
the browser displays the image at it's normal size. But the browser can't determine what this
size is until it downloads the image. The browser retrieves the HTML file first and can begin
displaying it before it retrieves the images. If you don't specify width and height:
-
Netscape won't display anything on the page below an image until it can determine the
image's size. By specifying the width and height, Netscape can go ahead and display the
remainder of the page and your visitor doesn't have to sit and look at an empty screen
while the images get downloaded.
-
IE allots some space for the image and goes ahead and displays other content. But when
it determines the actual size, it has to rearrange things that have already been
displayed. Visitors will probably find it very distracting when things started popping
into different locations on the screen as the images arrive.
You will usually want to specify the actual height and width of the image, but you can
have the browser resize the image for you. This can be very useful for contorting a
spacer gif to whatever size you need, or to make a horizontal rule image stretch
across the whole page (width="100%"). Other than these cases, you should normally not
use height and width to change image sizes.
-
If you want the image to appear smaller, use a graphics program to change the
image size - the file size will be smaller. Using the browser to do the job requires
downloading the large file.
-
You usually can't get good results enlarging an image - either with the browser or
with a graphics program.
Determining width and height
OK, you have an image you want to include on your page, but you don't know what it's width and
height are. How can you determine these?
One way is to look at the image in a graphics program such as Paint Shop Pro or Photoshop. All
of these types of programs will show the dimensions. Many programs that display images - such
as ACDSee - also show the dimensions of the graphics.
Your browser can also tell you what an image's dimensions are.
For Netscape in Windows:
-
Open the image in the browser by choosing
File|Open Page and
navigating to the image with the dialog box.
-
The image's dimensions (width then height) appear in the title bar.
For IE in Windows:
-
Open the image in the browser by choosing
File|Open and
navigating to the image with the dialog box.
-
If you have a different program designated for viewing images, IE may open that
program to display the image. If IE displays the image itself, right-click on
the image and choose "properties".
For both Netscape and IE on the Mac:
-
Open the image in the browser. The image's dimensions (width then height) appear
in the title bar.
If you want to display the dimensions of an image on a web page:
-
For Netscape in Windows, right-click on the image and choose
view image.
The image will be displayed by itself, and its dimensions (width then height) appear in the
title bar. Use your "back" button to get back to the web page.
-
For IE in Windows, right-click on the image and choose "properties." If the width and
height attributes are included in the <img> tag for the image, those width and height
values are the ones displayed and may not be the natural size of the image. If the <img>
tag does not specify width and height, the properties box will report the natural size.
-
For Mac Netscape, place your cursor over the graphic and press down on the mouse
button until the pop-up menu appears. Choose
Open this image.
The image will be displayed, and the dimensions will appear in the title bar.
Use your "back" button to get back to the web page.
-
For Mac IE, place your cursor over the graphic and press down on the mouse
button until the pop-up menu appears. Choose
Open Image in New Window.
The image will be displayed, and the dimensions will appear in the title bar.
Close the new window to get back to the original page.
-
Alternate Netscape method (both Windows and Mac): Choose
View|Page Info.
A two-paned window opens that shows the URLs of all images on the page (among other things).
Click on any image URL to see more info in the bottom pane. This info includes the image's
dimensions.
|