In the last tutorial, I have asked if you were to insert a picture with dimension 1024 x 768 pixel 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.
If your answer it C, then you are correct. But most beginners will choose answer B, which will cause the slow loading time of the inserted picture as you can see on the right hand side picture below:
Left picture: 308px x 231px Right picture: 1024px x 768 px (scaled to 311px x 231px)
You can view the actual picture dimension displayed on your browser by right click on the picture and choose ‘Properties’ from the pop up menu.
So how do you reduce the picture dimension before inserting it on your web page? What software do you use? There are many picture editing software available, both paid and free software which can perform this job, but in this tutorial, we will use one of the Windows built-in software, known as ‘Paint’ to resize it’s dimension. Follow below screen shots for step-by-step instruction.
