HTML: Sizing an Image for a Page

Blog 1

To insert image elements into html code, there are a few things that should be considered. You want your content to relate in a cohesive way. Images should be chosen based not only on what the image is of, but also the prevailing colors and textures or patterns in the image. The colors may need to be edited so it stands out less from the other page content. The page content may need to be adjusted to fit the image, depending on how much flexibility there may be concerning image choice. The shape, size, resolution, location, brightness, saturation and much more can all come into play. However, there is one attribute that I tend to gravitate towards first.

Size is important in the image/content relationship. I find that size plays a role that can quickly change my reasoning on whether or not I will keep or scrap any particular image. The size of an image is generally defined in the html code in one of two common ways: by setting the width and height attributes (which can be difficult to keep dimensions correct), I usually use pixels to set this but, there are more than one unit of measurement that can be used, or by setting the width attribute, using a percentage (which sets the width based on percentage of space horizontally measured across the containing element of the image).

Below is the image I will manipulate to demonstrate these image sizing options:

Here is a code sample with the resulting image. It displays what happens when either the height or width attribute is changed and not both attributes proportionately:

	<img src="../images/portrait-ex.jpg" 
		width="318" 
		height="777" 
		alt="Young woman." 
		title="Young woman.">
				

The images height attribute was raised but not the width, resulting in a vertically stretched, distorted image.

Now, below is a code sample where the resulting image is stretched horizontally.

	<img src="../images/portrait-ex.jpg" 
		width="618" 
		height="577" 
		alt="Young woman." 
		title="Young woman.">
				

And finally, here is my favorite way to manipulate the size of a image, by using only the width attribute and setting it to a percent.

	<img src="../images/portrait-ex.jpg" 
		width="78%" 
		alt="Young woman." 
		title="Young woman.">
				

This way of manipulating an image element in an html page allows the image to change size within the window without the proportions becoming distorted (as long as the containing element also changes). To see what I mean, resize the browser window and watch what happens to this example. If the containing element is the body, there will be not problems with the image resizing as needed. However, the image may be subjected to other rules depending on the containing element.