Horje
What is HTML <img> Tag | HTML Tag Code
What is HTML <img> Tag

The tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag has two required attributes:

  • src - Specifies the path to the image
  • alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the tag inside an tag (see example below).

 


How to create HTML <img> Tag

How to insert an image
index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to create HTML <img> Tag

Which browser will support for HTML <img> Tag

See Which Browser will support
Which browser will support for HTML <img> Tag

Attributes for HTML <img> Tag

Attribute Value Description
alt text Specifies an alternate text for an image
crossorigin anonymous
use-credentials
Allow images from third-party sites that allow cross-origin access to be used with canvas
height pixels Specifies the height of an image
ismap ismap Specifies an image as a server-side image map
loading eager
lazy
Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc URL Specifies a URL to a detailed description of an image
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Specifies which referrer information to use when fetching an image
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the path to the image
srcset URL-list Specifies a list of image files to use in different situations
usemap #mapname Specifies an image as a client-side image map
width pixels Specifies the width of an image

How to add Align image (with CSS)

index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="float:right">
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="float:left"> 

Output should be:

How to add Align image (with CSS)

How to Add image border (with CSS):

index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="border:5px solid black"> 

Output should be:

How to Add image border (with CSS):

How to Add left and right margins to image (with CSS)

See the Example

index.html
Example: HTML
<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42"> This is some text. This is some text. This is some text.</p>

<h2>Image with left and right margins</h2>
<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">This is some text. This is some text. This is some text.</p>

Output should be:

How to Add left and right margins to image (with CSS)

How to Add top and bottom margins to image (with CSS)

See the Example

index.html
Example: HTML
<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42"> This is some text. This is some text. This is some text.</p>

<h2>Image with top and bottom margins</h2>
<p><img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">This is some text. This is some text. This is some text.</p>

Output should be:

How to Add top and bottom margins to image (with CSS)

How to insert images from another folder or from another web site

See the Example

index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Stickman" width="24" height="39">

<p>Insert an image from a web site:</p>
<img src="https://horje.com/avatar.png" alt="Lamp" width="32" height="32">

Output should be:

How to insert images from another folder or from another web site

How to add a hyperlink to an image

See The Example

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>Add a hyperlink to an image</h1>

<p><a href="https://horje.com">
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132">
</a></p>

</body>
</html>

Output should be:

How to add a hyperlink to an image

How to create an image map, with clickable regions. Each region is a hyperlink

See the example

index.html
Example: HTML
<img src="https://horje.com/uploads/demo/2024-02-03-15-39-40-screenshot_2024-02-03_at_21-36-38_workplace.jpg_(jpeg_image_400_%C3%97_379_pixels).png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://horje.com/learn/684/what-is-html-img-tag">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://horje.com/learn/684/what-is-html-img-tag">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Output should be:

How to create an image map, with clickable regions. Each region is a hyperlink

How to set Default CSS Settings for HTML <img> Tag

See the Example

index.html
Example: HTML
<style>
img {
  display: inline-block;
}
</style>
<p>Some text <img src="https://horje.com/avatar.png" alt="Smiley face" width="42" height="42"> some text.</p>

Output should be:

How to set Default CSS Settings for HTML <img> Tag

How to add HTML <img> alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Tip: To create a tooltip for an image, use the title attribute!

Browsers Support

Syntax

<img alt="text">

Attribute Values

Value Description
text Specifies an alternate text for an image.

Guidelines for the alt text:

  • The text should describe the image if the image contains information
  • The text should explain where the link goes if the image is inside an <a> element
  • Use alt="" if the image is only for decoration

An image with an alternate text specified.

index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to add HTML <img> alt Attribute

How to add HTML <img> height Attribute

The height attribute specifies the height of an image, in pixels.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.


Browser Support

Syntax

<img height="pixels">

Attribute Values

Value Description
pixels The height in pixels (e.g. height="100")
index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to add HTML <img> height Attribute

How to HTML <img> ismap Attribute

The ismap attribute is a boolean attribute.

When present, it specifies that the image is part of a server-side image map (an image map is an image with clickable areas).

When clicking on a server-side image map, the click coordinates are sent to the server as a URL query string.

Note: The ismap attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute.

Browser Support

Syntax

<img ismap>

index.html
Example: HTML
<a href="/action_page.php">
  <img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" ismap>
</a>

Output should be:

How to HTML <img> ismap Attribute

How to add HTML <img> loading Attribute

Add lazy loading to images below the fold:

he loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.

Tip: Add loading="lazy" only to images which are positioned below the fold.

Browser Support

Attribute Values

Value Description
eager Default. Loads an image immediately
lazy Defer loading of images until some conditions are met
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The img loading attribute</h1>

<!-- visible in viewport -->
<img src="https://horje.com/avatar.png" alt="Wedding" style="width:100%">
<img src="https://horje.com/avatar.png" alt="Rocks" style="width:100%">
 
<!-- off-screen images -->
<img src="https://horje.com/avatar.png" alt="Paris" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Nature" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Underwater" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Ocean" style="width:100%" loading="lazy">
<img src="https://horje.com/avatar.png" alt="Mountains" style="width:100%" loading="lazy">

</body>
</html>

Output should be:

How to add HTML <img> loading Attribute

How to add HTML <img> longdesc Attribute

The longdesc attribute specifies a hyperlink to a detailed description of an image.

Several examples of how to use the longdesc attribute.

Browser Support

Syntax

<img longdesc="string">

Attribute Values

Value Description
string

A hyperlink to a detailed description of an image.

Possible values:

  • An id to another element
  • An absolute URL - points to another web site (like longdesc="http://www.example.com/description.txt")
  • A relative URL - points to a file within a web site (like longdesc="description.txt")
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The img longdesc attribute</h1>

<!-- The description is on the same page as the image -->
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" longdesc="#w3htmlExplained">

<!-- The description is in an external page -->
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" longdesc="w3html.txt">

<!-- The description is one of several within an external page -->
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" longdesc="http://example.com/desc#item3">

<!-- The description is included in a data:URI -->
<img src="https://horje.com/avatar.png" alt="Horje.com" width="100" height="132" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20Logo%3C/title%3E%3C/head%3E%3Cbody%3E%3Cp%3ESome%20description%20goes%20here%3C/body%3E%3C/html%3E">


<div id="w3htmlExplained">
  <h2>Image https://horje.com/avatar.png</h2>
  <p>Description of the image...</p>
</div>

</body>
</html>

Output should be:

How to add HTML <img> longdesc Attribute

How to add HTML <img> referrerpolicy Attribute

Set the referrerpolicy for an image:

The referrerpolicy attribute specifies which referrer information to use when fetching an image.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<img referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url">

Attribute Values

Value Description
no-referrer No referrer information is sent
no-referrer-when-downgrade Default. The referrer header will not be sent to origins without HTTPS
origin Sends the origin (scheme, host, and port) of the document
origin-when-cross-origin For cross-origin requests: Send only scheme, host, and port. For same-origin requests: Also include the path
unsafe-url Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe
index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Some image" referrerpolicy="no-referrer">

How to add HTML <img> Size Attribute

An image with a height of 600 pixels and a width of 500 pixels:

The width attribute specifies the width of an image, in pixels.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.

Browser Support

Syntax

<img width="pixels">

Attribute Values

Value Description
pixels The width in pixels (e.g. width="100")
index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to add HTML <img> Size Attribute

How to add HTML <img> crossorigin Attribute

The crossorigin attribute on an <img> tag specifies that CORS is supported when loading an image from a third party server or domain.

CORS is a standard mechanism used to retrieve files from other domains.

index.html
Example: HTML
<img crossorigin="anonymous" src="https://horje.com/avatar.png" alt="Van Gogh, self-portrait">

Output should be:

How to add HTML <img> crossorigin Attribute

How to add HTML <img> src Attribute

An image is marked up as follows.

The required src attribute specifies the URL of the image.

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://horje.com/avatar.png".

Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

Note: A broken link icon and the alt text are shown if the browser cannot find the image. 

Browser Support

Syntax

<img src="URL">

Attribute Values

Value Description
URL The URL of the image.

Possible values:

  • An absolute URL - points to another web site (like src="http://www.example.com/image.gif")
  • A relative URL - points to a file within a web site (like src="image.gif")
index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

Output should be:

How to add HTML <img> src Attribute

How to add HTML <img> srcset Attribute

The srcset attribute on an <img> tag specifies multiple image resources (URLs) for the img element.

Together with the sizes attribute they create responsive images that adjust according to browser conditions.

A srcset attribute on an <img> element.
Resizing the browser will adjust the image file used.

index.html
Example: HTML
<img srcset="https://horje.com/avatar.png 120w,
             https://horje.com/avatar.png 193w,
             https://horje.com/avatar.png 278w"
     sizes="(max-width: 710px) 120px,
            (max-width: 991px) 193px,
            278px">

Output should be:

How to add HTML <img> srcset Attribute

How to add HTML <img> usemap Attribute

An image map, with clickable areas.

The usemap attribute specifies an image as a client-side image map (an image map is an image with clickable areas).

The usemap attribute is associated with a <map> element's name attribute, and creates a relationship between the <img> and the <map>.

Note: The usemap attribute cannot be used if the <img> element is a descendant of an <a> or <button> element.

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="https://horje.com/avatar.png" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

Output should be:

How to add HTML <img> usemap Attribute

How to add HTML <img> width Attribute

An image with a height of 600 pixels and a width of 500 pixels:

The width attribute specifies the width of an image, in pixels.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.

Browser Support

Syntax

<img width="pixels">

Attribute Values

Value Description
pixels The width in pixels (e.g. width="100")
index.html
Example: HTML
<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="200" height="300">

Output should be:

How to add HTML <img> width Attribute
Reffered: https://www.w3schools.com/tags/tag_img.asp



Read Full::
HTML Tag Code
Category:
HTML Code
Sub Category:
HTML Tag Code
Uploaded:
2 weeks ago
Uploaded by:
Admin
Views:
17

Related Articles
What is HTML <!--...--> Tag HTML Tag Code
What is HTML <!DOCTYPE> Declaration HTML Tag Code
What is HTML Elements and Doctypes HTML Tag Code
What is HTML <a> Tag HTML Tag Code
What is HTML <abbr> Tag HTML Tag Code
What is HTML <address> Tag HTML Tag Code
What is HTML <applet> Tag HTML Tag Code
What is HTML <area> Tag HTML Tag Code
What is HTML <article> Tag HTML Tag Code
What is HTML <aside> Tag HTML Tag Code
What is HTML <audio> Tag HTML Tag Code
What is HTML <b> Tag HTML Tag Code
What is HTML <base> Tag HTML Tag Code
What is HTML <basefont> Tag HTML Tag Code
What is HTML <bdi> Tag HTML Tag Code
What is HTML <bdo> Tag HTML Tag Code
What is HTML <big> Tag HTML Tag Code
What is HTML <blockquote> Tag HTML Tag Code
What is HTML <body> Tag HTML Tag Code
What is HTML <br> Tag HTML Tag Code
What is HTML <button> Tag HTML Tag Code
What is HTML <canvas> Tag HTML Tag Code
What is HTML <caption> Tag HTML Tag Code
What is HTML <center> Tag HTML Tag Code
What is HTML <cite> Tag HTML Tag Code
What is HTML <code> Tag HTML Tag Code
What is HTML <col> Tag HTML Tag Code
How to create HTML <colgroup> Tag HTML Tag Code
What is HTML <data> Tag HTML Tag Code
What is HTML <datalist> Tag HTML Tag Code
What is HTML <dd> Tag HTML Tag Code
What is HTML <del> Tag HTML Tag Code
What is HTML <details> Tag HTML Tag Code
What is HTML <dfn> Tag HTML Tag Code
What is HTML <dialog> Tag HTML Tag Code
What is HTML <dir> Tag HTML Tag Code
What is HTML <div> Tag HTML Tag Code
What is HTML <dl> Tag HTML Tag Code
What is HTML <dt> Tag HTML Tag Code
What is HTML <em> Tag HTML Tag Code
What is HTML <embed> Tag HTML Tag Code
What is HTML <fieldset> Tag HTML Tag Code
What is HTML <figcaption> Tag HTML Tag Code
What is HTML <figure> Tag HTML Tag Code
What is HTML <font> Tag HTML Tag Code
What is HTML <footer> Tag HTML Tag Code
What is HTML <form> Tag HTML Tag Code
What is HTML <frame> Tag HTML Tag Code
What is HTML <frameset> Tag HTML Tag Code
What is HTML <h1> to <h6> Tags HTML Tag Code
What is HTML <head> Tag HTML Tag Code
What is HTML <header> Tag HTML Tag Code
What is HTML <hgroup> Tag HTML Tag Code
What is HTML <hr> Tag HTML Tag Code
What is HTML <html> Tag HTML Tag Code
What is HTML <i> Tag HTML Tag Code
What is HTML <iframe> Tag HTML Tag Code
What is HTML <img> Tag HTML Tag Code

Single Articles
How to create HTML <img> Tag
Which browser will support for HTML <img> Tag
Attributes for HTML <img> Tag
How to add Align image (with CSS)
How to Add image border (with CSS):
How to Add left and right margins to image (with CSS)
How to Add top and bottom margins to image (with CSS)
How to insert images from another folder or from another web site
How to add a hyperlink to an image
How to create an image map, with clickable regions. Each region is a hyperlink
How to set Default CSS Settings for HTML <img> Tag
How to add HTML <img> alt Attribute
How to add HTML <img> height Attribute
How to HTML <img> ismap Attribute
How to add HTML <img> loading Attribute
How to add HTML <img> longdesc Attribute
How to add HTML <img> referrerpolicy Attribute
How to add HTML <img> Size Attribute
How to add HTML <img> crossorigin Attribute
How to add HTML <img> src Attribute
How to add HTML <img> srcset Attribute
How to add HTML <img> usemap Attribute
How to add HTML <img> width Attribute

Share on: