Lesson Three

The simple way to include a photo is as follows: Using photos costs bandwidth, so try to use as few as possible. Any photos or diagrams that you do use should be compressed as much as you can get away with, but without going so far that they turn ugly and spoil the look of your Web pages. And this illustrates what happens to any text which precedes or follows the photo: the photo just behaves as if it is a giant word in the middle of a line of text. I have deliberately used the name of a photo which does not exist so that you can see how the "alt" text is used. You should always provide alt text for photos and diagrams in case they fail to load for some reason, but it is even more important to provide alt text to give blind people can get an idea of what they are not seeing: they use software which reads the alt text out to them.

If you use "p" tags in front of and after an image tag, then it displays like this:-

Diagram showing some common molecules

...so it's clearly better to use the "p" tags.

Same diagram again

There is however a neater alternative which allows you to "float" the photo at one side of the screen and to have the following paragraph starting to the right of it at the top corner. If the text is long enough it will eventually run underneath the photo as well. If you examine the source code, which you should of course be doing automatically by this stage, you will see how this is done. It is also possible to float a photo to the right of the screen instead, with the text sitting to the left of it. Because different browsers display things differently I am having to write more text than might actually be necessary just to be sure that there is enough here to guarantee that the text will end up running along under the photo as well, and I've changed the text size for this paragraph to make it overflow more easily. It is also possible to float one photo to the left, another to the right, and have your text in between them, again overflowing to run beneath them both if the paragraph is long enough.

Getting the height and width right takes a certain amount of guessing, but once the proportions look right you can make the image display larger or smaller by multiplying or dividing the two numbers by the same value, such as 1.2, 1.4, 1.7 or 2. Some values will result in lines appearing across the picture which won't show if you make it slightly bigger or smaller, so you just have to keep changing the size until it looks right. High resolution photos can look more blurred if you display them small than low resolution versions of the same image displayed at the same size, but there's not much point in using a high resolution image anyway if you're going to display it small. You should make your images as low in resolution as you can, though obviously without spoiling them: this reduces the size of the photo file, and you want to keep photo files small if you can because they are expensive to upload and download. This is particularly important if you have lots of visitors to your Web site because they will rapidly consume your upload bandwidth and may result in your site being disconnected from the Web for many days or weeks if it hits its data upload limit for the month.

Another thing you can do with an image is use it as a link to another page:-

Same diagram again

The normal reason for using a photo as a link would be to have a small, low-resolution version of the picture as the link, and it would link through to a large, high-resolution version of the same image: people will only click on the pictures which they really want to see full size, and that means you will upload less data to them (which costs you less of your bandwidth), and they will download less data from you (which costs them less of theirs). If you use an image which is not a photo, it will probably be a logo or symbol which indicates or states what it links to, and that may occasionally look better than an ordinary link, but plain, ordinary links are less expensive and most visitors to your site will prefer them).

Blank photo Blank photo Blank photo