We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.
Software

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

What is an Inline Image?

By Sonal Panse
Updated: May 16, 2024
Views: 45,990
Share

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.

Share
EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Discussion Comments
By KoiwiGal — On Dec 29, 2014

@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.

By Mor — On Dec 29, 2014

@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.

By irontoenail — On Dec 28, 2014

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.

Share
https://www.easytechjunkie.com/what-is-an-inline-image.htm
Copy this link
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.