In this article, we’ll delve into the world of HTML images, exploring how to seamlessly integrate them into your web content. We’ll not only cover the fundamental concept of adding images in HTML but also demonstrate their implementation and usage through practical examples. In the earlier days of the internet, web pages primarily consisted of plain text, which often left them looking dull and unengaging. Fortunately, it didn’t take long for the ability to incorporate images into web pages to become a reality for users. In this article, we will explore how to infuse life into web pages by adding captivating images and explore various methods for inserting these images.
There are essentially two ways to insert images into a webpage:
Let’s begin by discussing the process of adding images to a webpage, while simultaneously gaining a deeper understanding of both of the approaches mentioned above.
Adding Images to a Webpage: To incorporate images into a webpage or website, the HTML `<img>` tag is your go-to tool. The `<img>` tag is what we call an empty tag, which means it doesn’t have a closing tag and can only contain a list of attributes. It serves as a designated space holder for your images. By utilizing the `<img>` tag, you not only enhance the visual quality of your web content but also improve the overall design and appearance of your webpage. Nowadays, websites rarely store images directly on a web page; instead, they link to images using the `<img>` tag, which reserves a spot for the image to be displayed.
<img src=”url” alt=”some_text” width=”” height=””></img>
Attribute: The <img> tag has following attributes:
src: It is used to specify the path to the image.
alt: It is used to specify an alternate text for the image. It is useful as it informs the user about what the image means and also due to any network issue if the image cannot be displayed then this alternate text will be displayed.
crossorigin: It is used to import images from third-party sites that allow cross-origin access to be used with canvas.
height: It is used to specify the height of the image.
width: It is used to specify the width of the image.
ismap: It is used to specify an image as a server-side image map.
loading: It is used to specify whether a browser should defer the loading of images until some conditions are met or load an image immediately.
longdesc: It is used to specify a URL to a detailed description of an image.
referrerpolicy: It is used to specify which referrer information to use when fetching an image i.e. no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
sizes: It is used to specify image sizes for different page layouts.
srcset: It is used to specify a list of image files to use in different situations.
usemap: It is used to specify an image as a client-side image map.
The “src” attribute, short for “source,” is a crucial element in HTML image tags. It specifies the image’s location by providing a URL. When a webpage is loaded, the browser fetches the image from the specified web server using this URL and displays it on the page. If the browser cannot locate the image, users will see a broken link icon, often due to incorrect file paths or the image being deleted from the specified location.
Example 1: This simple example illustrates the use of the <img> tag in HTML that is used to embed the image into the webpage.
<!DOCTYPE html>
<html>
<head>
<title>Welcome To GFG</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>This is the demo of <img> tag.</p>
<img src=
“https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300×300.png”
alt=”GFG image” />
</body>
</html>
Example 2: The example illustrates the use of the src attribute in the <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>Inserting an image using “img” tag</title>
</head>
<body>
<p>inserted image using <img> tag:</p>
<img src=
“https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png”/>
</body>
</html>
alt: If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is a user-defined text. It generally happens when the user, for some reason, cannot view it due to a slow internet connection or an error in the src attribute, or if the user uses a screen reader.
Example 3:
<!DOCTYPE html>
<html>
<head>
<title>Alt Attribute Example</title>
</head>
<body>
<p>inserted image using <img> tag:</p>
<img src=
“https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png”
alt=”This is GeeksforGeeks logo” />
</body>
</html>
The “width” and “height” attributes in HTML are used to define the dimensions of an image, with pixel units as the default measurement. These attributes are crucial for controlling the size of an image on a webpage. If you want detailed guidance on adjusting image dimensions in HTML, you can refer to the article titled “How to Set Image Width and Height in HTML.”
Example 4: The example illustrates the use of the width & height attribute in the <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>Setting width and height of image</title>
</head>
<body>
<p>inserted image using<img> tag:</p>
<img src=
“https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png”
alt=”GeeksforGeeks logo” width=”300″
height=”300″ />
</body>
</html>
Adding titles to Image: Along with the images, titles can also be added to images to provide further information related to the inserted image. For inserting a title, the title attribute is used. Please refer to the HTML | title Attribute article for further details.
Example 5: The example illustrates the use of the title attribute in the <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>Inserting an image using “img” tag</title>
</head>
<body>
<p>inserted image using <img> tag:</p>
<img src=
“https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png”
alt=”GeeksforGeeks logo”
width=”200″
height=”200″
title=”Logo of GeeksforGeeks” />
</body>
</html>
Setting style to the Image: In this example, we are using the border property to decorate the image. By default, every picture has a border around it. By using the border attribute, the thickness of the border can be changed. A thickness of “0” means that there will be no border around the picture. Please refer to the HTML | <img> border Attribute for further details.
Example 6: This example illustrates the use of style property inside the <img> tag in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Setting border to image</title>
</head>
<body>
<p>inserted image using <img> tag:</p>
<img src=
“https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png”
alt=”GeeksforGeeks logo”
width=”200″
height=”200″
border=”5″ />
</body>
</html>
Aligning an Image: By default, an image is aligned on the left side of the page, but it can be aligned to the centre or right using the align attribute. Please refer to the HTML | <img> align Attribute for further details.
Example 7: This example illustrates the use of align property in the <img> tag whose value is set to right.
<!DOCTYPE html>
<html>
<head>
<title>Aligning an image</title>
</head>
<body>
<p>inserted image using <img> tag:</p>
<img src=
“https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png”
alt=”GeeksforGeeks logo”
align=”right” />
</body>
</html>
Adding Image as a Link: An image can work as a link with a URL embedded in it. It can be done by using the “img” tag inside an “a” tag. We need to specify the file path in order to render the image on the webpage. File paths are used to link external resources such as images, videos, style sheets, JavaScript, displaying other web pages, etc. To insert a file on a web page its source must be known.
File paths are of two types:
Absolute File Paths: It always contains the root element along with the complete directory list required to locate the file.
Relative File Paths: It is the hierarchical path representation that locates the file or folder on a file system beginning from the current directory.
Example 8: This example illustrates the use of link property in the <img> tag. Here, we have used the absolute path link in order to provide the link to the image. Please refer to the HTML | File Paths & How to turn an Image into a Link in HTML? article for further details.
<!DOCTYPE html>
<html>
<head>
<title>Adding image as link</title>
</head>
<body>
<h3>GeekforGeeks</h3>
<p>inserted image using <img> tag:</p>
<a href=”https://ide.geeksforgeeks.org/tryit.php”>
<img src=
“https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png”
alt=”GeeksforGeeks logo” />
</a>
</body>
</html>
Example 9: This example explains the addition of an image in the GIF format in HTML.
<!DOCTYPE html>
<html>
<body>
<h3>Adding a gif file on a webpage</h3>
<img src=”smiley.gif”
alt=”smiley”
style=”width: 200px; height: 200px” />
</body>
</html>
Using Image as a Background: An image can be used as a background for a webpage. For this, we use the background-image property of CSS. Please refer to the HTML | <body> background Attribute for further details.
Example 10: This example illustrates the use of body background property in the <img> tag.
<!DOCTYPE html>
<html>
<body style=”background-image: url (
‘https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png’
);”>
<h2>Image As a Background</h2>
<p>
In this example we have specified a
background for a webpage using an image.
</p>
</body>
</html>
Not a member yet? Register now
Are you a member? Login now