HTML Images

The HTML images element is used to embed images into a web browser aside from plain text. Fortunately, the element was part of the multimedia feature recently included in the newer versions of the HTML

HTML ELEMENT

If you recall the article on HTML tags, we explained how the href attribute contains the link to another website outside or within a web page. For the element, we use the src attribute, which is short for source, to link the source of the image to be embedded in a document.

The element is another empty element that contains no text and doesn't require an end tag.

To embed the element in a document, the src attribute and the alt attribute are necessary.

How to Embed The Element

In your code editor, if the image is in the same directory as your index.html, meaning you never created a separate folder/directory for it, you'll embed the image in the document like this:

<img src="my-awesome-image.png" width="100" />

NOTE: It is better to give your HTML images human-readable names instead of numerical names, preferably one word, so you can easily locate the file.

Here is an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IMAGE ELEMENT</title>
</head>
<body>
 <img src="laptop.jpg" alt="A woman facing a big screen.">   
</body>
</html>

If the image is in a separate folder, a subdirectory of the HTML images file, you will need to reference the subdirectory and then the file name

<img src="image/my-awesome-image.png" width="100" />

Sometimes we might need to reference our image from another location on the internet. 

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png" width="100" />

Image Element

Embedding images from an untrusted source on the web sometimes is not a very good practice for these reasons:

  • The owner of the webpage can shut down the website at any time.
  • The owner of the webpage can decide to change the image to something ridiculous or nothing at all.
  • The image may be under copyright and hence not allowed for public use.

When any of the above reasons occurs, you lose access to the image resulting in a broken image link making it hard for the web browser to find the image on the web. So, you must trust that your image source will always be available.

Why The ALT Attribute to Image The Element

The alt attribute is important for the following reasons.

  • It will help the user with a poor or slow internet connection read what the image is about before the website loads fully.
  • It will help visually impaired users read the image on your website with the aid of a screen reader.
  • It is important for search engine optimization to be able to crawl the images on your website as the computer can not read an image but only text.
  • In some countries, the cost of data is expensive with reduced bandwidths, this will help the user read your image without viewing it.

However, when you embed an image that fails to display on the web, the web will display a small picture icon with the alt text (if it is written) in place for the original image.

To fix this, you need to correct the wrongly spelled image name, resulting in a broken image link.

Your alt text must be descriptive enough to provide useful information. This is also good for web crawlers and SEO

How to Position image elements in HTML

We'll use the CSS float property to position the image on the left or right-hand side of the screen. Unless instructed otherwise, images are always positioned on the left-hand side.

Here, we'll float the image to the right-hand side.

<img src="image/my-awesome-image.png" width="100" style="float:right"/>

Here, we will float the image to the left-hand side.

<img src="image/my-awesome-image.png" width="100" style="float:left"/>