THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML <img> Tag


Example

How to insert an image:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The <img> 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 <img> tag creates a holding space for the referenced image.

The <img> 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 <img> tag inside an <a> tag (see example below).


Browser Support

Element
<img> Yes Yes Yes Yes Yes

Attributes

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
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 to use when fetching the image
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the path to the image
srcset URL Specifies the path to an image to use in different situations
usemap #mapname Specifies an image as a client-side image map
width pixels Specifies the width of an image


Global Attributes

The <img> tag also supports the Global Attributes in HTML.


Event Attributes

The <img> tag also supports the Event Attributes in HTML.


More Examples

Example

Align image (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">
Try it Yourself »

Example

Add image border (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">
Try it Yourself »

Example

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

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
Try it Yourself »

Example

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

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
Try it Yourself »

Example

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

<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">
Try it Yourself »

Example

How to add a hyperlink to an image:

<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>
Try it Yourself »

Example

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

<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>
Try it Yourself »

Related Pages

HTML tutorial: HTML Images

HTML DOM reference: Image Object

CSS Tutorial: Styling Images


Default CSS Settings

Most browsers will display the <img> element with the following default values:

Example

img {
  display: inline-block;
}
Try it Yourself »