Adding an Image to a Web Page

When an image is ready for the web, you need to use the correct markup to add it to your page, but you also need to know where to store your image.

Image location

You can store images for your website in several places. Image storage works best if it uses relative URLs stored somewhere on the website with your other HTML files. You can store images in the same root as your HTML files, which gets confusing if you have a lot of files, or you can create a graphics or images directory in the root file for your website.

Relative links connect resources from the same website. You use absolute links between resources on two different websites. 

Here are three compelling reasons to store images on your own site:

• Control: When images reside on your site, you have complete control over them. You know your images aren’t going to disappear or change, and you can work to optimize them.
• Speed: If you link to images on another site, you never know when that site may go down or respond unbelievably slowly. Linking to images on someone else’s site also causes the other site’s owner to pay for bandwidth required to display it on your pages — on another site!
• Copyright: If you show images from another site on your pages, you may violate copyright laws. If you must do this, obtain permission from the copyright holder to store and display images on your website.

Using the <img> element

The image (<img>) element is an empty element (sometimes called a singleton tag) that enables you to specify the place on the page where you want your image to go.

An empty element uses only one tag, with neither a distinct opening nor a distinct closing tag.

The following markup places an image named leaf.jpg, which is saved in the same directory as the HTML file, between two paragraphs:

The output is displayed as follows in the browser:

A web browser replaces the img element with the image file provided as the value for the src attribute. The src attribute is like the href attribute that you use with an anchor (<a>) element. The src attribute specifies the location for the image you want to display on your page. The preceding example points to an image file in the same folder as the HTML file referencing it.

---