What is the purpose of the IMG tag?

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Element ofWeb Images: Best Practices and HTML Code In One Useful GuideWhat does HTML Tags Guide To Adding Images To Your Web Documents do?The <img> tag is used to insert an image into a document.DisplayinlineNull elementThis element must not contain any content, and does not need a closing tag.<img src="//sg.cdnki.com/what-is-the-purpose-of-the-img-tag---aHR0cHM6Ly9odG1sLmNvbS93cC1jb250ZW50L3VwbG9hZHMvZmxhbWluZ28uanBn.webp">

The <img> element is the most straight-forward way of displaying a static image on a page. You should normally use it whenever an image is actually a part of the content (as opposed to using an image as part of a page’s design).

All <img> tags must have a defined src attribute. This defines the image to be displayed. Typically, the src is a URL, but a data representation of the image can also be used in some cases.

Inline vs. Block

Intuitively, an image seems like a block element. It has a defined width and height, and cannot be broken over multiple lines. It behaves like a block.

Unfortunately, because of historical reasons, the HTML specification (and all browsers, by default) treat the <img> tag as if it is an inline element. Because of the way browsers handle white space, this can cause problems if you are not careful.

<img src="//html.com/wp-content/uploads/flamingo.jpg"> This combination of text and image looks bad on most browsers.

This combination of text and image looks bad on most browsers.

There at least two easy ways to fix this. The simplest is to simply make sure there is a line break before and after your images. This is fine if you don’t care much about flowing text around your image.

<!-- Line breaks around the image. --> This is some text that appears above the image.<br> <img src="//html.com/wp-content/uploads/flamingo.jpg"><br> Here is some other text below the image.

This is some text that appears above the image.

Here is some other text below the image.

A better, more systematic way of handling the inline image problem is to images into block elements with CSS.

img { display: block; } <!-- Image is block level. No need for line breaks. --> This is some text that appears above the image. <img src="//html.com/wp-content/uploads/flamingo.jpg"> Here is some other text below the image.

#block-img img { display: block;

}

This is some text that appears above the image.

Here is some other text below the image.

Using the display: block; CSS rule is a good default way of presenting images, which you can then build upon for other types of presentation — such as wrapping text around an image within the flow of an article.

Responsive Images

It’s important to make sure that images display correctly across a wide variety of screen widths and window sizes. One of the easiest techniques for accomplishing this is to use CSS to set the width (or the max-width) to 100%. This will ensure that the image is never too big for its container. When used in conjunction with a flexible-grid system, this optimizes the images display size for various screen widths.

img { width: 100%; height: auto; } <!-- This image is very large, but it will not overflow the container. --> <img src="//sg.cdnki.com/what-is-the-purpose-of-the-img-tag---aHR0cHM6Ly9odG1sLmNvbS93cC1jb250ZW50L3VwbG9hZHMvdmVyeS1sYXJnZS1mbGFtaW5nby5qcGc=.webp">

#responsive-width img { width: 100%; height: auto;

}

There are two other techniques you should know for responsive images:

• Using the srcset image attribute to specify multiple sizes of a single image.
• Using the <picture> element to specify different image designs for different contexts.

Deprecated <img> attributes

The <img> element has been a part of the HTML specification almost since the beginning, and has been a vital part of HTML-based page design since before the advent of modern browsers, CSS3, or semantic markup. Because of this history, there are a large number of deprecated (no longer in use) attributes that have previously been used with the <img> element.

Many of the deprecated attributes are related to layout and positioning, other have to do with browser behavior. In most cases, CSS is the preferred method for achieving these layout effects. In other cases, JavaScript is the best way to get the desired results.

Deprecated attributes are marked below in red. Where possible, we have provided additional information on how to achieve the desired effects using modern standards.

For more information about deprecated tags and other changes to the HTML specification, see our article on HTML5.

Browser Support for img

All	All	All	All	All	All

Attribute nameValuesNotes

crossorigin		Indicates that CORS headers should be used in the HTTP request, and specifies whether or not to use credentials.
height		Identifies the intrinsic height of an image file, in CSS pixels.
srcset		Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.
alt		Defines alternate text, which may be presented in place of the image.
name		Identified the image or provided additional information about it. Deprecated in HTML 4.0 in favor of other attributes.
longdesc		Defines a URL at which can be found more information about the image. It was written out of the HTML5 specification, but its status is not quite so clear as other deprecated features.
width		Indicates the intrinsic width of the image, in CSS pixels.
align		Was previously used to specify the alignment and placement of an image relative to the surrounding text. It has been deprecated and should not be used.
border		Previously used to define a border on an image element. It has been deprecated and should no longer be used.
hspace		Previously used to add horizontal space on both side of an image. It is now deprecated.
ismap		Identifies an image as a server-side image map. When the containing anchor link is clicked, the coordinates of the mouse will be included in the request.
usemap		Specifies a client-side image map to be used with the image.
lowsrc		Specified a smaller or lower-quality version of an image.
naturalsizeflag		This attribute does nothing. It was once used by a proprietary software system.
nosave		Was intended to prevent users from downloading an image. Was never a part of the HTML specification, and not widely implemented.
dynsrc		An early failed attempt to include native video playback in HTML.
controls		Toggled media player controls when used in conjunction with the <code>dynsrc</code> attribute. Both attributes are now deprecated.
loop		Previously used to specify the number of times a video should play, when used in conjunction with the dynsource attribute. Both attributes have been deprecated.
start		Was used in conjunction with the dynsrc attribute to add a video that would load in supported browsers in the place of the image that would otherwise be displayed.
suppress		Used by the now-defunct Netscape browser to suppress the display of image prior to image download completion.
src		Specifies the URL of an image to be displayed.