Introduction to using images
News Items, Blogs, product features and feature articles add content to your website. They are created in a similar manner as described in this article.
New terms and concepts.
Pixels - is a unit of measurement usually of images or image rendering surfaces. The short form is px.
Image Aspect Ratio - is the ratio between the height and width of an image. For example an image which is 200px by 200px has an aspect ratio of 1. An image 800px by 600px has an aspect ratio of .75 or 1.33 depending on which measurement you put first. It is easier to use the value that is between 0 and 1, so always divide the small dimension by the larger one to calculate the aspect ratio.
When an image is resized, it is important to maintain the aspect ratio otherwise the image will appear distorted compared to the original.
Original image 1 - use your web browser to discover the its size. To do this right click on the image below and select properties.
This image has been place on the page without any size details so its original size has been used.
As viewed in Internet Explorer 8
As viewed in Firefox 2.
Please note the the width comes first when you view this information in IE. The Firefox information display also reminds you of the description you entered when the image was loaded.
The aspect ratio is 0.893, the width of the image is what is causing a viewing issue in this case, so resizing the image to width 470px or less corrects the problem. At width 470px the height should be 600 / 0.893 = 420px, as expected smaller than the width.
So here it is with the resizing information.
Now you can check the image properties again.
The next Activity is Using images within text.
