Adding Images and Graphics

Size does matter

Oh, don't get all down in the gutter with me... I'm talking about the size of your graphics or images, and also file sizes. Let's take a look at these two areas and what you need to know.

Added image to web page

Depending on what you are trying to do with your page, the image size needs to be considered. Is the image the only thing you want a viewer to see? Or, will the page also include text. Here's a good starting point when you want to include text. Plan on your images being no larger than 600 pixels wide. This allows text to wrap around or alongside the image (you can see some similar examples within this site's pages). As with all designs, you might find you will want to experiment with the image size to make it look right.

But, one thing to note. You'll want to modify the image size with some sort of image editor and, unfortunately, use of those will be beyond the scope of this article. If you, instead, choose to modify the size of the image within the actual HTML image tag we'll be creating, the quality of the image can be reduced, sometimes to an unacceptable level.

Another thing to consider, and one more reason to use the image editor, is to keep image file sizes to a minimum. With the availability of high speed Internet connections to some, some Web designers seem to love putting as many gadgets and graphics on a page as possible, while paying little attention to the file sizes of each component. For the remaining 50% (or whatever the exact number is... you do the research) of Internet users stuck with either dial-up or other connections slower than 500 Kbps, these huge file sizes can make a page excruciatingly slow to download. The result is that many visitors won't wait for the page to load and will simply leave.

So, let's make sure we use the compression features available in many image editing applications so make the file sizes as small as we can while still maintaining an acceptable image quality. Also, either stick with JPEG or GIF image file formats when it is possible. Formats like BITMAPs can be very large, so remember to consider this.

I also know there are times when you might want to have a full-quality, original size photo available to your viewers. I would suggest using a smaller image (a thumbnail image) that links to a seperate page with the actual full image.

Text, image placement, and wrapping

To place the photo on your page, let's think about what kind of relationship we want text to have with your image. We could place the photo to the left, center, or right on the page, with text flowing around it. To do this, simply place the image tag right before the text you want the photo included with. You might find you need to move the tag up or down in a paragraph of text to get it to display the way you want. Also, you'll want to keep in mind that not everyone has the same sized monitor as you are using to design the page, so their browser window may be wider or narrower than yours.

Let's take a look at some code. The tag itself is similar to all the other tags you've already learned. We'll start with the < sign, then insert IMG (for image). You'll need to specify a source with SRC="You'll insert the URL address of your image source here". We'll examine some other tag attributes later so, for now, we'd close the tag with the > sign. The final image tag would look like this:

            	<img src="URL address for your image">

To place the image to the right side of a paragraph with text flowing around it to the left, simply add the ALIGN attribute with the direction "RIGHT". Your code would now look like this:

            	<img src="URL address for your image" align="right">

I'm going to get complicated on you, now. Some browsers seem to have problems in dealing with wrapping and may cover some of your text with the image with different window sizes. IE seems to be the guilty one, although using the <pre> tag will create a preformatted text that will not wrap either (you can see examples of that within these tutorial pages where some of my code extends onto an image). One thing you can do is create a little buffer zone around the image by adding two additional tags. The HSPACE and VSPACE attributes will allow you to add a little padding on the horzontal and vertical borders of the image, and I'd recommend 20 pixels as a safe starting point. All we need to do is add the attributes

hspace="20px" vspace="20px"
Here's what it looks like when added within the IMG tag:

<img src="URL address for your image" hspace="20px" vspace="20px" align="right">

We're going to add one more attribute that will help viewers be able to read the text on your page without having the text jump around as the image starts to load. By adding width and heigth attributes, we create a place-holder so the text shows up immediately where it is supposed to be once the image is loaded. But, here's where you can go wrong. You may be tempted to adjust the size of your image using these tags... Don't do it! Use the same height and width numbers as the image is and, if you need to change the image's size, go back to the image editor to do it (remember the image quality issue I previously mentioned?). So, let's say you actually edited a photo and its size is now 600 pixels wide and 400 pixels high. If we add the place holder attribute to this, the tag will now look liek this:

<img src="URL address for your image" hspace="20px" vspace="20px" align="right" width="600" height="400">

Before we go any further, I want to address the issue of accessibility. Some people using the Internet have handicaps that may necessitate their use of alternative types of browser applications. Some of these, for example, might be an audio screen reader type of application. One of the standards from W3C accounts for this with the ALT attribute, a way of using descriptive words to convey what a picture is. Those using an audio reader or text only browser will still be able to get the idea you were conveying with an image. Always try to use descriptive ALT attibutes to promote accessibility for all.

If we insert the ALT attribute and its descriptive words, the code might look something like this:

            	<img src="URL address for your image" hspace="20px" vspace="20px" alt="Describe your image here" align="right" 
width="600" height="400">

One last thing we'll add, but is optional, is a TITLE attribute. What it does is present the viewer with a text box when the mouse is hovered over the image. Sometimes this is beneficial to describe the image when you would rather not dedicate page text for this purpose. Hang in here with me! We're almost ready to see the image added to our page. Let's go ahead and add the TITLE so you can see what it looks like (Do think about whether this is necessary. Sometimes a text box simply gets in the way):

            	<img src="URL address for your image" hspace="20px" vspace="20px" alt="Describe your image here" align="right" 
width="600" height="400" title="Add your image title here">

Create and identify your sources

Before we can add an image to a page, just like the HTML page code, the image file has to be available from some source. If this is an image you have created and edited, you'll want to upload it to your Web server. Again, I can't go into all of those details because every Web server scenario will be different. Regardless, you will need to have a specific address to insert into your IMG tag so the image will display.

Once that is done, we are ready to insert the final code into our page. We'll use the code we've already begun, and I'll simply use one of my own images along with added text from this tutorial for example. Also, so you can find where I've added the image tags, look for them to appear just before the"Adding Images and Grpahics" and the "Text, image placement, and wrapping" header. I've used both right and left alignments. Rather than type out all the code on this page again, open the following page, right click on it, and select View Source to look at the page's HTML code.

Page with image added!

Obviously, this does not create the prettiest Web page on the planet. That was not my intention. My hope was to demonstrate some basic concepts that you can use when you actually do work on your own incredible page. Go do it! ;-)


More Resources

For more information on HTML, CSS, PHP and more, go to Virtual Nexus' Resources Page