• Tutorial List

HTML Images – How to add image on HTML pages

Last updated Jul 08, 2020
How to add or insert images on a webpage using HTML

How to add or insert images on a webpage using HTML?

The HTML <img> tag is used to add or insert images on a webpage. This tag has the source (src=”…”) attribute that takes the image path or URL which you want to display.

The <img> tag is a self-closing tag, so you do not need to close it.

<!DOCTYPE html>
<html>
	<body>

      <img src="my-image.jpg">

	</body>
</html>

Image src=”…” Attribute

The Image src="..." attribute takes the source of an image. The source can be a path or location or URL of an image.

<img src="./my-path/image.jpg">

<img src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_960_720.png">

Do yourself: insert images on a webpage

  • First, on your computer desktop create a folder called html-tutorial.
  • After creating this folder, paste the image file into the html-tutorial folder which you want to insert.
  • And then inside this folder create an HTML file called index.html
  • html-tutorial
    1. index.html
    2. my-image.png

In the following example you can see the ./ before the image file name.

  • ./my-image.png this mean –
    • The image is in the same folder as the web page

index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML Images</title>
</head>
<body>
  
	<img src="./my-image.png">
  
</body>
</html>

Now open the index.html file on your browser to test it.


Image is in another folder

  • html-tutorial
    • images
      • picture245.jpg
    • index.html

index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML Images</title>
</head>
<body>
  
	<img src="./images/picture245.jpg">
  
</body>
</html>

Image alt=”…” Attribute

The alt attribute is an important attribute of the HTML <img> tag. It is used to describe the image.

<!DOCTYPE html>
<html>
<body>
  
	<img src="./mountains.jpg" alt="Painting of Mountains">
  
</body>
</html>

📝 Always add the alt attribute with the image tag, because it is very helpful for SEO.


How to modify or set image size in HTML?

In HTML there are several ways to modify or set the image size. Either you can use width and height attribute or you can use the style attribute to set the image size.

width & height Attribute

In the following example, the width & height of the image is set to 100px.

<!DOCTYPE html>
<html>
<body>
  
<img width="100px" height="100px" src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_960_720.png" alt="HTML Image">
  
</body>
</html>

Using style Attribute to set the image size

<!DOCTYPE html>
<html>
<body>
  
<img style="width:100px; height:100px;" src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_960_720.png" alt="HTML Image">
  
</body>
</html>

Ask Questions

Your email address will not be published. Required fields are marked *