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 |
| 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 |
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:
W3schools Pathfinder
Track your progress - it's free!
FAQs
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Can IMG have children? ›
error img is a self-closing tag and must neither have children nor use dangerouslySetInnerHTML .
Is IMG an empty tag? ›
The img element is used to insert images into an HTML document. It is an empty tag (meaning it has no closing tag).
Is an image a valid HTML tag? ›
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.
How do I scale an image responsive? ›
An image can be made responsive by using CSS and setting the width of the image to be a percentage of its parent container, rather than a fixed pixel value. This way, when the size of the parent container changes (e.g. due to different screen sizes), the size of the image will also change proportionally.
How to scale images down? ›
Open the image in Preview by simply double-‐clicking the image. (If you've changed your image file associations, you also can right-‐click on an image, point to Open With, and select Preview.) 2. Select Tools, then select Adjust Size to bring up the Resize dialog box, which will allow you to resize the image.
Can an IMG have an ID? ›
To start, you'd add an ID attribute to the image. This ID attribute can appear anywhere inside the image element: before the img src attribute, after the src attribute but before the alt attribute, after both the img src and alt attributes.
How do you make a div the same size as an image? ›
To resize an image or video to fit inside a div container, you can use the object-fit property. This property is used to specify how the content should fit inside the container. With object-fit, you can set the content to maintain its aspect ratio or stretch to fill the entire container.
How to make an image fit in a parent div? ›
To fix this, we can use the object-fit CSS property on the <img> element to determine how the image should be resized to fill its container. The object-fit property can be set with one of five values; the two commonly used values when you want to retain an image's aspect ratio are “contain” and “cover”.
Is IMG a void tag? ›
The img element is a void element. An img element must have a start tag but must not have an end tag.
The <img /> Tag
It is called a self-closing tag, which means that there is just a slash at the end of the opening tag (ex. <img />). There are very few self-closing tags in HTML.
Is IMG tag paired? ›
In this example, an image is added to a web page with the unpaired <img> tag. A link to the file is specified in the src attribute. The value of the attribute is the reference to the desired image. There are many attributes out there.
Which HTML tag is not valid? ›
The correct answer is <list>. <list> is not an HTML tag. However, <ul> tag is used for unordered list and <ol> is used for ordered list.
What is the difference between image tag and IMG tag? ›
The image tag is used to add an image to an HTML page. <img> tag can only insert image.
Is the IMG tag inline or block? ›
In HTML, you use the <img> tag to add images to websites. It is an inline and empty element, which means that it doesn't start on a new line and doesn't take a closing tag (unlike the paragraph ( <p> ) tag, for instance).
How to resize an image in CSS HTML? ›
You can solve this by configuring the height and width properties. Stretch: Use the “100% 100%” background-size property to accomplish the following: Stretch the image vertically to the edge of the container. Stretch the image horizontally to the edge of the container.
How do you resize an image in HTML keep aspect ratio? ›
Method 1: Using CSS max-width and max-height Property
resizable-image class is applied to the image, setting both max-width and max-height to 100%. This ensures that the image won't exceed the size of its container while maintaining its aspect ratio.
