An inline image is a graphic image that is inserted into a web page to add visual appeal, provide information or to represent a hyperlink. Inline images are usually in GIF, JPEG or PNG formats. They are incorporated into a web page using the data URI scheme.
Data URIs allow the embedding of small sized data that can be instantly retrieved by the browser. Inline images are retrieved by the browser along with the HTML and displayed as part of the web document. For the browser to be able to retrieve and display the images without too much time and trouble, it is advisable to use small-sized inline images.
Larger images would slow down the loading time, and cause the site to take a long while to appear on the screen. Most web visitors don't have the patience to hang around to see it happen. This would adversely affect site traffic.
HTML inline images are sourced from the server of the website in which they are to be displayed, or included from other external servers. Using inline images from external sources is a matter of contention as this can be done without permission. The img tag is used to insert inline images into paragraphs and headings in the web page. The img tag cannot be used in a free-floating form. It has to be enclosed inside another element.
The required attribute of the img tag is the src attribute. The src attribute specifies the web address or URL from which the browser can retrieve the image file. Apart from the src attribute, HTML inline images can be defined by three optional attributes. These are alt, align and ismap.
The alt attribute provides an inline image text alternative. So, in case the viewer's browser does not support graphics, the viewer will see the text in place of the image. Using the alt attribute is highly recommended.
The alt attribute value can be an empty string. For example, if there is a decorative image, it is not necessary to provide alternative text for it. Therefore, the alt attribute value can be left blank.
The inline image style can be set with the align attribute. The align attribute tells the browser where the inline image must appear in relation to the text on the web page. The inline image can be aligned with the top, middle or bottom of the adjacent text on the web page.
With the ismap attribute, an inline image can be marked as an active image map. This means that different parts of the image can be made to produce different actions whenever someone clicks on the different parts. For example, if there is an inline image showing Earth and Saturn, clicking on Earth may lead to information about Earth and clicking on Saturn may lead to information about Saturn.
Unlike the alt and align attributes, the ismap attribute does not work by mere inclusion in the img tag. It requires some configuration done on the server. Some amount of programming knowledge may also be required.
