Site Development
Downloads
Help!!
Home
The <img> TagYou put images on your pages by using the <img> tag. This tag is put in the <body> of your page and must always include a SRC attribute. SRC is the URL to the image file. The <img> tag has no closing tag. All of the information needed to place an image on your page will be placed in the attributes of the <img> tag. <img src="mypicture.jpg"> An <img>'s SRC works just like HREFs in <a> tags. The above <img> tag assumes that the page and the image are in the same folder. If the image were in a subfolder called "images", the new SRC would be: <img src="images/mypicture.jpg"> Don't worry so much about positioning your images right now. We'll discuss that in the next lesson. Web Image FilesIn the above example, we used a JPG or JPEG file. This is a popular compression format for detailed images, like photographs, that is widely used on the Web. Another popular image file format is GIF. GIF is more appropriate for drawings, logos, and less detailed images like "thumbnails". A newer format called PNG is a good alternative to GIF. Try to stick with these image formats and avoid the use of large bitmap images. If you need a good, free image editor, try out IrfanView. It's a very comprehensive image editor and completely free. It is important to use compressed images as much as possible to reduce the time the viewer has to wait for an image to download. You'll notice that on this site, almost no images are used, this makes the pages load much faster than if I'd used images. Try not to use large BMP (bitmap) images and try to keep the size and number of your images to a minimum. You can get all sorts of images for free on the web. Remember that some images are copyrighted and illegal to use without the expressed permission of the owner. You can easily copy images to your hard drive by hovering over an image and right clicking your mouse (just hold down the mouse button on Macs). Select "Save Image" from the pop up menu and the "Save As" dialog window will open. You can then rename the file as desired and select an image format. HEIGHT and WIDTHHEIGHT and WIDTH are used to tell the browser how big an image is so that the browser can allot space and lay out the text and other items on the page before the image loads. This lets the viewer get a head start on reading text without having the text move around as the images load. <img src="mypicture.jpg" height=50 width=100> The above tag tells the browser that "mypicture.jpg" is 50 pixels tall and 100 pixels wide. The browser can now make a square to reserve space for the image. This means that text on the page will not "jump" around as the image loads. The space will already be assigned. The HEIGHT and WIDTH attributes of the <img> tag are not used to size the image. If you need to resize your image, you should do so in an image editor, not with HEIGHT and WIDTH. HEIGHT and WIDTH aren't required, but are useful with pages that have text flowing around images. You can find out the HEIGHT and WIDTH of your images in your image editor. ALTThe ALT attribute lets you put text in an image's position "box" that can be read before the image is loaded. This text also appears in the little "Tool Tip" pop up box that shows up when the viewer hovers his mouse over the image. Generally, if ALT is used, it is a description of the image. <img src="mypicture.jpg" height=50 width=100 alt="My Picture"> The above ALT attribute would load the text "My Picture" as soon as the space for the <img> was assigned. It would also appear in the little Tool Tips box when the mouse hovers over the image. Try this out on the avocados below by putting your mouse cursor over the image. "Avocados Mmmmmm."  Another good use of ALT is to include a lot of information about the image. This makes for a big pop up box that includes details you might not feel like including in your regular page. Hover over the avocados below to see this in action. It takes about a second for the Tool Tips box to appear. Don't make these longer descriptions too big because the box disappears after a few seconds. If the pop up boxes annoy you, don't include an ALT attribute. Many webmasters would lead you to believe that the ALT attribute is essential, but it's not. I recommend using ALT for very large or slow loading images or for a pop up description if one is needed. This lets the viewer determine if they want to wait for the image to load or not. |
To Next Beginning HTML Lesson
Back To Beginning HTML Index