Ok, finally we are back to images. In my introduction post, I used the following tags to implement the image.
<img src=”van.png”>
Well, while this works it is not a best practice. I used it to keep things as simple as possible to start. In this post I’ll detail the best practice for incorporating images onto a web page and how to integrate it with surrounding wording.
I’m going to make use of a different image, floral.png and Lorem Ipsum. Also I’m going to use inline styles to control the appearance. As you remember from the introduction post, there are two other methods, internal and external. On internal, the styles are in the same web page. While external the styles are in a separate document.
The img is the tag designation for an image. The src part is for the directory or location of the image. The directory/location must be enclosed in quotation marks. If there are not any wording in front of the image name (floral.png), then the image is in the same directory as the web document. Although, the image does not have to be in the same directory, in fact it can be in any accessible location, including the internet. We will have more discussions on the file systems and routing in future post.
The next thing you want to do is enter the size of the image. This will help the image load more quickly. The image size will typically be in pixels and the first number is always the width and the second one the height, i.e. 300 x 225 pixels.
<img src=” floral.png” width=”300″ height=”225″ />
Next, we enter the alt information. This wording will appear on your screen while the image is loading, if it does not load quickly. It will also remain on the screen, if for some reason the image does not load.
<img src=” floral.png” width=”300″ height=”225″ alt=”Floral arrangement” />
Now, we enter the title information. This wording is a tool tip and will appear when the cursor is held over the image. It can be the same wording but not necessarily the same as the alt wording.
<img src=” floral.png” width=”300″ height=”225″ alt=”Floral arrangement” title=”Our new floral arrangement” />
You can use the width and height entries to have the image appear on the web a different size than the original. Reducing the size is not a problem, but be very careful when increasing the size as the image may lose some clarity. This is an inherent problem with pixels. Make sure to maintain the same ratio of width to height, otherwise the image will appear distorted. Even though changing the size of the image is possible, it’s still preferable to start with the image the size you need.
This changing size action will not alter the physical dimension of the original image, but merely how it appears on the web page. This is a non-destructive modification and you can change it as many times as you like.
Now, we’ll show some images integrated on a web page.
The first shows an unaltered image on a page. The align left causes the paragraph to wrap around the image.
<img src=”floral.png” width=”300″ height=”225″ alt=”Floral arrangement” title=”Our new floral arrangement” align=”left” />
The second is an image with spacing added around it. This spacing makes the web page more aesthetically pleasing. It can be done with padding or margins. I have used margins.
<img src=”floral.png” width=”300″ height=”225″ alt=”Floral arrangement” title=”Our new floral arrangement” align=”left” style=”margin: 20px” />
The third is an image with a simple, all be it wide, border. Using margin spacing allows the border to be immediately around the image.
<img src=”floral.png” width=”300″ height=”225″ alt=”Floral arrangement” title=”Our new floral arrangement” align=”left” style=”margin: 20px” border=”10″ />
The fourth has padding added to the last web page, for comparison. Not so good, huh.
<img src=”floral.png” width=”300″ height=”225″ alt=”Floral arrangement” title=”Our new floral arrangement” align=”left” style=”margin: 20px; padding: 20px” border=”10″ />
The last web page is with the image size reduced.
<img src=”floral.png” width=”200” height=”150” alt=”Floral arrangement” title=”Our new floral arrangement” align=”left” style=”margin: 20px; padding: 20px” border=”10″ />
What people are saying