Skip to content
Related Articles

Related Articles

Improve Article

HTML Images

  • Difficulty Level : Basic
  • Last Updated : 17 Sep, 2021

Example: This simple example illustrates the use of the <img> tag in HTML that is used to embed the image into the webpage.

HTML




<!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=
         alt="GFG image" /> 
</body>
</html>

Output:

Earlier, the web pages only contains textual contents, which made them appears quite boring and uninteresting. Fortunately, it wasn’t long enough that the ability to embed images on web pages was added for users. In this article, we will know how to add images to the web page that will make the website attractive & various methods to insert the images.

There are 2 ways to insert the images into a webpage:



  • By providing a full path or address (URL) to access an internet file.
  • By providing the file path relative to the location of the current web page file.

Let’s first discuss inserting the image to the webpage & simultaneously, we will understand both the above approaches.

Adding images on a webpage: The <img> tag is used to add or embed the images to a webpage/website. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag. The addition of the images improves the quality along with enhances the design structure, appearance of the webpage. Nowadays, a website does not directly add images to a web page, as the images are linked to web pages by using the <img> tag which holds space for the image. 

Syntax:

<img src="url" alt="some_text" width="" height="">

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.

src: The src stands for source. Every image has an src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored. When the webpage loads for the first time, then the browser gets the image from a web server and inserts it into the page. If the image is not spotted by the browser then users will get a broken link icon. It might be possible if the file path is wrong or the image got deleted from that location.

Example: The example illustrates the use of the src attribute in the <img> tag.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
   
    <img src=
</body>
</html>

Output : 
 



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: The example illustrates the use of the alt attribute in the <img> tag.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Alt Attribute Example</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
   
    <img src=
         alt="This is GeeksforGeeks logo" /> 
</body>
  
</html>

Output:

Setting width and height of Image: The width and height attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default. The width and height attributes are always declared in pixels. Please refer to the How to set the width and height of an image using HTML? article for further details.

Example: The example illustrates the use of the width & height attribute in the <img> tag.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Setting width and height of image</title>
</head>
  
<body>
    <p>inserted image using<img> tag:</p>
   
    <img src=
         alt="GeeksforGeeks logo" 
         width="300" 
         height="300" /> 
</body>
  
</html>

Output : 
 

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: The example illustrates the use of the title attribute in the <img> tag.



HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
   
    <img src=
         alt="GeeksforGeeks logo" 
         width="200" 
         height="200" 
         title="Logo of GeeksforGeeks" /> 
</body>
  
</html>

Output : 
 

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: This example illustrates the use of style property inside the <img> tag in HTML.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Setting border to image</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
   
    <img src=
         alt="GeeksforGeeks logo" 
         width="200" 
         height="200" 
         border="5" /> 
</body>
</html>

Output:

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: This example illustrates the use of align property in the <img> tag whose value is set to right.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Aligning an image</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
   
    <img src=
         alt="GeeksforGeeks logo" 
         align="right" /> 
</body>
  
</html>

Output:



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: 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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Adding image as link</title>
</head>
  
<body>
    <h3>GeekforGeeks</h3>
    <p>inserted image using <img> tag:</p>
  
    <img src=
         alt="GeeksforGeeks logo" /> 
    </a>
</body>
  
</html>

Output: 

Adding animated Image: Animated images in .gif format can also be added using the “img” tag.

Example:

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>

Output:

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: This example illustrates the use of body background property in the <img> tag.

HTML




<!DOCTYPE html>
<html>
  
<body style="background-image: url (
);">
    <h2>Image As a Background</h2>
    <p>
       In this example we have specified a 
       background for a webpage using an image. 
    </p>
  
</body>
</html>

Output:

Common Image Format: Here is the commonly used image file format that is supported by all the browsers.

S.No.

Abbreviation

File Type

Extension

1. 

PNG

Portable Network Graphics

.png

2.

JPEG 

Joint Photographic Expert Group image

.jpg, .jpeg, .jfif, .pjpeg, .pjp



3. 

SVG

Scalable Vector Graphics

.svg

4.

GIF 

Graphics Interchange Format

.gif

5.

ICO

Microsoft Icon 

.ico, .cur

6.

APNG 

Animated Portable Network Graphics

.apng

Supported Browsers:

  • Google Chrome 93.0
  • Internet Explorer 11.0
  • Microsoft Edge 93.0
  • Firefox 92.0
  • Opera 78.0
  • Safari 14.1

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :