Images

How Can We Help?
< All Topics

Images

You can insert HTML images on a web page.

Images play an important part to make a web page attractive and beautiful. You can add multiple images with a variety of sizes to the HTML page. Some of the most used image formats and extensions are .jpg, .png, .jpeg & .gif.

Till now, we have used text along with different formatting options. Now we will see how to add images, graphics, and even icons on our web page.

How to Insert HTML Images:

Images can be inserted with the <img> tag in HTML.

The source (src) attribute specifies the image URL (address). The <img> tag is an empty tag, so it does not have any closing tag. However, you can optionally close it like this: <img />

Example to simply include “photo.jpg”: <img src="photo.jpg">

Example using Relative Image URL:

A relative URL specifies a path that is relative to the current folder/page. When you have an image in the same or nearby folder, you need not specify the full domain or path of the image. You can only specify the image name in the source if the image exists in the same folder.

<img src="myimage.jpg">

If an image is in any sub-folder, you can mention the folder name with the slash “/” and then the image name. Suppose image “myphoto.jpg” is available in the “pictures” folder, We can include it as given in the following example:

<img src="pictures/myphoto.jpg">

Example using Absolute Image URL:

Absolute URL refers to the full Image URL/Path for the image location. You can include images from external websites using absolute URLs in the source. See the example below:

<img src="<http://xyz.com/wp-content/uploads/2016/04/xyz-logo1.png>">

Image Alternate Text Attribute

The alt attribute is used to specify an alternate text for an image. This text will be displayed if the image is not found at a given location. You can test it by using the wrong image URL in the source. Use the example below:

<img src="test.png" alt="Test Photo Alternate Text">

Image Title Attribute

The title attribute is used to specify the title of an image. This title is visible when you point your mouse over any image. Use the example below:

<img src="<http://xyz.com/wp-content/uploads/2016/04/xyz-logo1.png>" title="This is Tutorials Logo Title">

Image Size (Width & Height Attribute)

Width and Height attributes are available to specify the image width and height. The values for Height and Width attributes are specified in pixels (px) by default.

<img src="www.xyz.com/photo.jpg" height="300" width="500" >

Image Border Attribute

You can set a border around the image using “border” attribute. By default border thickness will be measured in pixels (px) and images will have 0 or no border if not specified.

<img src="www.xyz.com/photo.jpg" border="5px" >

Image Alignment Attribute

You can align the image horizontally using the “align” attribute of “img” tag. Images are aligned left by default. To test image alignment in a better way, you can add some text or paragraphs as well.

Commonly used align properties are given below:

  • Set Image Alignment Left: align="left"
  • Set Image Alignment Right: align="right“
  • Set Image Alignment Center: align="center"
This is a sample text. <img src="www.xyz.com/photo.jpg" align="right" > 
This is another text.

Complete Example using all Image Attributes

You can use multiple images on any webpage. Different attributes can be used together for any image as well. Use the following example to test various image properties. Please change the Image name & URL as per your image.

<html>
<head>
<title>Example of Image Tag & Attribute - Tutorials Class</title>
</head>
<body>
<p>This is a test paragraph.</p>
<img src="sample-picture.jpg" alt="Sample Image Text" border="5" align="right" />
<p>This is sample text. We will add an image in html page.</p>
<img src="test-photo.jpg" height="300" width="400" title="Sample title" />
</body>
</html>
Table of Contents