Pixel – The Unit Of Dimension Measurement

If you want to display pictures on your website, such as those taken from your digital camera, you can insert them easily using HTML editors such as FrontPage or Kompozer, but before you proceed inserting pictures, you should determine  what is the dimension of the picture you are inserting, whether or not it fit into the available space on your web page.

Understanding picture dimension:

The dimension of pictures are measured in ‘pixel’, which is the smallest unit displayable on a computer screen. For example, below shows a picture with the diminsion of 308 x 231 pixel.

pixel-01.jpg

Pixel is also used as the measurement unit of a web page, typical web pages has the width set between 600 to 900 pixel, so if a web page has the width of 800 pixel such as the one you are currently looking at now, inserting a picture that has a width of more then 800 pixel will cause the picture being displayed out side the available area on the web page, which looks ugly and not professional.

With the common availability of digital camera nowadays which has typical specification of resolution ranging from 1 megapixels up to more then 10 megapixels, most photos taken has the dimension of more then 800 pixel in width, especially if the camera is set to take high resolution pictures. (Note: Resolution for digital cameras means how much picture details the camera is capable of capturing, the higher the resolution, the finer picture details it can capture, resulting bigger dimension in pictures taken)

To identify the dimension of pictures stored on your computers, use one of the following methods:

 pixel-02.jpg

pixel-03.jpg

The above pictures has dimension of 1024 x 768 pixel, so if you were to insert one of these pictures on your web page that has the width of 800 pixel using a HTML editor such as FrontPage or Kompozer, how would you do it ?

A) Use ‘insert’ function in FrontPage or Kompozer, save the web page file before upload it to server.

B) Use ‘insert’ function in FrontPage or Kompozer, then resize the picture to the desired dimension.

C) Reduce the picture dimension using photo editing software, then insert it using FrontPage or Kompozer.

 

Find out which should be the correct answer in our next tutorial and the detail steps how it is done.