HTML IMG Tag Attributes

Use of the HTML IMG tag for pictures and objects

Table of Contents
By
Jennifer Kyrnin
Jennifer Kyrnin
Writer
  • University of California
  • University of Washington

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Learn about our Editorial Process
Updated on March 08, 2020

The HTML IMG tag governs the insertion of pictures and other static graphical objects within a web page. This common tag supports several mandatory and optional attributes that add richness to your ability to design an engaging, image-focused website.

An example of a fully formed HTML IMG tag looks like this:

Required IMG Tag Attributes 

src="/path/to/image.jpg"

The only attribute you need to get an image to display on a web page is the src attribute. This attribute identifies the name and location of the image file to be displayed. 

alt="Description of image"

To write valid XHTML and HTML4, the alt attribute is also required. This attribute is used to provide nonvisual browsers with text that describes the image. Browsers display the alternative text in different ways. Some display it as a pop-up when you put your mouse over the image, others display it in properties when you right-click on the image, and some don't display it at all.

Use the alt text to give additional details about the image that are not relevant or important to the text of the web page. But, remember that in screen readers and other text-only browsers, the text will be read inline with the rest of the text on the page. To avoid confusion, use descriptive alt text that says (for example), “About Web Design and HTML” instead of just “logo.”

Workers using software to calibrate springs in office
Read More
Add Images to Web Pages Using HTML
By Jennifer Kyrnin

The alt text is also essential for SEO(Search Engine Optimization). The bots that search engines, like Google, use to explore the content on sites can't "see" images. They rely on the alt text to determine what's on the page.

In HTML5, the alt attribute is not always required, because you can use a caption to add more description to it. You can also use this attribute to indicate an ID that contains a full description: 

aria-describedby="Description of image"

Alt text is also not required if the image is purely decorative, such as a graphic at the top of a web page or icons. But if you’re not sure, include alt text just in case.

Sizing Attributes 

width="500"
and 
height="500"
Depending on your design, using the height and width

Generally, you're going to want image size to be set in your CSS. More often than not, that's going to be the result of the dimensions of an image's parent container. This approach allows for the most flexibility when adapting to different screen sizes. However, there are still cases where you may want to specify image dimensions as HTML attributes.

Other Useful IMG Attributes 

title="Descriptive image name"
The attribute is a global attribute that can be applied to any HTML element. Moreover, the title

Most browsers support the title attribute, but they do it in different ways. Some display the text as a pop-up while others display it in information screens when the user right-clicks on the image. You can use the title attribute to write additional information about the image, but don't count on this information being either hidden or visible. You should most definitely not use this to hide keywords for search engines. This practice is now penalized by most search engines. 

usemap=""
and 
ismap=""
These two attributes set client-side () and server-side (ISMAP) image maps 
longdesc="A more detailed description of your image"
The longdesc

Deprecated and Obsolete IMG Attributes

Several attributes are now obsolete in HTML5 or deprecated in HTML4. For the best HTML, you should find other solutions instead of using these attributes. 

border="3"

align="left"
This attribute allows you to place an image inside the text and have the text flow around it. You can align an image to the right or the left. It has been deprecated in favor of the float CSS property 
hspcace="10"
and 
vspace="10"
The hspace and vspace attributes add white space horizontally (hspace) and vertically (vspace 
lowsrc="/path/to/lowres.jpg"
The lowsrc attribute provides an alternative image when your image source is so large that it downloads extremely slowly. For example, you might have an image that is 500KB that you want to display on your web page, but 500KB would take a long time to download. So you create a much smaller copy of the image, perhaps in black and white or just extremely optimized, and put that in the lowsrc

The lowsrc attribute was added to Netscape Navigator 2.0 to the tag. It was part of DOM level 1 but was then removed from DOM level 2. Browser support has been sketchy for this attribute, although many sites claim that it's supported by all modern browsers. It is not deprecated in HTML4 or obsolete in HTML5 because it was never an official part of either specification.

Avoid using this attribute and instead optimize your images so that they load quickly. The speed of page loading is a critical part of good web design, and large images slow pages down enormously — even if you use the lowsrc attribute.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "HTML IMG Tag Attributes." ThoughtCo, Sep. 30, 2021, thoughtco.com/img-tag-attributes-3466493. Kyrnin, Jennifer. (2021, September 30). HTML IMG Tag Attributes. Retrieved from https://www.thoughtco.com/img-tag-attributes-3466493 Kyrnin, Jennifer. "HTML IMG Tag Attributes." ThoughtCo. https://www.thoughtco.com/img-tag-attributes-3466493 (accessed April 19, 2024).