HTML Images

Last Updated : 18 Apr, 2024

HTML images are used to embed an image in a web page. The <img> tag specifies the image source (src), dimensions (width, height), and alternative text (alt). Images enhance visual content, aiding in conveying information and improving user experience.

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.

We will first discuss inserting the image into the webpage & simultaneously, we will understand both the above approaches.

Adding images on a webpage:

The <img> tag embeds images in web pages, requiring only attributes without a closing tag. Images enhance design and content quality, linked via the <img> tag to preserve space and optimize webpage performance.

Syntax:

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

Attribute: The <img> tag has following 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.

src attribute:

The src attribute in <img> tag specifies the image’s location. If the URL is correct, the browser retrieves and displays the image; otherwise, it shows a broken link icon.

Example : In this example we displays an image using the <img> tag with src attribute pointing to a GeeksforGeeks logo. It enhances content by visually representing the website’s identity.

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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
            alt="GFG image"
        />
    </body>
</html>

Output:

Adding GFG logo using 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.

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>Using Alt Attribute</p>
        <img
            src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="This is GeeksforGeeks logo"
        />
    </body>
</html>

Output:

HTML Images using alt attribute

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: In this example we sets the width and height of an image using the <img> tag’s width and height attributes. It showcases the GeeksforGeeks logo with dimensions of 300×300 pixels.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            Setting width and height of image
        </title>
    </head>

    <body>
        <p> Setting width and height of image</p>

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

Output:

HTML Image width and height Attribute example Output

Adding titles to Image:

To add a title to an image, include the title attribute in the <img> tag, providing descriptive text for enhanced user interaction.Please refer to the HTML | title Attribute article for further details.

Example: In this example we are showing an image with width, height, and title attributes using the <img> tag. The title attribute provides descriptive text for user interaction.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            Inserting an image using "img" tag
        </title>
    </head>

    <body>
        <p>Inserted image using image 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>

Output:

Adding the title to the image

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>Setting style to the Image</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>

Output:

Setting style to the Image Example Output

Aligning an Image:

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.

Example: In this example we aligns an image to the right using the “align” attribute within the <img> tag. It positions the GeeksforGeeks logo for visual enhancement.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Aligning an image</title>
    </head>

    <body>
        <p>Aligning an Image</p>
        <img
            src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            alt="GeeksforGeeks logo"
            align="right"
        />
    </body>
</html>

Output:

Aligning an Image Example Output

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.

Example: In this example we embeds the GeeksforGeeks logo as a clickable link using the <a> tag, wrapping the <img> tag with the link destination specified in the href attribute.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Adding image as link</title>
    </head>

    <body>
        <h3>GeekforGeeks</h3>
        <p>Adding image as link</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>

Output:

Image As link Example Output

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.

Example: This example explains the addition of an image in the GIF format in HTML.

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:

Adding an image in GIF format

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:

Suggest improvement

HTML Links Hyperlinks

HTML Favicon

Share your thoughts in the comments

HTML List

HTML Graphics

HTML Tutorial References

HTML List

HTML Graphics

HTML Tutorial References

HTML Images

Adding images on a webpage:

src attribute:

alt attribute :

Setting width and height of Image:

Adding titles to Image:

Setting style to the Image:

Aligning an Image:

Adding Image as a Link:

Adding animated Image:

S.No.

Abbreviation

File Type

Extension

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?