<html>
<head>
<meta name="author" content="Stewart Weiss" />
<meta name="institution" content="Computer Science Department of Hunter College"/>
<meta name="description" content="Tutorial on using HTML"/>
<meta name="keywords" content="tutorial,HTML,images, resizing images">
<title>Web Page Tutorial Lesson 16</title>
<style type="text/css">
body {
background-color:#eeeeff;
margin-right:1.5em;
}
h1 {
color:FireBrick;
font-family:"Verdana";
text-align:center;
}
h2 {
color:FireBrick;
font-family:"Verdana";
font-size:1.4em;
text-align:left;
}
p, li {
font-family:"Verdana";
font-size:1.2em;
text-align:left;
}
code {
font-size:18px;
color:Firebrick;
}
table {
width:100%;
border:0px
margin-right:0;
margin-left:auto;
}
</style>
</head>
<body>
<h1>Lesson 16: Sizing Images</h1>
<p>
As you saw in <a href="page_05.html">Lesson 5</a>, images can be inserted into
web pages very easily with the <img> element. This lesson expands a bit
on how images can be controlled.
</p>
<h2>The Alt Attribute</h2>
<p>
<img src ="images/dog_with_cats.jpg" width="400" height="249" alt="Cats"
title="Who's the spy?" align="right" style="margin: 0.3em 1em"
/>
The <b>alt</b> attribute is used to define "alternate text" for an image. If
the browser cannot load the image for one reason or another, it will display
the alternate text. For example, the source file for the image to the right
is "images/dog_with_cats.jpg." If for some reason, the file cannot be loaded,
perhaps because the name is wrong or it is not in that folder, or we do not
have permission to open it, then the alt text "Cats" will be displayed
instead. If you have downloaded the zip file for these lessons, try renaming
that file and reloading this page to see what happens.
The value of the alt attribute is up to you.
It is required to include the "alt" attribute for each image on a page, to be
valid HTML. It also improves the display and usefulness of your document
for people who have text-only browsers.
</p>
<p>
The <b>title</b> attribute is an optional attribute that defines the text
that will be displayed when the cursor hovers over the image for a second or
two. It is used to provide extra information to the user.
</p>
<h2>Resizing Images</h2>
<p>
In general it is bad idea to ask the browser to change the size of the image.
The image, as it is stored in the image file, is a fixed size.
If the size attributes are set to different values than the image's actual
size, the browser will resize the image to the size that you specify, but the
image will most likely be distorted, and/or the quality will be worse than
the original. The actual fize is not changed -- only what appears on the
page. Therefore, it is best to match the size attributes of the img element
to the actual size of the image file.
You can find the actual size of the image in a few different ways.
</p>
<ul>
<li>
Import the image into a graphics application such as GIMP (which is free.)
In GIMP, select the menu item "Image/Image Properties." You will see the
width and height in pixels there.
</li>
<li>
Open the image file in your browser, right-click the image, then select
"Properties". You will see the width and height in pixels this way also.
</li>
<li>
In the file browser in your operating system (in Windows, Explorer, in
Linux with Gnome, Nautilus, on the Mac, the Explorer),
right-click the image, then select "Properties". You will see the width
and height in pixels this way also.
</li>
</ul>
<p>
The actual size of the above image is 400 by 249 pixels.
</p>
<p>
If you want to change the size of the original image file, you can do this
in GIMP by cropping the image to the size that you want, or by rescaling it
proportionally. You can also do this in Linux with the ImageMagick program.
</p>
<p>
The next four images are all obtained by resizing the image above. The first
two distort it. The second two preserve the proportions and either reduce or
enlarge it.
</p>
<table cellspacing="0" cellpadding="10" >
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="images/dog_with_cats.jpg" width="600" height="249"
title="Too wide" alt="Cats" />
<p>
<code>
<img src="images/dog_with_cats.jpg" width="600" height="249" />
</code><br>
In the image above the width is larger than the original, so there is
distortion.
</p>
</td>
<td width="50%" valign="top">
<img src="images/dog_with_cats.jpg" width="300" height="249"
title="Too narrow" alt="Cats" />
<p>
<code>
<img src="images/dog_with_cats.jpg" width="300" height="249" />
</code><br>
In the image above the width is smaller than the original, so there is
distortion.
</p>
</td>
</tr>
<tr>
<td valign="top">
<img src="images/dog_with_cats.jpg" width="200" height="125"
title="Shrunk down" alt="Cats" />
<p>
<code>
<img src="images/dog_with_cats.jpg" width="200" height="125" />
</code><br>
There is no distortion here. The reason it is a bad idea to shrink it
is that the actual file is the same size, so it will still take the
same amount of time to download, but it did not have to be so large,
so this is inefficient. It is also possible to get poor quality in
reducing an image due to something called "aliasing."
</p>
</td>
<td valign="top">
<img src="images/dog_with_cats.jpg" width="800" height="498"
title="Enlarged" alt="Cats" />
<p>
<code>
<img src="images/dog_with_cats.jpg" width="800" height="498" />
</code><br>
This image is not distorted, but the quality is poor. The browser
cannot in general enlarge images and retain good resolution.
</p>
</td>
</tr>
</table>
<p>
There are ways to resize the image and preserve the proportion. If you specify
just one dimension, either the width or the height, the browser will match the
other dimension to the oen you specify so that the image proportion is
preserved. Image width or height can also be expressed in percentages. If you
specify width=50% for example, it will take up 50% of the width of the element
in which it is contained.
</p>
</body>
</html>