Adding Images

XHTML <img> Element <img src="mypic.jpg" alt="my text" /> Element Attribute Attribute Value Attribute Attribute Value Closing tag The src attribute supplies the name and location of the image file you wish to display. If no path is specified, the browser will expect the file to be in the same folder as the web page. The alt attribute determines what text will display in the web page if the image is not available. This is also what screen readers (for the visually impaired) will use. Get in the habit of naming image files in all lowercase letters and use underscores or dashes instead of spaces.

<img> height and width attributes <img src="sunset.jpg" height="600" width="800" alt="A beautiful sunset" /> By specifying the height and width attributes of an image, we help the browser display the image correctly on the page. We can use these attributes to make a large image appear smaller on the page. We can also make a smaller image appear larger on the page, but this is not recommended, as the image will look pixelated and of poor quality. When making a large image appear smaller on the page, be sure to keep the same ratio of height to width. If you don't, the resulting image will look "squished" when it displays on the page.

Determining the Height and Width: By viewing the properties of an image file in Windows, you can see what the width and height are.

Resizing the Height and Width: By dividing the height and width evenly, we can resize an image on our web page. <img src="sunset.jpg" height="300" width="400" alt="A beautiful sunset" />

Image Formats for the Web: The most common image formats for websites are (.jpg), (.png), and (.gif) extensions. While jpg files are used most often, the other two formats have their own advantages: Image Extension: jpg png gif Best suited for: Photographs Logos, Icons Animations Color support: Excellent Excellent Limited Supports transparency: û ü ü Supports animation: û û ü