HTML Images
Web is fairly visual and so it is a given that as an HTML author, you would need to deal with images. HTML provides yet another element for adding images: the image element.
The image element is identified by the <img> tag. This tag has several attributes: src, alt, width, and height. The src attribute specifies the location of the image and the alt attribute provides an alternate text for the image. The alternate text is displayed for devices that cannot display images. As per W3C, it is a must to specify alt attribute with the <img> tag. The width and height attributes tell the browser the width and height of the image. The unit for width and height attributes is in pixels. Please note that the <img> element does not have a closing tag and so it is a void element.
<img src="location-of-the-image" alt="Text describing the picture" width=".." height=".." >
In the above format, we can specify the src into different ways. An example of this style would be src="./earth.jpg". This approach is known as a relative path. In this case, we specify the path with respect to the current page (the page that is loaded on the browser). The other approach is to specify the full path -- this style is known as an absolute path. An example of the absolute path would be src="http://www.codingbison.com/html/earth.jpg". We should specify the path as relative, if we are referring to images that are stored on the local website. Specifying absolute path is a good idea if we are pointing to an image that belongs to an external website.
Let us write an example that embeds an image using the src attribute to point to the location of the image. We use the alt attribute to add alternate text.
<!doctype html>
<html>
<head>
<title> Adding Images to an HTML page</title>
</head>
<body>
<!-- Example of an image tag. -->
<img src="./earth.jpg" alt="Planet Earth" width="150" height="150">
This is the planet Earth -- the only known planet in
the universe that supports life!
</body>
</html>
When we load the above example, we would see the output displaying the embedded image. Since alt text is displayed only when the device cannot display the image, we do not see the alt text in the below browser output.
Figure: Adding Images in an HTML page
When dealing with images, the browser has to download the image from the server as well. So, as content, they are not really inline with the page itself. Also, if a page has multiple images, then modern browsers can download them in parallel instead of having to download them one by one -- this reduces latency in loading multiple images on an HTML page.
One additional note. The image file in the above example has an extension of .jpg. This is a JPG file. Other popular formats at PNG and GIF. JPG format also has a cousin format: JPEG. JPG files are good for digital images with continuous tone images, like photographs. On the other hand, PNG and GIF formats are more suited for images with a few solid colors that have lines.