HTML

HTMLImageElement

HTMLImageElement <img>

The properties and methods used to edit image elements are provided via the HTMLImageElement interface, which represents an HTML <img> element. Images are linked to internet pages; they are not actually placed into web pages. The relevant picture is held in place by the <img> element.

Note: Additionally, you must always give the image's width and height. The website can flicker while the image loads if the width and height are not provided.
Tip: Simply nest the <img> tag within  <a> tag to attach an image to another document.

Attribute Value Description Example
alt 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
<img alt="text">
crossorigin anonymous Allow images from third-party sites that allow cross-origin access to be used with canvas
use-credentials
height pixels Specifies the height of an image <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"<
ismap ismap Specifies an image as a server-side image map <a href="/action_page.php"> <img src="w3html.gif" alt="W3Schools.com" ismap> </a>
loading eager Default. Loads an image immediately <img src="URL" loading="eager|lazy">
lazy Defer loading of images until some conditions are met
referrerpolicy no-referrer No referrer information is sent <img src="https://example.com/images/myimage.jpg" alt="Some image" referrerpolicy="no-referrer">
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
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the path to 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")
<iframe src="/default.asp"></iframe><iframe src="/default.asp"></iframe>
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 <img src="workplace.jpg" 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>
width pixels Specifies the width of an image <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Browser Compatibility

Element Chrome Edge Firefox Safari Opera
<img> Yes Yes Yes Yes Yes