HTML Image | How to Insert Image in HTML Pages

HTML image is very important of a webpage. It brings life and provides more clear information to users.

In this tutorial, we will learn about HTML image and how to insert image in HTML pages.

Images give visual representation about a topic, which gives easy and better understanding. It also makes a website user friendly.

That is why adding HTML image is so important for better user experience as well as SEO (Search Engine Optimization).


HTML Image Syntax

HTML image is specified with the <img> tag.

This is an empty tag. It does not have any closing tag, contains several attributes to hold the information.

The src is the most important attribute. You must use this attribute to specify the URL (web address) of the image.

This attribute informs the browser where to find the image you want to display. The URL of the image mentioned as the value of src attribute.

<img src="Image url">

The alt Attribute of Image

The alt attribute provides an alternate description for an image.

This alternative text is only visible if users cannot view the image for some reasons like slow connection, error in the src attribute, or user uses a screen reader.

This alt attribute is very important for SEO. Always provide alternative text with important keywords related to your web page.

It will help you to improve your rankings in different search engines.

<img src="https://worldtechis.com/wp-content/uploads/2019/02/Programming.jpg" alt="Programming Tutorial">
<img src="https://worldtechis.com/wp-content/uploads/Programming.jpg" alt="Programming Tutorial">

The output shows in a web browser:

Web development

Programming Tutorial

In the first image, browser will find it from the source URL and display on the page.

However, in the second case, browser will not find the image because URL is not correct.

So here, browser will display alternative text in the place of second image.


Image Size – Width and Height

You can specify image width and height using width and height attribute.

The width and height attributes always defines the image width and height in pixels (px).

You can also use style attribute to define the width and height of the image using CSS property.

We will suggest using the style attribute over other two attributes. It is easy to maintain image size using style sheet.

<img src="https://worldtechis.com/wp-content/uploads/2019/02/Programming.jpg" alt="Programming Tutorial" style="width:180px;height:120px;">

The output shows in a web browser:

Programming Tutorial

HTML Image Alignment

When you insert an image, by default image will align at the left side of the page.

However, you can use align attribute to override the default value and set it in the center or right.

<img src = "html-logo.png" alt = "HTML Logo" align = "right" style = "width: 150px; height: 140px;"/>

The output shows in a web browser:

HTML Logo

HTML Image Title

You can use title attribute to provide extra information about the image.

The text with this attribute shows up as a pop up when user put cursor over the image.

It represents the title of an HTML image.

<img src = "html-logo.png" alt = "HTML Logo" title="This is image title" style = "width: 150px; height: 140px;"/>

The output shows in a web browser:

HTML Logo

HTML Image with Absolute URL

An absolute URL contains full web address where the image is located.

Usually absolute URL is used to add images from another source with their full address.

<img src="https://worldtechis.com/wp-content/Programming.jpg" alt="Programming Tutorial">

HTML Image with Relative URL

A relative URL does not include any domain name. This is relative to either current page or current domain name.

Relative URL is used to add images from the current domain name. You cannot add image from other domain.

If the URL begins without a slash ( / ), it will be relative to the current page. If the URL begins with a slash, it will be relative to the domain.

<img src="images/pic1.jpg">
<img src="/images/pic2.jpg">

Here pic1.jpg is located in the images folder in the current folder.

In second case, pic2.jpg is located in the images folder at the root of the current domain.

It is best practice to use relative URL as much as possible. If you change your domain name, this will work fine with new domain.


Animated HTML Image

You can add animated images using HTML <img> tag.

<img src="animate.gif" alt="Animated Image" style="width:100px;height:100px;">

The output shows in a web browser:

Animated Image

HTML Image as a Link

You can also use an image as a clickable link. Anyone can click on the image to visit another page or another domain.

We have discussed about HTML links in our previous tutorial – HTML Links.

You have to put your <img> tag in between <a>…</a>. This will convert your full image as a link.

<a href="wordpress.php">
   <img src="wordpress.jpg" alt="What is WordPress(CMS)" style="width:220px;height:130px;">
</a>

The output shows in a web browser:


Background Image

You can set image as background of an HTML element using background-image CSS property.

You have to specify the image URL inside this property.

Browser will display this image in the background of that HTML element.

<div style="background-image:url('blue-sky.jpg'); padding: 20px;">

<h2>Background Image</h2>
<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the DIV element.</p>

</div>

The output shows in a web browser:

Background Image

By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the DIV element.


Importance of HTML Image

  • Images bring your website and service to life.
  • HTML image helps to get more views.
  • Great images can play a major role to get more shares in social media.
  • Images in webpage help visitors connect and feel comfortable on your site.
  • Images are very important in SEO. Search engines prefer webpage with high quality pictures.

Time to practice

OUTPUT