HTML Images

Last Updated : 09 Apr, 2025

The HTML <img> tag is used to embed an image in web pages by linking them. It creates a placeholder for the image, defined by attributes like src, width, height, and alt, and does not require a closing tag.

There are two 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.

Basic Example of the <img> Tag:

HTML

<!DOCTYPE html>
<html>

<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" 
         alt="GFG image" />
</body>

</html>

In this example:

The <img> tag is used to embed an image into the webpage.
src attribute: Specifies the source URL of the image, which in this example is https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png. The image is loaded from this URL when the webpage is accessed.
alt attribute: Provides alternative text for the image, "GFG image," which describes the image content. If, for any reason, the image cannot be displayed, the text "GFG image" will be shown instead.

Various HTML <img> Tag Attributes

Attribute	Description
src	Specifies the path to the image file.
alt	Provides alternate text for the image, useful for accessibility and when the image cannot be displayed.
crossorigin	Allows importing images from third-party sites with cross-origin access, typically used with canvas.
height	Specifies the height of the image.
width	Specifies the width of the image.
ismap	Specifies an image as a server-side image map.
loading	Specifies whether the browser should defer image loading or load it immediately.
longdesc	Specifies a URL to a detailed description of the image.
referrerpolicy	Specifies which referrer information to use when fetching the image.
sizes	Specifies image sizes for different page layouts.
srcset	Specifies a list of image files to use in different situations, allowing for responsive images.
usemap	Specifies an image as a client-side image map.

Table of Content

HTML Image tag - alt Attribute
Set Image Size - Width and Height Attribute
Adding Titles to an Image
Setting Style of an Image
Set Image Alignment
Adding Image as a Link
Adding Animated Image

HTML Image tag - alt Attribute

The alt attribute in <img> tag provides a text alternative if the image fails to load. It aids accessibility for users unable to view images due to slow internet, src errors, or screen reader usage.

HTML

<!DOCTYPE html>
<html>

<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/201907101022/download3.png"
        alt="This is GeeksforGeeks logo" />
</body>

</html>

Set Image Size - Width and Height Attribute

The width and height attributes are used to specify the width and height 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.

HTML

<!DOCTYPE html>
<html>

<body>
    <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 an Image

The title attribute is displayed as a tooltip when a user hovers over the image. To add a title to an image, include the title attribute in the <img> tag, providing descriptive text for enhanced user interaction.

HTML

<!DOCTYPE html>
<html>

<body>
    <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>

Please refer to the HTML title Attribute article for further details.

Setting Style of an 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.

HTML

<!DOCTYPE html>
<html>

<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo" 
        width="200" 
        height="200" 
        border="5" />
</body>

</html>

Set Image Alignment

Aligning an image in HTML involves using the align attribute within the <img> tag to position it horizontally. Options include left, right, or center, enhancing page layout and visual appeal. Please refer to the HTML <img> align Attribute for further details.

HTML

<!DOCTYPE html>
<html>

<body>
    <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

To add an image as a link, enclose the <img> tag within an <a> tag, setting the image's source with the href attribute. This creates a clickable image linking to external content, such as images, videos, or other web pages.

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.

HTML

<!DOCTYPE html>
<html>

<body>
    <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>

Adding Animated Image

To add an animated image in HTML, use the <img> tag with the src attribute pointing to a GIF file, providing engaging motion to enhance webpage content.

HTML

<!DOCTYPE html>
<html>

<body>
    <img src="smiley.gif" 
         alt="smiley" 
         style="width: 200px; height: 200px" /> 
</body>
  
</html>

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

Tips for Using HTML Images Effectively

Optimize Image Sizes: Large images can slow down page loading times. Always optimize images for the web by compressing them and using appropriate file formats (JPEG for photos, PNG for graphics with fewer than 16 colors, and SVG for vector images).
Use Descriptive Alt Text: The alt attribute should clearly describe the image's content and purpose. This improves accessibility for screen reader users and acts as anchor text for a text-only browser.
Responsive Images: Use the srcset attribute to specify different images for different screen sizes and resolutions, helping ensure that your site is mobile-friendly.
Aspect Ratios: Maintain the natural aspect ratio of images unless specific design criteria require otherwise. Distorting images can result in poor visual aesthetics.
Legal Considerations: Only use images that you have created, purchased, or have the right to use. Copyright infringement can lead to legal issues and fines.

Common Question About CSS Images

HTML Favicon

S

Shubrodeep Banerjee

Improve

Article Tags :

Similar Reads

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript