HTML Images

HTML Images improve web page design, appearance, and user experience.

Image is not included but linked by providing its path using an HTML image element <img> within a web page.

Element <img> is an empty element, which doesn't have a closing tag.

Each image element must include both the below attributes.

  • Attribute src defines the image location
  • Attribute alt defines an alternate text, which will be considered when the image cannot be accessed
<img src="url" alt="alternate-text">

Attribute src

The attribute src defines the path or URL of an image.

Image path can be from a different directory on the same server or completely a different server as shown below.

<img src="/assets/logo/logo.png" alt="randomcodez-logo">
<img src="https://randomcodez.com/assets/logo/logo.png" alt="randomcodez-logo">

Attribute alt

The attribute alt defines an alternate text to an image.

Alternate text is used when the image cannot be accessed by the user browser or the user uses a screen reader or non-graphical browser to access a web page.

So, make sure to provide a relevant alternate text that describes the image.

Define height and width of an Image

The image element <img> allows two attributes width and height to provide the values as below, and these values are considered to be in pixels by default.

<img src="https://randomcodez.com/assets/logo/logo.png" alt="randomcodez-logo" width="100" height="80">

Or, the image element can be styled using CSS as below.

<img src="https://randomcodez.com/assets/logo/logo.png" alt="randomcodez-logo" style="height:100px; width:80px;">

Examples

Check the outcome of the below HTML document to see how it looks.

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Images</h1>
    <img src="/assets/logo/logo.png" alt="randomcodez-logo"><br>
    <img src="https://randomcodez.com/assets/logo/logo.png" alt="randomcodez-logo">
    <h2>Define width and height using attributes</h2>
    <img src="https://randomcodez.com/assets/logo/logo.png" alt="randomcodez-logo" width="100" height="80">
    <h2>Define width and height using CSS</h2>
    <img src="https://randomcodez.com/assets/logo/logo.png" alt="randomcodez-logo" style="width:100px; height:80px;">
</body>
</html>

Overall

HTML Images in web pages always improve design, appearance, and user experience. So, make sure to include the images wherever necessary.