Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <img> Tag

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.

Example

#

An <img> of a painting by Claude Monet.

<img src="/img/html/parliament.jpg">
     
img = image

Using <img>

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.

More Examples

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.

Houses of Parliament by Claude Monet
<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.

Houses of Parliament by Claude Monet
<img src="/img/html/parllliment.jpg" 
     alt="Houses of Parliament by Claude Monet">

Code Explanation

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.


Attributes for <img>

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.


Obsolete Attributes

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

Additional Examples

An <img> whose dimensions are specified with width and height attributes.

Houses of Parliament at Sunset
<img src="/img/html/parliament.jpg" 
     alt="Houses of Parliament at Sunset"
     width="200" height="180">

How to center an image

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>

Did you know?

Did you know?

Alternative images instead of alternative text

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.

This image is not available
<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.


Media Tags

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

Browser support

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

You may also like


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides