The <img>
tag displays an image in a web page.
Accepted image formats include gif, jpg and png.
Most browsers also support newer formats: apng, avif, and webp.
An <img>
of a painting by Claude Monet.
<img src="/img/html/parliament.jpg">
img
= image
The <img>
tag displays images in an HTML page.
This element can load images from the site itself or from sites across the internet.
Accepted image formats include gif, jpg and png.
Newer images formats, apng, avif, and webp, are supported by most modern browsers.
Tip: Avoid using the following image formats: bmp, ico and tiff. They are outdated and modern browser support is limited.
An <img>
with an alt attribute.
The alternative text only displays when the image cannot be loaded.
In this example, the image loads fine, so the alternative text is not visible.
<img src="/img/html/parliament.jpg"
alt="Houses of Parliament by Claude Monet">
Here is the same example, but with a misspelled image file name.
The alternative text is displayed, next to an icon of a broken image.
<img src="/img/html/parllliment.jpg"
alt="Houses of Parliament by Claude Monet">
src - required, defines the image URL or file path
alt - this attribute sets the text to be displayed if there is a problem with the image
Tip: The alt attribute also serves as an image description and adds value to SEO.
This table lists the <img>
tag attributes.
Attribute | Value | Description |
---|---|---|
src | URL | URL or path of the image to be displayed |
alt | text | Alternate text for when image cannot be displayed |
id | identifier | Defines a unique identifier for the img. |
class | classnames | Sets one or more CSS classes to be applied to the img. |
style | CSS-styles | Sets the style for the img. |
data-* | value | Defines additional data that can be used by JavaScript. |
hidden | hidden | Specifies whether the img is hidden. |
title | text | Sets a title that displays as a tooltip. |
loading | loading | Loads the image lazily or eagerly upon page load. |
height | pixels | Image height in pixels |
width | pixels | Image width in pixels |
ismap | ismap | Creates a server-side image map |
usemap | #mapname | Creates a client-side image map |
srcset | URL | URL or path set of the image to be used in different situations |
sizes | image sizes | Different image sizes |
crossorigin |
anonymous use-credentials |
Specifies whether the image is requested using a cross-server request which can then be used in a <canvas> element |
For addional global attributes see our global attributes list.
Do not use the attributes listed below. They are no longer valid on the img tag in HTML5.
Attribute | Description | Alternative |
---|---|---|
align |
Aligns the image relative to its surrounding elements. | CSS float, CSS vertical-align |
border |
Sets the thickness of the image border. | CSS border |
hspace |
Horizonal spacing in pixels, left and right of image. | CSS margin |
longdesc |
URL of a detailed description of the image. | n/a |
name |
The name of the image. | id attribute |
vspace |
Vertical spacing in pixels, top and bottom of image. | CSS margin |
An <img>
whose dimensions are specified with width and height attributes.
<img src="/img/html/parliament.jpg"
alt="Houses of Parliament at Sunset"
width="200" height="180">
Images can be centered inside a container with the appropriate CSS.
Here's an image centered in a <div>.
<style>
.img-center { margin: 0 auto; display: block; }
.blue-border { border: 3px solid lightblue; padding: 10px; }
</style>
<div class="blue-border">
<img class="img-center" src="/img/html/vangogh-sm.jpg" />
</div>
If an image fails to load, the alternative text defined on the alt attribute is displayed.
However, an alternative image can also be defined with an <object> element.
The alternative <object> image displays because the inside <img>
does not exist.
<object data="/img/html/parliament.jpg" type="image/jpg">
<img src="/img/html/not-found.jpg" alt="This image is not available">
</object>
Note: If the image provided in the <object> element is also broken, then the inside alt attribute value will be displayed.
The <img>
tag is part of a group of tags
that create multi-media experiences on the web.
This group is referred to as the Media tag group.
Together, they allow you to create powerful multi-media solutions.
Here is a list of media tags.
Element | Description |
---|---|
<audio> | Creates a player for sound such as music, sound effects, or others |
<video> | Creates a video player on a page |
<source> | Adds a media source for a <video>, <audio>, or <picture> |
<track> | Adds a text track, such as, subtitles and captions, to the media |
<embed> | Creates a container for an external resource |
<iframe> | Creates a frame in which another web page can be embedded |
<svg> | Displays an scalable vector image |
<canvas> | Creates a graphics container where JavaScript can draw |
<img> | Displays an image |
<area> | Specifies a map area for an image |
<map> | Defines a client-side image map, i.e. an image with clickable areas |
<figure> | Displays self-contained content, usually an image |
<figcaption> | Adds a caption to a <figure> (image) element |
Here is when <img>
support started for each browser:
Chrome
|
1.0 | Sep 2008 |
Firefox
|
1.0 | Sep 2002 |
IE/Edge
|
1.0 | Aug 1995 |
Opera
|
1.0 | Jan 2006 |
Safari
|
1.0 | Jan 2003 |