An inline image is a graphic image inserted into a web page to add visual appeal, provide information, or represent a hyperlink. Embedded images are usually in GIF, JPEG, or PNG format. They are embedded in a web page using the data URI scheme.
Woman doing handstand with a computer
Data URIs allow the embedding of small data that can be instantly retrieved by the browser. The browser retrieves the images inline along with the HTML and displays them as part of the web document. In order for the browser to retrieve and display the images quickly and without problems, it is recommended to use small inline images.
Larger images would slow down load times and make it take a long time for the site to appear on the screen. Most web visitors don’t have the patience to wait for this to happen. This would negatively affect website traffic.
Embedded HTML images are obtained from the server of the website on which they will be displayed or included on other external servers. The use of online images from external sources is controversial as it can be done without permission. The img tag is used to insert embedded images into paragraphs and headers on the web page. The img tag cannot be floated. It must be placed 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. In addition to the src attribute, inline HTML images can be defined using three optional attributes. These are alt, align and ismap.
The alt attribute provides an inline image text alternative. Therefore, if the viewer’s browser does not support graphics, the viewer will see the text instead of the image. It is strongly recommended to use the alt attribute.
The value of the alt attribute can be an empty string. For example, if you have a decorative image, you don’t need to provide an alt text for it. Therefore, the value of the alt attribute can be left blank.
The inline image style can be set with the align attribute. The alignment attribute tells the browser where the image should appear inline relative to the text on the web page. The inline image can be aligned to the top, center, or bottom of the adjacent text on the web page.
With the ismap attribute, an online image can be marked as an active image map. This means that different parts of the image can be made to produce different actions each time someone clicks on the different parts. For example, if there is an online image showing Earth and Saturn, clicking on Earth can get information about Earth and clicking on Saturn can get information about Saturn.
Unlike the alt and align attributes, the ismap attribute doesn’t work by simply including it in the img tag. It requires some configuration done on the server. Some programming knowledge may also be required.
