HTML <img> Tag

Definition and Usage

<img> The tag is used to embed images in HTML pages.

Technically, the image is not actually inserted into the web page, but linked to the web page.<img> The tag creates a container to reference the image.

<img> The tag has two required attributes:

  • src - Define the path of the image
  • alt - If the image cannot be displayed for some reason, specify the alternative text for the image

Note:In addition, always specify the width and height of the image. If the width and height are not specified, the page may flicker when the image is loaded.

Tip:To link an image to another document, simply add <img> Nested in the tag <a> Within the tag (see the example below).

See also:

HTML Tutorial:HTML Images

HTML DOM Reference Manual:Image Object

CSS Tutorial:Set the style of the image

Read more:How to use images correctly

Instance

Example 1

In the following example, we insert a tulip photo taken by an engineer from CodeW3C.com at the Shanghai Flower Port into the page:

<img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" />

Try It Yourself

Shanghai Flower Port - Tulips

Example 2

Another example of how to insert an image:

<img src="dancer.png" alt="Dancer" width="500" height="749">

Try It Yourself

Tip:More examples are provided at the bottom of the page.

Attribute

Attribute Value Description
alt Text Define the alternative text for the image.
crossorigin
  • anonymous
  • use-credentials
 Allow the use of images from third-party websites that allow cross-origin access together with the canvas (canvas).
height Pixels Define the height of the image.
ismap ismap Define the image as a server-side image map.
loading
  • eager
  • lazy
 Specify whether the browser should immediately load the image or defer loading until certain conditions are met.
longdesc URL Define the URL that points to the detailed description of the image.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Define the reference information to be used when obtaining the image.
sizes Size Define the image size for different page layouts.
src URL Define the path of the image.
srcset URL-list Specifies a list of image files to be used in different situations.
usemap #mapname Define the image as a client-side image map.
width Pixels Specifies the width of the image.

Global attributes

<img> The tag also supports Global attributes in HTML.

event attributes

<img> The tag also supports Event attributes in HTML.

More examples

Example 3

Align images (using CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Try It Yourself

Example 4

Add image border (using CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Try It Yourself

Example 5

Add left and right outer margins to the image (using CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Try It Yourself

Example 6

Add top and bottom outer margins to the image (using CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Try It Yourself

Example 7

How to insert an image from another folder or another website:

<img src="/photo/flower.gif" alt="Flower" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Try It Yourself

Example 8

How to add hyperlinks to images:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Try It Yourself

Example 9

How to create an image map with clickable areas. Each area is a hyperlink:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Try It Yourself

Extended reading - How to use images correctly

One of the most striking features of HTML and XHTML is that they can include images in the text of the document, which can either be an intrinsic object of the document (inline image) or a separate document that can be downloaded via a hyperlink, or the background of the document.

Including images (static or animated icons, photos, descriptions, paintings, etc.) in the document content reasonably will make the document more vivid and engaging, look more professional, and be more informative and easy to navigate. It can also make a specific image a visual guide map as a hyperlink.

However, if images are overused, the document becomes fragmented, chaotic, and unreadable, and it will also increase a lot of unnecessary waiting time for users to download and view the page.

Please read the following article to learn about the two main image formats on the Web: GIF and JPEG, as well as how to use images correctly:

Default CSS settings

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

img {
  display: inline-block;
}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support