At EasyTechJunkie, we're committed to delivering accurate, trustworthy information. Our expert-authored content is rigorously fact-checked and sourced from credible authorities. Discover how we uphold the highest standards in providing you with reliable knowledge.
What is an Inline Image?
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.
AS FEATURED ON:
AS FEATURED ON:
-
![Woman doing a handstand with a computer]()
Woman doing a handstand with a computer
Discussion Comments
@Mor - It's usually just .gifs that I have a problem downloading, but .jpgs and .png don't seem to bother most modern internet connections very much unless they are huge files. If it's an inline image it shouldn't be that big in the first place.
@irontoenail - That must be quite confusing for them sometimes, as I know that people often use the alt text as a means of stuffing in key words and phrases rather than accurately describing the image.
My favorite trick is when artists use the text to add something to the image, like an additional joke on a comic or maybe more information that isn't in the standard text.
But in general I find inline images to be quite annoying because I don't have a particularly fast internet connection at the moment. Usually I just turn off images completely, preventing them from loading when I'm trying to find specific information.
It's much faster and it doesn't use up nearly as much bandwidth.
You should use the alt text whenever possible anyway, even if you aren't concerned about the image not loading. For one thing it adds to the overall search-ability of the image and of the site in general because it can be scanned for key words. If someone is looking in Google's Image Search for a particular subject, it won't be able to find yours without the right key words.
But even more importantly, the alt text is often used by people with disabilities to understand an image. Sight impaired people, for example, will often have the alt text read out to them by a text reader.
Post your comments