HTML Help Online - your definitive source for web design help

Putting in Images

To include images in a web page you would add the following line of code between the body tags:

Picture of forest in frame To put text like I did, next to the picture, you would add align="left" after the "forest.bmp". You could align the picture to the center or also the right side by just putting in "center" or "right". You will find more about positioning under the Positioning text and pictures. When you add a picture you would replace forest.bmp with the name of the your picture. You could also change the size of the picture by adding width="5" height="10" in the img src tag. That would make the picture 5 pixels wide and 10 pixels high. A good thing to make sure when making a web page is that the picture size is not too big. If it is too big then people will not wait for the website to load and will move on to another web page. Usually jpeg format pictures are not very big in size, but they are lower quality. Most of the time you cannot tell the difference in quality unless you study the picture.

Always remember to put ALT tags in your code for each picture so that people you view web pages without pictures on can find out what the picture is about. To insert a ALT tag you just add the code alt="Picture of forest in frame". To see an example of an Alt tag, hover over the forest picture until the description comes up in a yellow box next to it.

Pictures should not be too big when put on a web page. The size of the file should also be small so that it does not take a long time to load the picture. To test you can just put pictures on your web page and see how long it takes to download them off the internet. Usually jpeg and gif format pictures are small in size because they are a bit lower in quality then other formats such as bitmaps. You should use either jpegs or gifs on websites because they are faster to load and almost the same quality. Some picture editing programs like Adobe Photoshop have options where you can "Save for the Web" and make pictures into smaller files.