Appearance of webpages can be improved by adding images. Lets see how to add an image to a webpage to design it well and to make it attractive.
HTML Image Syntax
HTML <img> tag is used to add an image to a webpage. The image Tag is known as empty tag because it doesn’t contain content or any closing tag it just link the image with webpage.
Basically the image is embedded(linked) to a webpage. This tag creates a holding space for image whose URL is attached.
Syntax
<img src="URL" alt="text to show incase image is not shown">
- src attribute: The src attribute is use to attach the url of the image.
- alt attribute: The alt attribute is used to add a text to show incase image is not shown.
<img src="media/flower.jpeg" alt="Flower">
HTML Image Example
HTML Image Size
The image can be resized by adding width and height attributes or style attribute can be added as well.
Note: The Webpage can flicker while loading the image So, it is better to add width and height of image.
<img src="media/flower.jpeg" alt="Flower" width="128" height="128"> <img src="media/nature.jpeg" alt="Nature" style= "width:128px ;height:128px;">
HTML Image Example
Image using Height Width Attribute
Image using style Attribute
Note: It is better to use style attribute to set the size of image so that the internal/external style sheet cannot effect the size of image.
Lets see an example to understand how other style sheet can effect the size of image given using height width attribute of image.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 80%;
}
</style>
<body>
<h2>HTML Image Example</h2>
<p>Image using Height Width Attribute</p>
<img src="media/flower.jpeg" alt="Flower" width="128" height="128">
<p>Image using style Attribute</p>
<img src="media/nature.jpeg" alt="Nature" style= "width:128px ;height:128px;">
</body>
</html>
img {
width: 80%;
}
HTML Image Example
Image using Height Width Attribute
Image using style Attribute
HTML Image Path
The html image path is basically the value of src attribute, which can be added in different ways.
- If the image is in the same folder where the html document is placed than you can simply add the image name with extension.
- If the image is placed in a subfolder than the folder name is added before image name.
- If the image is on different server or website than simply add url of that webpage.
<p>Image in subfolder</p> <img src="media/nature.jpeg" alt="Nature" style= "width:128px ;height:128px;"> <p>Image on other webpage/server</p> <img src="https://www.tutorialsart.com/wp-content/uploads/2021/01/nature.jpeg" alt="Nature" style= "width:128px ;height:128px;">
HTML Image path Example
Image in sub folder
Image on other webpage/server
HTML Image Formats
You can add image of different formats by the same syntax discussed above. Let discuss different formats of image below.
| File Abbreviation | File Extension | File Format |
| JPEG | Joint Photographic Expert Group Image | .jpg, .jpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| GIF | Graphics Interchange Format | .gif |
| APNG | Animated Portable Network Graphics | .apng |
| ICO | Microsoft Icon | .ico, .cur |
| SVG | Scalable Vector Graphics | .svg |