Computer Tips / Web Design / html image tag
Home | Computer Tips | Home DIY Tips | Safety Tips | Fun Facts                                                                                                 stolons: Worklooker | Monkeydoit


How to Use a HTML Image Tag <img>

The HTML image tag <IMG> is easy to use

Carefully chosen, original images, increase the value of your web pages and will tend to keep visitors on your website longer. Images enrich web pages bringing them to life for your audience. They are also useful as supplements to your written words.

Images are easy to insert into HTML as stand-alone elements within the body of your HTML document. The <img> tag element defines an image and has no closing tag unless using XHTML, in which case it would appear like <img />. In both cases, image attributes are required for the tag to function properly and are explained below.

Image attributes are contained within the <img> tag. Here is an example of an image tag with attributes src, width, height, and alt applied:

<img src="images/YourImage.gif" width="261" height="137” alt="Photo of Myself">

Many consider the attributes shown above to be the essential attributes everyone should use even though they are not all required for images to display. The src, which is the image file location on the web server (or URL relative to the HTML document you are working with), is in fact the only required attribute.

Figure 1:
How to get image properties in Windows using View
image properties in Windows using View

Icons in View set to display as Tiles inside a folder, will show basic properties for an image like size:
basic properties for an image like size

Consider the reasons why the other common attributes are so important:

The width and height attributes let the browser know the size of the image to be displayed in advance of the image actually loading, thus optimizing page load time for your visitors. If it's difficult for you to locate the image size, you can quickly gather this information using Windows by viewing the file itself inside any folder. You can then right-click inside the folder to get contents view options for that folder. You then can choose to display contents as "Tiles".

The alt image attribute is important for usability purposes. Visually impaired people that utilize text-to-speech browsers (assistive technologies) cannot see images on your website and require that alt attributes be present to know the purpose of an image. Likewise, there are users that may turn off images in their browsers or use hand-held devices that can only view text. This is sometimes the case for individuals focused solely on doing research. Alt text is displayed for these users so that images don't appear as blank spaces. Also, search engines may use this information to help determine the relevance or value of your web page.

Tip: If an image's purpose is simply decorative, you can place empty quotes for the alt like alt="" - text-to-speech browsers will simply skip over the image.

Other less common image attributes are not described here. For more information on other attributes:

http://www.w3schools.com/tags/tag_img.asp

http://htmlhelp.com/reference/html40/special/img.html



comments powered by Disqus