Having pictures or images on your web pages will definitely enhance the appearance of your web site while reflecting it’s profesionalism.
First, please view below two pictures on the left and right, do you notice any differences ? (Hint: Pay close attention on how long does it take for each picture to be displayed on your browser)
You won’t notice any differences once the pictures has been fully loaded on your screen, but if this is the first time you view this page on your browser, you will notice the picture on the right appear at least 10 times slower then the picture on the left, even though both of the pictures appear to be the same size.
When you have picture on your web page, you would want them to appear to the viewer as fast as possible, and if you have inserted the picture using incorrect method, it may appear as the picture on the right in the above example. This is a common mistake done by many beginners, and you would certainly want to avoid it.
Back to the two pictures displayed above, the differences in time taken for the pictures to be displayed is due to it’s file size, measured in bytes of kilobytes, this should not be mistaken with the displayed size, which is how big or small they appear on your computer screen. Though the above two pictures has the same displayed size, but the right picture is bigger in file size compared to the one on the left, hence it takes longer time to be displayed on computer screen.
In our following tutorials, we will look at some basic aspects in working with pictures on your web pages, such as basic copy and paste of pictures, resizing, cropping, and simple editing, and how all these can be done without using expensive software.