How to Size Images for a Web Page

I said in the "How to do a Web Page" that sizing images was a little hard to explain and it is because of screen resolution. But, I'll get right to how to do it and cover the explanation later.

I use a lot of different images I call "Lines" on my web pages and except for the color they are all named the same so we will use our red line for this demonstration.

The "How to Do a Web Page" said the Code to insert an image is:...
<img src="images/ln-red-1.jpg" border=0>

The red line above in real size is 600 pixels wide X 4 pixels high and that is what is on the screen above.

We have not discussed the "border=" attribute so lets get that out of the way and we will change the "border=0" to "border=6" and that is shown below.

I never use the "border=" attribute and I don't know of any way to change the border color. I understand the border=0 was put in to stop a line from being drawn around small images when they are used in link coding to open a larger image.

On with Image Sizing, Control of width can be done two ways. One using Pixel and one using Percentage of Screen Space.

However, let me make you aware all images can not be resized because some images have writing in them and resizing in a Web Page distorts the writing in the image.

We will first use pixel setting and demonstrate it with this code:...
<img src="images/ln-red-1.jpg" border=0 width=400>
Note:.. with less line width some vertical height was lost

The vertical height can be controlled by adding the "height=" attribute as shown in the following code:...
<img src="images/ln-red-1.jpg" border=0 width=400 height=10>

I much prefer using a percentage code to control width of images because using percentage provides all Users the same view regardless of their Screen Resolution setting.

Using our Red Line again we will change the width attribute to a percentage and it will appear as follows:..
<img src="images/ln-red-1.jpg" border=0 width="50%">

Now we will add the height attribute while keeping the percentage setting and our code will look like this:...
<img src="images/ln-red-1.jpg" border=0 width="50%" height=10>

Now let us examine a picture images using the one that is on my personal home page.

We will first do so using only the image insertion code shown below:...
<img src="images/img-top1.jpg" border=0>

This image is actually 550 Pixels Wide and 175 Pixels in Height

Now we will add the pixel width attribute to make the image 650 pixels wide using the code shown below...
<img src="images/img-top1.jpg" border=0 width=650>

Note:.. Same as did the line images, once the width was changed so was the height to maintain the Aspect Ratio and now we have a dilemma with the height because is doesn't matter on a solid color like the line but, now we have to know what the height should be to maintain the Aspect Ratio of the picture.

But, let us take a guess and say make the height 225 and our code would be as shown below:...
<img src="images/img-top1.jpg" border=0 width=650 height=225>

Not a bad guess but, a check with an image program I use called LView indicated the correct height to maintain Aspect Ratio would have been 205 pixels in height and not the 225 we used.

Now let us make the image width 50% of screen width using the following code:......
<img src="images/img-top1.jpg" border=0 width="50%">

I don't believe is necessary to demonstrate another height setting because browser do not recognize a percentage setting using "height=" and the pixel height has been full demonstrated.

Bottom Line:... For solid colored images such as the Line I use I recommend the following code:...
<img src="images/img-top1.jpg" border=0 width="??%" height=??>

For Picture Images, I recommend controlling the width only and let the height take care of itself. So, I recommend using the following code on all Picture Images:..
<img src="images/img-top1.jpg" border=0 width="??%">

I recommend the percentage setting for all widths because it matters not the Resolution Setting, All Users will have the same view on the screen i.e. 80% on all screens if that is the width setting.

Keep in mind a picture with numbers or certain features can become distorted with a change in size so caution and verification by checking with the 3 different browsers of Internet Explorer - Firefox and SeaMonkey is recommended.

I don't think it necessary for me to get into explaining why using percentage width setting is best as related to Screen Resolution because I have already pretty well covered Screen Resolution and demonstrated the differences in images in another Web Page:..   HERE

Have a Question - Ask The Head Dunce by Clicking:...  HERE
Go To Part 1 Go To Part 2 Go To Part 4
  [   Current Page - TOP  ] [   Menu - Dunce's Corner   ]  
Copyright © 2010 by E. Ray Smyth