The image tag IMG is used to add an image to a page. At its most basic, it only needs a single attribute SRC to specify the location of the image file. However, there are several other attributes which should always be used with the image tag to improve the speed, accessibility and indexing.
Source: SRC
The source attribute, SRC, is the used to specify the image to be displayed. The format is SRC=”file.jpg” where file.jpg is a file in the same directory as the page. If the file is elsewhere on the server, you can use a relative link to give the path to the file, for example, SRC=”images/logo.jpg”. It’s possible to use a full URL to pull in an image from another server, but this technique should be used only in special circumstances, such as using cover images from Syndetics.
Height and Width Attributes
You should always add these for every image. They give your browser information it needs to load the page faster.
Always use the actual height and width of your image file. The browser will stretch or shrink any image to any specified height and width, but this can distort the image. Shrinking an image using height and width attributes, even if the correct proportions are maintained, is not recommended, because this still causes the server to send the full size image, which can result in slowness. It is much better to create appropriate thumbnail files for your webpages, linked to full-sized images.
Alt Text Attributes
The alt attribute is a text alternative that displays whenever the image doesn’t, for example if the user has images turned off, is using a text-only browser, etc.
Proper use of the ALT attribute is an important accessibility issue. Think about what is appropriate to display. A common mistake is using the word “logo” rather than the text from the logo, like the library name. Sometimes the best alt is alt=”*” or alt=””.
Title Attributes
This is not required, but can be a nice touch. The title attribute is used for additional information, in situations where the image is displayed.
The alt and title attributes also improve the way your site and your images get indexed by Google and other programs.
Put it all together, and here’s a proper image tag. Note that all the values are in quotes, and the image tag is written with a closing slash.
<img src=”https://www.noblenet.org/sis/wp-content/uploads/victory_waits.jpg” width=”200″ height=”264″ alt=”[Poster: Victory Waits on Your Fingers]” title=”An image from the National Archives and Administration” />
This is the tag used for the image below. You can use this to test how this works in different browsers, with images turned off and on, etc.
