Image and Multimedia
Use the <img> element to embed an image given by the "src" attribute. Use the "alt" attribute to provide equivalent content when the image cannot be processed or when image loading is disabled.
Attributes for <img>
| Type | Attribute List |
|---|
| 'Standard' Attributes | "alt", "border", "height", "ismap", "src", "usemap", and "width" |
|---|
| New HTML5 Attributes | "crossorigin", "decoding", "loading", "referrerpolicy", "sizes", and "srcset" |
|---|
| Obsolete Attributes | "align", "hspace", "longdesc", "lowsrc", "name", and "vspace" |
|---|
Notes
- Use of the "height" and "width" attributes is recommended with the <img> element. Using these attributes generally result in faster and smoother (less jumpy) rendering.
Recommended Links
Accessibility Information & Tips
Search Engine Optimization (SEO)
- Using the "alt" attribute for images is not just good for accessibility, it's good for search engines too. Use the "alt" attribute to describe images but use relevant keywords and search terms in the description when appropriate, but don't overdo it by cramming in too many keywords. Consider using/adding graphic images, photos, or illustrations on important keyword-targeted pages with the important keywords used in the alt text.
- Following accessibility standards may improve search engine rankings. Use "alt", "title", and table "summary" attributes whenever relevant and possible. Use keywords and search terms in them but keep them accurate. Using CSS HTML Validator's optional accessibility checking can help.
- Image searches can be a significant source of visitors and traffic. Therefore, try to use keywords when naming images, and separate keywords with hyphens (not underscores).
Search Engine Links (for more information)
⯈ Help: <img> element