Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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
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:

Example

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


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.