Internet, Networking, & Security Web Development HTML IMG Tag Attributes Use of the HTML IMG tag for pictures and objects by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on March 08, 2020 Artur Debat / Getty Images Web Development Web Design CSS & HTML SQL Tweet Share Email 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: <img src="url"> 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.” 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 attributes in your images may or may not be a good idea. Conventional wisdom in the past dictated that using them was always a good idea, but in an era of responsive web design, that no longer holds up. 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 attribute lets you add extra information about the image. 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 to your images. longdesc="A more detailed description of your image"The longdesc attribute supports URLs to a longer description of the image. This feature makes your images more accessible. 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"The attribute defines the width in pixels of any border around the image. It has been deprecated in favor of CSS in HTML4 and is obsolete in HTML5. 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 in HTML4 and is obsolete in HTML5. hspcace="10" and vspace="10"The hspace and vspace attributes add white space horizontally (hspace) and vertically (vspace). White space will be added to both sides of the graphic (top and bottom or left and right), so if you only need space on one side, you should use CSS. These attributes have been deprecated in HTML4 in favor of the margin CSS property, and they are obsolete in HTML5. 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 attribute. The smaller image will download and display first, and then when the larger image appears it will replace the low-source one. The lowsrc attribute was added to Netscape Navigator 2.0 to the <img> 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.