HTML Tutorial

Chapter 8 – HTML Images

Dear readers, welcome to Chapter 8 of HTML Tutorial series. In the previous tutorial, we learnt about the usage of Hyperlinks in HTML. In this tutorial, let us go through HTML Images.

Think about one of the website you visit often, what’s appealing about the website. Definitely the visual appeal and experience of the website. Now think through and try to analyze what makes a website’s design visually appealing?

design visually appealing? It’s the combinatorial use of visual elements such as text, images, videos, etc on the web page. As there is an adage which says, “A picture is worth more than thousand words”.

You can also add images within your web pages by using HTML Image elements.

Syntax

The general syntax to include an image within your web page is given below for reference.

HTML
  <img src="html-image.png">
Output

You can try running this code snippet on our Online HTML Editor to view the output.

Here,

• The “img” tag means that the web element has to be an image.
• Within this tag, there will be an attribute titled “src” where we need to provide the path of the image.
• This tag supports most of the common image formats such as APNG, AVIF, GIF, JPEG, PNG, SVG, WebP etc.

SRC Attribute

SRC attribute in the IMG tag means the source of the image. This basically represents the path of the source image. Unlike the textual elements which are added within the web pages, images are usually stored at another location which is accessible to the end users and are referenced in the HTML page. The path here can be:

• A relative path within any sub folder or preceding parent folders within the same website domain. An example is given below for reference:
    <img src="/image/globe.png">


• An absolute path with a full URL starting with “http”. An example is given below for reference:
    <img src="https://www.samplewebsite.com/images/globe.png">

ALT Attribute

ALT attribute signifies alternate text of the image. This contains a custom user defined text which is displayed in case the browser is unable to load the image. Such situations may happen in case of broken links where the target image is not available or if in case the image could not be loaded due to network time out. In such situations, the browser will display the alternate text to the user.

The syntax for image tag using “alt” attribute is given below for reference:
  <img src="image.png" alt="This is the image of Earth">

Including the “alt” attribute is optional but is considered as a good practice for web developers. This is because the ALT attribute is used especially by screen reader applications in case of blind readers. As the blind readers cannot view the image, the screen reader will read out the alternate text for them. This improves the accessibility of your web page and improves user experience.

Image size – Width, Height, Style

While you are experimenting with the HTML images with random images, soon you would realize that some images are too big and taking up all the space in the web page.

For such scenarios, you need to define the dimension of the image to be used while rendering on the browser. There are 2 ways to set the image size:

1. Using the “width” and “height” attribute.
   E.g. <img src="image.png" width="200" height="200">
   Here, the dimensions are always in pixels.


2. Using the CSS style attribute.
   E.g. <img src="image.png" style="width:100px;height:200px">

In practice, the CSS style attribute approach is recommended. This is because in case of larger projects, all stylings can be placed and controlled from one single CSS file.

I hope you enjoyed reading this tutorial. Do share this tutorial among your social networks.

See you in the next tutorial…

Next Chapter Chapter 9 - HTML Tables