What’s an inline image?

Print anything with Printful



Inline images are graphics on web pages that add visual appeal or represent hyperlinks. They should be small to avoid slowing down loading time. The img tag is used to insert inline images, with the src attribute specifying the URL. The alt attribute provides alternative text, align sets image position, and ismap creates active image maps. Using online images from external sources without permission is controversial.

An inline image is a graphic image that is placed on a web page to add visual appeal, provide information, or represent a hyperlink. Online images are usually in GIF, JPEG or PNG formats. They are embedded in a web page using the data URI scheme.

Data URIs allow for embedding of small data that can be instantly retrieved by the browser. Inline images are fetched from the browser along with the HTML and displayed as part of the web document. In order for the browser to be able to fetch and display the images without too much time and trouble, it is advisable to use small inline images.

Larger images will slow down the loading time and make the site take a long time to display on screen. Most web visitors don’t have the patience to stick around to see it happen. This would negatively affect site traffic.

HTML inline images come from the website server where they are to be displayed or are included from other external servers. Using online images from external sources is a controversial issue as this can be done without permission. The img tag is used to insert inline images in paragraphs and headings in the web page. The img tag cannot be used in a floating form. Must be enclosed within 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, HTML inline images can be defined by three optional attributes. These are alt, align and ismap.

The alt attribute provides an alternative to inline image text. So, in case the viewer’s browser doesn’t support graphics, the viewer will see text instead of the image. Using the alt attribute is highly recommended.
The alt attribute value can be an empty string. For example, if you have a decorative image, you don’t need to provide alt 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 should appear in relation to the text on the web page. The inline image can be aligned with the top, center or bottom of 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 created 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 Earth can lead to information about Earth, and clicking Saturn can lead to information about Saturn.
Unlike the alt and align attributes, the ismap attribute doesn’t work by simply including it in the img tag. Requires configuration performed on the server. Some programming knowledge may also be required.




Protect your devices with Threat Protection by NordVPN


Skip to content